Why do changes to an array 'B' in JavaScript spread to an array 'A' (which was used to define 'B' but thereafter never directly modified)?

Question

I created a constant named 'alphabet' and assigned it to an array containing the first 5 letters of the alphabet. I then wanted to have a function that would add a number to each character in the array, to enumerate them. But, I didn't want the values in the original 'alphabet' array to be modified, so I created a 'temp' variable within my enumerating function and only made changes to that. However, any changes I made to 'temp' spread over to 'alphabet'. I don't understand why and I'd like to prevent that from happening.

Here's my code: (also available on CodePen)

const alphabet = ["a", "b", "c", "d", "e"];

function alphaPosition(seq) {
  //'temp' gets 'seq' to avoid making changes directly on the provided argument.
  let temp = seq;
  //adds indexes to each element in the 'temp' array:
  for (let i = 1; i <= temp.length; i++) {
    temp[i - 1] = temp[i - 1] + i;
  }
  return temp;
}

console.log(
  "Step 1. 'alphabet' array before running the 'alphaPosition' function:"
);
console.log(alphabet);
console.log(
  "Step 2. This is the final value of 'temp' in 'alphaPosition' after running the function. An index has been added to every element in the array, as expected:"
);
console.log(alphaPosition(alphabet));
console.log(
  "Step 3. Here's the 'alphabet' array after running 'alphaPosition'. Indexes have also been added to every element, despite not modifying the function argument directly:"
);
console.log(alphabet);

Output:

/*
-> Step 1. 'alphabet' array before running the 'alphaPosition' function:
-> ["a", "b", "c", "d", "e"]
-> Step 2. This is the final value of 'temp' in 'alphaPosition' after running the function. An index has been added to every element in the array, as expected:
-> ["a1", "b2", "c3", "d4", "e5"]
-> Step 3. Here's the 'alphabet' array after running 'alphaPosition'. Indexes have also been added to every element, despite not modifying the function argument directly:
-> ["a1", "b2", "c3", "d4", "e5"]
*/

Why do changes to 'temp' spread to 'alphabet'? I would expect that, since I defined 'alphabet' as a constant, it shouldn't even be possible to modify it. Also, I never make changes to it in my function. I only use it to define 'temp'. Is there any way to prevent these spreads from happening?

I experimented doing something similar with a numeric const instead of an array, and everything worked as intended:

const number = 10;

function numChange(n) {
  //'virtualN' gets 'n' to avoid making changes directly on the provided argument.
  let virtualN = n;
  //modify 'virtualN' multiple times to emulate what was done to the 'temp' array in the alphaPosition function.
  for (let i = 1; i <= 5; i++) {
    virtualN = "iteration" + i;
  }
  return virtualN;
}

console.log(
  "Step 1. See the value of 'number' before running the numChange function:"
);
console.log(number);
console.log(
  "Step 2. This is the final value of 'virtualN' in 'numChange(number)' after running the function. As expected, it's been modified from its initual value by the 'for' loop:"
);
console.log(numChange(number));
console.log(
  "Step 3. Finally, we can see the value of 'number' is still the same as before running the numChange function. As expected, only the value of virtualN changed while the argument 'n' suffered no modifications:"
);
console.log(number);

Output:

/*
-> Step 1. See the value of 'number' before running the numChange function:    
-> 10     
-> Step 2. This is the final value of 'virtualN' in 'numChange(number)' after running the function. As expected, it's been modified from its initual value by the 'for' loop:  
-> iteration5
-> Step 3. Finally, we can see the value of 'number' is still the same as before running the numChange function. As expected, only the value of virtualN changed while the argument 'n' suffered no modifications:
-> 10
*/

Why does using an intermediary variable to avoid making changes to the original work for numbers and not for arrays?

I'd be extremely grateful for any help or clarification on this. I've added my code to this CodePen in case you'd like to tweak it or experiment more with it. Thank you in advance for any help.

Answer 1

This is about how assignment works in javascript. Given the following code:

const a = { foo: "bar" };
const b = a;

Variables a and b both point to the same object. This means there is only one object in memory and mutating the object a points to will be reflected when you try to access the object using b and vice versa. For example:

const a = { foo: "bar" };
const b = a;

a.foo = "baz";

console.log(a);
console.log(b);

So now, how do we make this not happen? We can do this by assigning a shallow copy of a to b. This can be done a few different ways, the following uses the spread operator (...):

const a = { foo: "bar" };
const b = { ...a };

a.foo = "baz";

console.log(a);
console.log(b);

So now, there are two different objects in memory. You'll notice I called this a shallow copy, which is important: if you have deep objects you'll need to copy deeply to accomplish the same kind of decoupling.

How to fix this in your specific case:

The TLDR for your specific case is that your temp variable should be a shallow copy of the array, not a reference to the existing array:

let temp = [...seq];

Answer 2

This seems to be a duplicate of this. and the underlying answer is here.

I explain why below:

It would seem that for Strings and numbers, javascript is pass by value, and objects such as arrays is pass by reference.

What this means is that in your first example; the function is taking a reference to the original array, and when you do let temp = seq, temp is actually just a pointer to the original object passed in. In this case that is alphabet so when you modify temp; it is actually modifying alphabet.

Pass by value just sends to the function the value, so the original variable stays the same as in your number example.

In order to get your intended outcome you would want to make a Deep Copy of your array like let temp = deepCopy(seq).

Use of const I think may just be syntax for the user to know not to modify it and some editors will not let you remodify const in the code, but in this case its happening in a roundabout way.