I thought Arrays are objects so when I execute this line of code, I'm expecting to get [3,3,3] because I mutated the array. However I get the [2,4,6]

var arr = [2,4,6];
    
function checkArr(arr){
  arr = [3,3,3];
}

checkArr(arr);
console.log(arr)

I thought Arrays are objects so when I execute this line of code, I'm expecting to get [3,3,3] because I mutated the array. However I get the [2,4,6]

var arr = [2,4,6];
    
function checkArr(arr){
  arr = [3,3,3];
}

checkArr(arr);
console.log(arr)

If I add a return statement, then I get the value I'm expecting. I'm wondering why return is needed when I gave the arr a new value during execution of the function.

var arr = [2,4,6];

function checkArr(arr){
  arr = [3,3,3];
  return arr;
}

checkArr(arr);
console.log(arr)

Lastly, during this for loop I don't use the return and the array value is changed! I'm a bit confused. Why the first example did not change the value of arr?

var arr = [2,4,6];

function checkArr(arr){
  for(var i = 0; i<arr.length; i++){
    arr[i] = 3
  }
}

checkArr(arr);
console.log(arr)

• javascript
• arrays
• pass-by-reference

Share Improve this question Follow edited Aug 31, 2021 at 5:18 abney317 8,53266 gold badges3535 silver badges5757 bronze badges asked Feb 7, 2017 at 15:17 John BryantJohn Bryant 7922 silver badges77 bronze badges 6

• 3 Because you're changing the parameter arr's reference. In the last example you're changing the contents of the parameter arr. – Dave Newton Commented Feb 7, 2017 at 15:19
• 3 Arrays, as everything else in JS are passed by value. In case of array (or object) this value is a copy of the reference to the passed array/object. – Teemu Commented Feb 7, 2017 at 15:19
• 4 You didn't mutate the array; you mutated the (shadowing) variable. Mutating an array means replacing the values of its members. Mutating the variable means replacing the value of the variable. – user1106925 Commented Feb 7, 2017 at 15:19
• 2 Everything in JavaScript is passed by value. The confusing part is that when a "value" is an object, it's a reference to the object. The word "reference" in the term "pass by reference" doesn't use the word in that sense. – Pointy Commented Feb 7, 2017 at 15:21
• 3 Also the code in your question suffers from the fact that in none of the examples is the checkArr() function actually called. – Pointy Commented Feb 7, 2017 at 15:24

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 8

You're not testing for the difference between pass-by-reference and pass-by-value in your examples. You are actually testing the scoping of variables.

For a good answer to your question about Javascript pass-by-value VS pass-by-reference, here is an answer on stack already.

---

Explanation for the behaviour of your code examples

Variables declared (created) inside a function are local to that function. This applies to any variable declared with the var keyword inside a function and any parameters that a function takes.

Variables declared outside a function are accessible inside a function if it hasn't got a got a variable declared by the same name.

---

Example 1:

var arr = [2,4,6]; ------------------
                                     |
function checkArr(arr){              |
// paramter means that a local       |
// variable 'arr' created inside     |
// function, so refers to value      |
// passed as argument or undefined   |
                                     |
  arr = [3,3,3];                     |
}                                    |---- you're loggin this variable, 
                                     |     the one inside the funciton is
var check = checkArr(arr);           |
                                     |     function and eny enclosing child functions
console.log(arr)  <------------------      (for the life of the function)

The behaviour bees more obvious if we change the argument name to be something else:

var arr = [2,4,6];

function checkArr(ref){
  ref = [3,3,3];
}

checkArr(arr);

When the function is called a local value ref gets created and set to the REFERENCE of arr. The following line, then overwrites the value of ref NOT the actual value of arr with the array literal [3,3,3].

function checkArr(){
  var ref = REFERENCE_TO_ARRAY_PASSED_IN;

  ref = [3,3,3];  // REFERENCE to 'arr' OVERWRITTEN by Array  literal
                  // global 'arr' remains unaffected
}

---

Example 2:

var arr = [2,4,6];

function checkArr(arr){
    arr = [3,3,3];
  return arr;
}

console.log(arr);
// this should log out [2, 4, 6] since you're not even invoking checkArr...

---

Example 3:

var arr = [2,4,6];

function checkArr(arr){
  // same as first example
  // a local variable 'arr' is created
  // from the parameter 'arr'

  // this for loop won't even run
  // if 'arr' isn't passed in as an argument
  // it'll fail on the first condition
  for(var i = 0; i<arr.length; i++){
    arr[i] = 3
  }
}
// the arr variable INSIDE the function is not available here

console.log(arr) // logs out [2, 4, 6]
// this function refers to the variable declared above the function definition, again you haven't even invoked the funciton 'checkArr'
// thought even if you did, it would not change the console.lout ouptput

---

Getting the function to affect the global variable:

Remove the parameter from the function defintion

var arr = [2,4,6];

function checkArr(){
  // no local variable or parameter is defined here
  // but function has access to it's enclosing scope
  // where there IS a variable 'arr'
  arr = [3,3,3]
}

var check = checkArr();

console.log(arr);

// logs out [3,3,3]

When invoking the function now, you will then be mutating the array because the function will look for the variable 'arr' locally, when it doesn't find it it'll look in it's enclosing scope which in this case is the global scope where it'll find the variable arr and mutate that.