Question of the Day #11 [Talk::Overflow]

#webdev #programming #beginners #javascript

This post explains a quiz originally shared as a LinkedIn poll.

🔹 The Question

const original = [1, 2, 3];
const copy = original;
copy.length = 0;
console.log(original);
console.log(copy);
console.log(original === copy);

Hint: Think about what happens when you modify the length property of an array and how variable assignment works with reference types.

🔹 Solution

Correct Answer: B) [], [], true

The output is:

[]
[]
true

The key insight: In JavaScript, arrays are objects, and objects are assigned by reference, not by value. Modifying the array through one reference affects all references to that array.

🔍 Line-by-line explanation

const original = [1, 2, 3] — creates a new array object in memory and assigns its reference to original
const copy = original — does not create a new array. Instead, it copies the reference:
- Both original and copy now point to the same array object
- Memory layout: original → [1, 2, 3] ← copy
copy.length = 0 — sets the array's length property to 0:
- JavaScript automatically removes all elements beyond the new length
- This is a destructive mutation of the array object
- Since both variables reference the same object, both see the change
- Memory layout: original → [] ← copy
console.log(original) → [] (the array has been emptied)
console.log(copy) → [] (same array, same result)
console.log(original === copy) → true (both variables reference the exact same object)

The misleading part: The variable name copy suggests a new independent array was created, but JavaScript's assignment operator doesn't copy objects—it copies references. Developers coming from languages with value semantics (like C structs or Python's immutable types) often expect copy to be independent.

🔹 The Fix

Always create actual copies when you need independent arrays:

Option 1: Spread operator (shallow copy)

const original = [1, 2, 3];
const copy = [...original];
copy.length = 0;
console.log(original); // [1, 2, 3] - unchanged
console.log(copy);     // []
console.log(original === copy); // false - different objects

Option 2: Array.from() (shallow copy)

const copy = Array.from(original);

Option 3: slice() (shallow copy)

const copy = original.slice();

Option 4: structuredClone() for deep copies (modern browsers)

const original = [[1, 2], [3, 4]];
const deepCopy = structuredClone(original);
deepCopy[0].length = 0;
console.log(original); // [[1, 2], [3, 4]] - unchanged

Important: The spread operator, Array.from(), and slice() create shallow copies. If your array contains objects or nested arrays, those inner references are still shared:

const original = [[1, 2], [3, 4]];
const shallowCopy = [...original];
shallowCopy[0].length = 0; // Mutates original[0]!
console.log(original); // [[], [3, 4]] - inner array was mutated

🔹 Key Takeaways

Arrays are objects and are assigned by reference, not by value
const copy = original creates a new variable pointing to the same array object
Setting array.length = 0 is a destructive operation that removes all elements
Mutations through one reference affect all references to the same object
Use spread operator [...arr], Array.from(), or slice() to create shallow copies
For nested structures, use structuredClone() or a deep clone library
In frameworks like React/Vue, always create new arrays/objects instead of mutating existing ones
The === operator compares object identity (memory address), not content

DEV Community