Create Array reference with element index instead of value copy

Question

The following initialization of b seems to copy array data from a instead of referencing it, as intended:

let a = [0,1];
let b = [a[0], 2];
a[0]=3;
console.log(b);

The output is 0,2.

• Why is the output not 3,2?
• How can b[0] be initialized with a reference to a[0] so that it reflects changes to a?
• If that's not possible, what are the alternatives?
• Is there a name for this?

Answer 1

You need to assign by reference. It means that variable b stores reference to variable a and variable a stores reference to array [0, 1]. It means any time you are editing any of variable a or b, then the array [0, 1] will be changed :

let a = [0,1];
let b = a;
a[0] = 3;
b[1] = 2;

An example:

let a = [0,1];
let b = a;
a[0]=3;
b[1] = 2;
document.querySelector("div").innerText = b;

<div></div>

Value vs. Reference

UPDATE:

You can get indexOf array to be edited and then just edit number by index:

let a = [0,1];
let b = [a[0], 2];
let index = b.indexOf(a[0]);
let valueToSet = 3;
a[0] = valueToSet;
b[index] = valueToSet;
console.log(`a is`, a);
console.log(`b is`, b);

Answer 2

It is copying the value only, not the reference.

Technically once you add into array b the value of a[0], you are not copying its reference, just the value. So later if you modify elements in array a then it won't affect the values of array b.

It works exactly like using a variable - using elem below:

let a = [0,1];
let elem = a[0]; // value type, not copying the reference
let b = [elem, 2];
a[0]=3;
document.querySelector("div").innerText = b;

<div></div>

I hope this explains!

Answer 3

As suspected,

let b = [a[0], 2];

initializes b with a copy of the Number in a instead of referencing it, so later changes to the item are not (automatically) reflected in b.

Unfortunately I was not able to find this behavior in the MDN JavaScript reference docs at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures. See StepUp's answer for a link to some information.

I am still hoping there might be a way (maybe Pointers in JavaScript??).

In the meantime, simply defining the variable(s) again ("update", "redefine") works around my problem - it's "better" than copying to both arrays only in that it's the simplest way to update a number of dependent variables:

let a = [0,1];
let b = [a[0], 2];
a[0]=3;
b = [a[0], 2];
console.log(b);  // [3,2]

This is the minimal case, it can of course be wrapped in a function (return b;) to simplify the (re-)definition of many variables.

Answer 4

Primitive values, such as numbers, booleans, and strings are copied by value, because they're immutable; conversely, objects, arrays, and functions are copied by reference.

See also: Primitive

This can be demonstrated with a simple example:

let a = [{foo: 0},{bar: 1}];
let b = [a[0], 2];
a[0].foo = 3;
console.log(b);

If you want to copy by reference, you need to copy the whole array, instead of individual values.