Consequences of variable scope

Question

what's the difference between the following two sections of code?

one.

        var arr = [70,80,150,310,260,100,78];
        var pointArr=[];
        var point={};

        for (var i = 0; i < arr.length; i++) {
          point.x=i*80;
          point.y=(arr[i]/600)*240;
          pointArr.push(point);
           console.log(point);
         console.log(pointArr);

        }

two

        var arr = [70,80,150,310,260,100,78];
        var pointArr=[];


        for (var i = 0; i < arr.length; i++) {
        //diff
            var point={};
          point.x=i*80;
          point.y=(arr[i]/600)*240;
          pointArr.push(point);
           console.log(point);
         console.log(pointArr);

        }

results: one enter image description here

two enter image description here

In your first example it's only using the last value (78) and index (6) of the array. Probably using values of earlier experimenting? If you can reproduce that with a [fiddle](http://jsfiddle.net) then please add that to your question. — yezzz, May 05 '17 at 10:58

score 0 · Answer 1 · answered May 05 '17 at 10:15

0

For code one, point is initialised once. Whereas for code two, it is initialised for every loop.

answered May 05 '17 at 10:15

rishipuri

1,498
11
18

score 0 · Answer 2 · answered May 05 '17 at 10:21

when you initialize the variable inside the loop, it will initialize (reset) with each iteration. This means that you will push data to an empty object and log that object every time the for loop runs, instead of continuously pushing to the object that was created outside the loop in your first example. Does that make sense?

score 0 · Answer 3 · answered May 05 '17 at 11:31

In JavaScript Objects are passed by reference. Whereas primitive types are passed by value and are immutable.

So in your first code example the variable point will be stored in memory as a reference in form of a pointer. Inside the loop you keep pushing the same reference to pointArr. Changing the x and y property of point will just change the referenced value. This has nothing to do with the loop itself.

Just change your first example to the following:

var arr = [70,80,150,310,260,100,78];
var pointArr=[];
var point={};

for (var i = 0; i < arr.length; i++) {
  point.x=i*80;
  point.y=(arr[i]/600)*240;
  pointArr.push(point);
}

window.setTimeout(function() {
  point.x = 'foo';
  point.y = 'bar';
  console.log(pointArr);
}, 2000)

By looking at the console output you can tell that you have several occurrences of the same reference inside pointArr.

By re-declaring point inside your loop, like you did in the second example, you simply created a new reference for each point. You may want to take a look at the following link which explains this in more detail.

Primitive Types and Reference Types

Hope that helps.

Consequences of variable scope

3 Answers3