JavaScript Object.freeze()와 const의 핵심 차이점 완벽 정리

Object.freeze()와 const의 차이점은, 전자는 객체의 변경 가능성(mutability)을 방지하지만 후자는 그렇지 못하다는 데 있습니다. 두 개념을 하나씩 자세히 살펴보겠습니다.

const란 무엇인가?

const는 let과 거의 같은 방식으로 동작합니다. const로 선언된 변수는 한 번 정의되면 다시 재할당(reassignment)할 수 없습니다. 또한 const로 선언한 변수는 var처럼 함수 스코프(function scope)가 아니라 블록 스코프(block scope)를 따릅니다.

그러나 const 키워드의 가장 큰 단점은 객체의 변경 가능성을 막지 못한다는 점입니다. 즉, const로 선언한 객체라도 내부 속성(property)은 얼마든지 수정할 수 있습니다. 흔히 "const로 할당한 변수는 절대 바뀌지 않는다"라고 알려져 있지만, 객체의 경우 속성 값이 얼마든지 변경될 수 있으므로 주의해야 합니다. 따라서 객체 자체의 변경을 막고 싶다면 const만으로는 부족합니다.

예제

아래 예제에서 처음에는 'Country' 속성의 값이 "India"였지만, 변수가 const로 선언되었음에도 불구하고 나중에 "England"로 변경되는 것을 확인할 수 있습니다.

<html>
<body>
<script>
    const person = {
      "name" : "Suresh",
      "Country" : "India",
      "Designation" : "Mayor"
    }
    person.Country = "England"
    document.write(person.Country);
</script>
</body>
</html>

출력 결과

England

Object.freeze()란 무엇인가?

Object.freeze() 메서드는 불변성(immutability)을 보장합니다. 객체가 한 번 동결(freeze)되면 해당 객체의 속성은 더 이상 변경할 수 없습니다.

아래 예제에서도 "Country" 속성 값을 "India"에서 "England"로 변경하려고 시도하지만, 불변성 덕분에 기존 값인 "India"가 그대로 유지됩니다.

예제

<html>
<body>
<script>
    const person = {
      "name" : "Suresh",
      "Country" : "India",
      "Designation" : "Mayor"
    }
    Object.freeze(person);
    person.Country = "England"
    document.write(person.Country);
</script>
</body>
</html>

출력 결과

India

정리

const: 변수의 재할당만 금지하며, 객체 내부 속성은 여전히 변경할 수 있습니다.
Object.freeze(): 객체 자체를 동결하여 속성의 추가, 수정, 삭제까지 모두 차단합니다.
따라서 객체의 불변성을 완전히 보장하려면 const와 Object.freeze()를 함께 사용하는 것이 좋습니다.