Javascript array mutation in looping with a callback

Question

I implement looping with a callback using call() function (example from http://ejohn.org/apps/learn/#28, see below)

function loop(array, fn){ 
  for ( var i = 0; i < array.length; i++ ) 
    fn.call( array, array[i], i ); 
}

To modify contents of the array, I can use

var a = [0,1,2]
loop(a, function(v, i) { this[i] = 0; }); // a = [0,0,0]

but not

var a = [0,1,2]
loop(a, function(v, i) { v = 0; }); // a = [0,1,2]

Why does that happen? this is array, so this[i] and array[i] and v are the same. However, in one case the array is modified, in another it stays immutable.

Because reassigning a variable in javascript will not update whatever that variable was referencing — megawac
– megawac, Commented Dec 14, 2013 at 1:56

MT0 · Accepted Answer · 2013-12-14 02:15:27Z

2

When fn.call( array, array[i], i ); is invoked then within fn():

this stores a reference to array;
v is a variable storing the value of array[i] (and can be thought of as doing var v = array[i]; at the start of the function's scope); and
i is a variable storing the value of the current index of the array.

Note that this stores a reference whereas v and i are variables storing values.

In the first function (loop(a, function(v, i) { this[i] = 0; });) is the equivalent, for each array element, of var v = a[i]; a[i] = 0; (since this within the function is a) and so the array is updated as the value 0 is assigned to the given index of the array.

However, in the second function (loop(a, function(v, i) { v = 0; });) is the equivalent, for each array element, of var v = a[i]; v = 0; and so the array is not updated as the value '0' is assigned to a variable v within the function's scope and not to the array.

edited Dec 14, 2013 at 2:15

answered Dec 14, 2013 at 2:07

MT0

173k12 gold badges70 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

megawac · Accepted Answer · 2013-12-14 01:58:15Z

0

Because reassigning a variable in javascript will not update whatever that variable was referencing. In the first snippet you are reassigning the index i of an array to the new value 0. In the second snippet you are just reassigning the v to 0 which will not modify the array.

Essentially what you're doing to simply is

var a = [1,2,3];
//first case
var v = a[1];
a[1] = 0;
//Array value of index 1 is updated

//second case
var v = a[1];
v = 2;
//array value of index 1 is not updated

answered Dec 14, 2013 at 1:58

megawac

11.4k6 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

Javascript array mutation in looping with a callback

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related