왜 const는 JavaScript 배열을 고정하지 않을까

Source: Dev.to

Intro - The Common Confusion

const를 배열에 사용하면 전체가 고정된 것처럼 느껴집니다. 그런데 push(), pop()을 하거나 값을 업데이트하면 여전히 변합니다. 상수라면 왜 계속 변하는 걸까요?

답은 JavaScript가 변수와 레퍼런스를 처리하는 방식에 있습니다. 그 차이를 이해하면 이 동작은 훨씬 덜 신비롭고 논리적으로 보입니다.

Binding vs Value — What const Actually Does

const 변수는 땅에 단단히 박힌 표지판과 같습니다. 표지판 자체를 다른 곳으로 옮길 수는 없지만, 표지판이 가리키는 대상은 자유롭게 움직일 수 있습니다.

• 원시값(Primitives) 은 한 번 놓이면 형태가 변하지 않는 단단한 돌과 같습니다.
• 배열과 객체 는 작업대와 비슷합니다: 표지판은 고정돼 있지만, 작업대 위의 도구와 부품은 재배열, 추가, 제거가 가능합니다.

핵심은 여기 있습니다. const는 포인터를 보호할 뿐, 그 포인터가 가리키는 대상 은 보호하지 않습니다.

Mutable vs Immutable Data Types

• 원시값 은 봉인된 봉투와 같습니다—내용을 읽을 수는 있지만 내용을 바꿀 수는 없습니다. 다른 것이 필요하면 새로운 봉투를 만들어야 합니다.
• 객체와 배열 은 열린 노트북과 같습니다. 같은 페이지에 글을 쓰고, 지우고, 메모를 추가하거나 순서를 바꿀 수 있습니다.

이 차이가 const 변수는 여전히 제자리에서 변하는 데이터를 가리킬 수 있는 이유를 설명합니다.

Concrete Examples — What You Can and Can’t Do

const는 변수 바인딩을 고정할 뿐, 값 자체를 고정하지는 않습니다. 따라서 배열이나 객체의 내용을 변경할 수는 있지만, 변수를 새로운 값으로 재할당할 수는 없습니다.

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

이 예시들은 핵심 차이를 보여줍니다: 변수 자체는 상수이지만, 그 변수가 가리키는 데이터는 업데이트될 수 있습니다.

When Immutability Is Needed

앱의 공유 상태나 함수형 프로그래밍처럼 데이터가 절대 변하지 않아야 할 때가 있습니다. const만으로는 변형을 막을 수 없습니다.

// 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

데이터를 고정하면 버그를 방지하고 코드를 예측 가능하게 만들 수 있습니다.

Conclusion & Best Practices

• 기본적으로 const를 사용하세요; 이는 변수를 고정할 뿐, 데이터를 고정하지는 않습니다.
• 배열과 객체는 명시적으로 freeze하지 않는 한 여전히 변할 수 있습니다.
• 명확한 네이밍과 불변성 패턴을 사용하면 코드가 예측 가능하고 유지 보수가 쉬워집니다.

이 간단한 규칙들을 기억하면 JavaScript가 더 이상 까다롭게 느껴지지 않을 것입니다.

References / Further Reading

• MDN Web Docs — const — JavaScript 변수 바인딩을 설명하는 공식 문서.
• MDN Web Docs — Immutable / Mutable — 불변성과 가변성에 대한 용어 사전 및 설명.
• GeeksforGeeks — JavaScript const — 초보자 친화적인 설명과 예시.
• freeCodeCamp — Differences between var, let, and const — 실용적인 가이드와 코드 예시.
• Stack Overflow — “Keyword const does not make the value immutable” — 흔한 혼동을 해소하는 커뮤니티 토론.