What is "Arrays and Pointers" about?

Because arrays are mutable objects, assigning them to variables can lead to unexpected consequences. Learn how references work in JavaScript.

What topics does "Arrays and Pointers" cover?

This article covers: javascript pointers, pass by reference javascript, const with arrays, mutable variable assignment.

Arrays and Pointers

The Essentials

Variables Point to Arrays: A variable does not contain an array; it acts as a pointer to the array in memory.
Shared Pointers: If you assign let array2 = array1;, both variables point to the exact same array object. Mutating one mutates the other.
const with Arrays: Using const prevents you from pointing the variable to a different object, but it does not prevent you from mutating the array it points to.

In the last chapter, I covered the mental model of variables: variables are not boxes; they are contacts in an address book that point to values in memory.

When you deal with primitive, immutable values like strings or numbers, this distinction rarely causes issues. But when you start dealing with mutable values like arrays, this pointer model becomes absolutely critical.

Two Pointers, One Array

Take a look at this code and try to guess what the final value of array2 will be:

JavaScript

let array1 = [1, 2, 3];
let array2 = array1;

array1[1] = 4; // Change the middle element
console.log(array2);

If you still think of variables as boxes, you might assume that array2 is a completely separate box that took a copy of [1, 2, 3]. If that were true, changing array1 would not affect array2.

But if you run this in your console, you will see that array2 is now [1, 4, 3].

I can walk through what actually happened using the address book model:

let array1 = [1, 2, 3];: JavaScript conjured up an array object in memory. Then, it added array1 to its address book and drew a pointer (an arrow) to that array.
let array2 = array1;: JavaScript looked up what array1 points to. It saw the array [1, 2, 3]. Then, it added array2 to its address book and drew a pointer to the exact same array object.
array1[1] = 4;: JavaScript followed the array1 pointer to the array, and mutated the element at index 1.

Because both variables are pointing to the identical array object in memory, any mutation made through one variable is instantly reflected when you look through the other.

`const` with Mutable Data

This shared pointer concept leads to one of the most common points of confusion for beginners: combining const with arrays.

JavaScript

const operands = [4, 6];
operands[0] = 5;

console.log(operands); // Returns [5, 6]

Wait, I thought const meant the value could never change?

This is where the pointer model saves the day again. The const keyword does exactly one thing: it makes the pointer immutable. Once operands is pointed at that specific array in memory, you can never point operands to a different array or a string. The arrow is locked in place.

However, const says absolutely nothing about the data on the other side of the arrow. The array itself is still an array, and arrays are inherently mutable. You are free to change its indices, .push() to it, or .pop() from it.

You can have an immutable pointer pointing to a mutable value.

Arrays and Pointers

The Essentials

Two Pointers, One Array

const with Mutable Data

Further Reading and Watching

`const` with Mutable Data