Why const Doesn’t Freeze Your JavaScript Arrays

Source: Dev.to

Intro - The Common Confusion

Using const with an array feels like it should lock the whole thing in place. Then you try push(), pop(), or update a value, and it still changes. If it’s constant, why is it still changing?

The answer lies in how JavaScript handles variables and references. Once you see that distinction, this behavior becomes far less mysterious and a lot more logical.

Binding vs Value — What const Actually Does

A const variable is like a signpost planted firmly in the ground. You can’t move the signpost or point it somewhere else, but whatever it’s pointing at can shift around freely.

• Primitives behave like solid stones once placed; they don’t change shape.
• Arrays and objects are more like workbenches: the signpost stays fixed, but the tools and pieces on the bench can be rearranged, added, or removed.

That’s the heart of it. const protects the pointer, not the thing it points to.

Mutable vs Immutable Data Types

• Primitives act like sealed envelopes—you can read what’s inside, but you can’t change the contents. If you need something different, you create a whole new envelope.
• Objects and arrays work more like open notebooks. You can write, erase, add notes, or shuffle things around on the same pages.

This difference explains why a const variable can point to data that still changes in place.

Concrete Examples — What You Can and Can’t Do

const locks the variable binding, not the value itself. That means you can change the contents of arrays or objects, but you cannot reassign the variable to something new.

const numbers = [1, 2, 3];

// ✅ Allowed: mutating the array
numbers.push(4);
numbers[0] = 10;
console.log(numbers); // [10, 2, 3, 4]

// ❌ Not allowed: reassigning the variable
// numbers = [5, 6]; // TypeError: Assignment to constant variable

const person = { name: "Alice", age: 25 };

// ✅ Allowed: modifying properties
person.age = 26;
person.city = "Toronto";
console.log(person); // { name: "Alice", age: 26, city: "Toronto" }

// ❌ Not allowed: reassigning the variable
// person = { name: "Bob" }; // TypeError

These examples show the key difference: the variable itself is constant, but the data it points to can be updated.

When Immutability Is Needed

Sometimes you really don’t want data to change, like shared state in apps or functional programming. const alone won’t stop mutations.

// Freeze an object so it can’t be changed
const person = Object.freeze({ name: "Alice", age: 25 });
person.age = 26; // ❌ ignored in strict mode

// Use libraries for deeper immutability
// e.g., Immer or Immutable.js

Locking data helps prevent bugs and keeps your code predictable.

Conclusion & Best Practices

• Use const by default; it locks the variable, not the data.
• Arrays and objects can still change unless you explicitly freeze them.
• Clear naming and immutable patterns make your code predictable and easier to maintain.

Keep these simple rules in mind, and JavaScript stops feeling so tricky.

References / Further Reading

• MDN Web Docs — const — Official docs explaining variable bindings in JavaScript.
• MDN Web Docs — Immutable / Mutable — Glossary and explanation of mutable vs immutable data.
• GeeksforGeeks — JavaScript const — Beginner‑friendly explanation with examples.
• freeCodeCamp — Differences between var, let, and const — Practical guide and code examples.
• Stack Overflow — “Keyword const does not make the value immutable” — Community discussion clarifying common confusion.