In javascript, array is showing 'pass by value' behavior instead of 'pass by reference'

Question

I know that array being an object in javascript, makes it non-primitive data types, which by default makes it a pass by reference. Now this is true in most of the used cases I have encountered however the code I am sharing shows a weird behavior which I am not understanding and it seems more like a 'pass by value type'.

var arr = ['a','b','c']
/*
function addArr(ar){
    ar.push('d')
    return ar
}

console.log(addArr(arr))  // ['a', 'b', 'c', 'd']
console.log(arr)          // ['a', 'b', 'c', 'd']
*/

//the above output is expected behavior for an Array object



function changeArr(ar){

    console.log(ar)   //1-// ['a', 'b', 'c']
    ar = ['12','11']
    console.log(ar)   //2-// ['12', '11']
    return ar
}

console.log(changeArr(arr)) //3-// ['12', '11']
console.log(arr)            //4-// ['a', 'b', 'c']

//now I expect the forth console output to be  ['12','11'] here because it is an object

Possible duplicate of [Is JavaScript a pass-by-reference or pass-by-value language?](https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language) — Ivar, Sep 30 '19 at 13:27
You have assigned a new array to the reference simply so that makes it a new object. — Shubham Dixit, Sep 30 '19 at 13:28
JavaScript is always pass by value. However, the *value* of an object is its reference. Still, if you reassign the *variable*, you aren't changing *the object at the end of the reference*. — VLAZ, Sep 30 '19 at 13:29

Adam Jenkins · Answer 1 · 2019-09-30T13:40:59.913

0

function changeArr(ar){

    console.log(ar)
    ar = ['12','11'] // <- THIS LINE RIGHT HERE
    console.log(ar)
    return ar
}

You are creating a new array, not manipulating the old one. Every time you call that function you are creating a new array and returning the new one (if you call that function 5 times you'll get 5 new arrays). The one that you passed as an input is irrelevant and is left unchanged.

EDIT The only relationship between the new array you creating and what you passed as an input is that they use the same variable name inside the closure, so that, inside that closure, you can no longer access both the input and the new array at the same time. But that's a different topic...

Maybe this will make it clearer:

var x = 'something that is not an array'
console.log(changeArr(x));
console.log(x);

And this would perhaps make it clearest of all:

var arr = [1,2,3,4];
console.log(changeArr());
console.log(arr);

edited Sep 30 '19 at 13:40

answered Sep 30 '19 at 13:30

Adam Jenkins

51,445
11
72
100

okay this does make it clear, so I am making a new array inside the function which is not related to the function parameter and hence both objects are different, however I never declared the ar inside the function. I mean there should be some kind of declaration like 'var ar = ["12", "11"] ' inside the changeArr function, to indicate that this is not the same array. Though code is behaving the same way even if I use 'var ar = ["12","11"]' or 'ar = ["12", "11"]' – adarsh Sep 30 '19 at 20:39
You don't need to specify a `var` keyword to declare something. Open your console and type `ar = ['12','11']`. Secondly, [variable shadowing](https://en.wikipedia.org/wiki/Variable_shadowing). Damn computers, they always do exactly what you tell them to do and never what you want them to do :) – Adam Jenkins Sep 30 '19 at 20:42

score 0 · Answer 2 · answered Sep 30 '19 at 13:31

0

You are basically re-assinging the object and not modifying the original object.

ar = ['12','11']

That's why Javascript reassigns new value.

answered Sep 30 '19 at 13:31

Karan Kiri

316
2
12

Shubham Dixit · Answer 3 · 2019-09-30T13:40:03.617

Please see the comments.

let arr = [1, 2, 3, 4];

function changeArr(ar) {

  //console.log(ar)
  ar = ['12', '11'] // creating a new array ie creating a new space in heap putting these values there and storing its reference in ar or assigning it to the reference 
  //console.log(ar)
  return ar
}

function changeArr2(ar) {


  ar.push(55); // here we have changed the array  that is pointed by the reference stored in ar

  return ar
}

console.log(changeArr(arr))
console.log(changeArr2(arr));
console.log(arr) // now the original array contains 55 too

For some more clear picture have a look here-https://stackoverflow.com/a/57852144/7849549

In javascript, array is showing 'pass by value' behavior instead of 'pass by reference'

3 Answers3