[JavaScript]const와 Object.freeze()의 차이

이번 포스팅에서는 const와 Object.freeze()의 차이를 소개합니다.

 

목차

1. 개요
2. const
3. Object.freeze()

---

개요

ES6은 출시 이후 몇 가지 새로운 기능과 함수를 JavaScript에 도입했습니다. 새로운 기능 중에는 Object.freeze() 함수와 const가 존재합니다.

 

Object.freeze() 함수와 const는 비슷한 특징을 가지고 있지만, 완전히 다르게 동작합니다. 

 

const

• const 키워드로 생성된 변수는 값을 재할당할 수 없습니다.
• const 키워드로 생성된 상수 변수에 값을 재할당하려고 하면 TypeError가 발생합니다.

 

Object.freeze()

• freeze는 "얼리다"라는 의미로 freeze() 함수는 "객체를 동결하기 위한 함수"입니다.
• 불변 객체와 동일한 객체를 반환합니다.
• 객체의 속성을 추가, 제거 또는 변경할 수 없습니다.

---

const

const testValue = "Test";

testValue = "Change";

const 키워드로 생성된 변수에 값을 재할당했으므로 Uncaught TypeError이 발생합니다.

 

const의 문제

const 키워드로 객체를 생성하면, 재할당은 불가능하지만 객체의 속성은 변경할 수 있습니다.

 

아래 코드는 const 키워드를 사용하여 객체를 생성하고 속성을 변경합니다.

const userInfo = {
    name: 'Kang Jas Seong',
    age: 29
}

console.log(userInfo.age);

userInfo.age = 30;

console.log(userInfo.age);

실행 결과

 

const 키워드로 객체를 생성하면 위 코드처럼 속성은 변경할 수 있지만, 재할당은 불가능합니다.

const userInfo = {
    name: 'Kang Jae Seong',
    age: 29
}

userInfo = {
    name: 'Kang Jae Seong',
    email: 'Test@Test.com'
}

실행 결과

 

다음 코드처럼 속성을 추가할 수도 있습니다.

const userInfo = {
    name: 'Kang Jae Seong',
    age: 29
}

userInfo.email = "test@test.com"

console.log(userInfo);

실행 결과

객체의 속성을 추가, 수정, 삭제할 수 없는 객체를 원한다면, const 키워드로는 불가능하고 Object.freeze() 함수를 사용해야 합니다.

---

Object.freeze()

불변 객체로 설정하려는 객체를 Object.freeze() 함수에 전달합니다.

 

아래 코드는 Object.freeze() 함수를 호출 후 객체의 속성을 추가, 변경합니다.

const userInfo = {
    name: 'Kang Jae Seong',
    age: 29
}

Object.freeze(userInfo);

userInfo.email = "test@test.com";
userInfo.age = 30;

console.log(userInfo);

실행 결과

 

하지만, 중첩된 객체는 다음 코드처럼 속성이 고정되지 않는 문제가 발생합니다.

const userInfo = {
    name: {
        first: 'Kang',
        last: 'Jae Seong'
    }
}

Object.freeze(userInfo);

userInfo.name.first = 'Hong'

console.log(userInfo);

실행 결과

따라서 중첩된 객체도 고정하기 위해서는 재귀적으로 중첩된 객체에 Object.freeze() 함수를 적용해야 합니다.

 

중첩된 객체를 재귀적으로 고정시키는 함수는 직접 구현하거나 다른 개발자가 구현한 라이브러리를 사용할 수 있습니다.