How to access variable outside of a nested each() function?

Question

I want to be able to access the value of a nested each() function outside of the function.

My approach was to:

defined the variable outside of the function,
update it within the function,
be able to access the updated value outside of the function.

But that doesn't work:

jsFiddle

jQuery

var my_array = [{"check": "tom", "nested_array": [{"nested_array_2": ["1", "2"], "name": "tom", "image": "one.jpg"}, {"nested_array_2": ["1", "2"], "name": "bob", "image": "two.jpg"}]}];

var check = my_array[0].check;

var desired_value = "hello";

$.each(my_array, function (obj, v) {
    $.each(v.nested_array, function (i, value) {
        if (value.name == check) {
            var desired_value = value.image;
            alert(desired_value);  // this returns `one.jpg`, the variable has been updated.  
        }
    });
});

//alert(desired_value); // this alerts 'hello',  the variable has not been updated.

If the above is the wrong approach, could anyone demonstrate how to access the returned value of a nested each() loop?

Edit: I should probably say, I was cautious to use a global var at any stage, as this can cause problems later on in the application.

Edit 2: I thought using a global var within the function would forever and always define the variable (unless it was globally defined again), but it doesn't seem to eg:

var desired_value = "hello";

$.each(my_array, function (obj, v) {
$.each(v.nested_array, function (i, value) {
if (value.name == check) {
desired_value = value.image; // 'global'
alert(desired_value);  // this returns `one.jpg`, the variable has been updated.  
}
});
});

alert(desired_value); // this alerts 'one.jpg',  the variable has been updated.  

var desired_value = "new value";

alert(desired_value); // this alerts 'new value'

Updated jsFiddle

http://jsfiddle.net/rwone/ESXB4/2/

This is very basic javascript. Remove `var` from your inner-most `desired_value`, so it becomes: `desired_value = value.image;`. — Niels Abildgaard, Jan 27 '14 at 10:27

score 1 · Accepted Answer · answered Jan 27 '14 at 10:25

1

You are shadowing desired_value from the outer scope with var desired_value = value.image;. This creates a local variable named desired_value within the loop function. You should remove var here.

answered Jan 27 '14 at 10:25

Alexander Tokarev

2,743
2
20
21

This was first answer so I should accept it. Could you provide further information as to why 'globally' assigning the variable within the function does not override later assignment with `var` - see updated post and fiddle. – user1063287 Jan 27 '14 at 10:50
1

Here's the answer: http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-ecmascript-262-3rd-edition – Alexander Tokarev Jan 27 '14 at 11:08
Ah excellent thanks, this was very informative `"If you're in a function then "var" will create a local variable, "no var" will look up the scope chain until it finds the variable or hits the global scope (at which point it will create it)"` ([source](http://stackoverflow.com/a/1470494/1063287)) – user1063287 Jan 27 '14 at 11:12
4 years later and this was perfect! Thank you @AlexanderTokarev – Matt Feb 05 '18 at 16:46

score 1 · Answer 2 · answered Jan 27 '14 at 10:29

Updated FIDDLE

        var my_array = [{"check": "tom", "nested_array": [{"nested_array_2": ["1", "2"], "name": "tom", "image": "one.jpg"}, {"nested_array_2": ["1", "2"], "name": "bob", "image": "two.jpg"}]}];

var check = my_array[0].check;

var desired_value = "hello";

$.each(my_array, function (obj, v) {
$.each(v.nested_array, function (i, value) {
if (value.name == check) {
desired_value = value.image;  // here changes was made
alert(desired_value);  
}
});
});

alert(desired_value);

How to access variable outside of a nested each() function?

2 Answers2