Javascript and jQuery arrays undefined

Question

I've tried to setup an array, but when i use console.log(array_name) , it prints the number of the counter (x), instead of printing the path of the image. The undefined presents itself once I tried to use console.log(img[x]) to check if the content of the variable, it's the source of the image. But since img doesn't work either, I don't have any clue of what is going on.

$(window).on('load', function(){
    var x = 0;
    var img = [];
        $(".gallery_img").each(function(img){
            var image = new Image();
            image.src = $(this).attr("src");
            x = x + 1;
            img[x] = image.src;
            console.log(img);
            console.log($(this).attr("src"));

I'm pretty new to jquery and javascript, so I'd be very grateful for some specific explanation and not just solution. I hope I've been specific enough, and not a duplicate

Answer 1

try to rename your array variable var img = []; to something like var imgs = [];

because you're using the same variable in your function here:

$(".gallery_img").each(function(img)..

Added from @guest271314 's comment.

The reason why it's printing the count instead of the path because the first parameter within .each(index, element) is index of element within collection of elements

Answer 2

You're incrementing your array before it has a chance to add an image to index 0.

$(window).on('load', function(){
var x = 0;
var img = [];
    $(".gallery_img").each(function(img){
        var image = new Image();
        image.src = $(this).attr("src");
        x = x + 1; //<- x becomes 1
        img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
        console.log(img);
        console.log($(this).attr("src"));

Try changing your code to this.

 $(window).on('load', function(){
var x = 0;
var img = [];
    $(".gallery_img").each(function(img){
        var image = new Image();
        image.src = $(this).attr("src");
        img[x++] = image.src; //this will increment x after the value x is used.
        console.log(img);
        console.log($(this).attr("src"));

Answer 3

Well, while you think you passing your declared array to the anonymous function in fact you defining new local variable img with this code:
.each(function(img){}) that only can be seen inside this new anonymous function
Because this function is a callback that should have input parameters, that will be passed by each() function: jQuery.each( array, callback )

Now what you did, you have defined your array img in scope of function:
$(window).on('load', function(){..});
And then defined one more variable as input parameter that will be used inside this function scope:
$(".gallery_img").each(function(img){..});
I guess you was trying to pass this variable to this function, but this is unnecessary, since you already declared it in more wider scope and this variable already available in function scope.
Truth about javascript variable scopes

When you defined this variable as a callback function parameter, you acquire your new local variable img that gets index of the match as a value and your array img become unavailable inside this function.

So what you had to do actually:

$(window).on('load', function(){
  var x = 0;
  var img = [];
    $(".gallery_img").each(function(ind, val){
      var image = new Image();
      image.src = $(this).attr("src");
      // Unnecessary, we already have index - ind, unless you use some filtering.
      // So you could get rid of x variable and use ind instead, like img[ind] = image.src
      x = x + 1; //<- x becomes 1
      img[x] = image.src; //<- img[0] is undefined as img[1] is where the index began.
      console.log(img);
      console.log($(this).attr("src"));

Also I advice you to get used to jsfiddle to setup your sample code, that will help you to debug your code and us to help with your actual sample.