Question About Javascript Functions

[Sean2]

My question is, why does testArr change from 1,2,3,4,5 to 2,3,4,5,6?
In the first one the testArr is an array and it is changed by the result of the function nextInLine, but in the second one I changed it to a number and added arr + item. In this one testArr doesn’t get altered by the results of nextInLine.

function nextInLine(arr, item) {
arr.push(item);
return arr.shift();
}

let testArr = [1, 2, 3, 4, 5];

console.log(testArr);
console.log(nextInLine(testArr, 6));
console.log(testArr);

// [1,2,3,4,5]
//1
// [2,3,4,5,6]

function nextInLine(arr, item) {
return arr + item;
}

let testArr = 10;

console.log(testArr);
console.log(nextInLine(testArr, 6));
console.log(testArr);

//10
//16
//10

[bbsmooth]

@Sean2

why does testArr change

Because in JS, arrays (and objects in general) are passed into a function by reference, which means that anything you do to the array inside of the function also affects the array outside of the function. In other words, when you pass testArr to the function, even though you are using a different name for the array inside of the function (arr in this case) you are still really changing testArr itself. Thus, the following code in your function:

arr.push(item);
return arr.shift();

can really be thought of as:

testArr.push(item);
return testArr.shift();

when you pass the array testArr into it.

[bbsmooth]

For your second function:

function nextInLine(arr, item) {
return arr + item;
}

You aren’t modifying either of the values you passed into the function, so there is no reason that testArr would get altered in the first place and thus it won’t change after the function is called.

But, if you did the following:

function nextInLine(arr, item) {
  arr += 10;
  return arr + item;
}

Now you are changing the value of arr inside of the function and it might seem like that would change the value of testArr outside of the function. But it won’t because numbers are passed into a function by value. This means that a copy of the number is passed into the function through the function parameter arr. So anything you do to arr inside of the function is being done on a different copy of that value and is not affecting testArr in any way.

[bbsmooth]

FYI, when you have questions about specific challenges, please include the link to the challenge so we know which one you are referring to. In this case it is Stand in Line.

By the way, this was a great question to ask. It shows that you are curious about how things work, which is a great trait to have as a programmer. I don’t think fCC has introduced these concepts to you yet at this point, so you are just jumping the gun a little. But that’s not a bad thing in my opinion. Keep up the great work and continue to ask questions.

Also, now that you know that there are two ways to pass a value into a function (by reference and by value), and that arrays are always passed in by reference, then what would you need to do in order to make sure you didn’t change the original array passed into the function? Hint: there is no way to tell JS to pass an array into a function by value, so you’ll need to do something inside of the function in order to make sure you don’t change the original array.

[Sean2]

Thank you for the explanations. It makes more sense now. I tried to assign arr to a different variable but it still changes testArr. Thanks, now I won’t be able to stop thinking about this for the next week. Lol.

function nextInLine(arr, item) {
let arrTwo = arr;
arrTwo.push(item);
return arrTwo.shift();
}

let testArr = [1, 2, 3, 4, 5];

console.log(testArr);
console.log(nextInLine(testArr, 6));
console.log(testArr);
console.log(nextInLine());

[ 1, 2, 3, 4, 5 ]
1
[ 2, 3, 4, 5, 6 ]
TypeError: Cannot read properties of undefined (reading ‘push’)

[bbsmooth]

@Sean2

let arrTwo = arr;

You have the right idea here, it’s just not doing what you think it’s doing.

You are correct, the way to treat an array like it was passed by value is to create a copy of it in the function and then only modify that copy. But in JS, assigning the array to another variable like you did doesn’t actually create a copy of the array. That assignment is still by reference as well. So after you do this:

let arrTwo = arr;

Then both arrTwo and arr are pointing to the same array, which is testArr. Ya, you have three names for the same array now

There are several ways to make an actual copy of an array. You’ll learn some of them as you get deeper into the curriculum. Or you could google it if you want to know now.