생활코딩 이고잉님 강의(JavaScript Immutability)
수강 중 정리한 내용입니다.
자바스크립트의 높은 자유도로 인해 의도적으로 수정을 제한하는 문법이 생겨났는데, const와 freeze다. const는 변하지 않는 값. 상수를 지정하는 키워드로 let과 반대되는 개념이다. (const와 let이 등장하지 않았던 시절의 var와 비교해볼 수도 있다.)
const 키워드를 통해 한번 값이 지정되면 그 값은 변할 수 없다. 값이 특정 메모리에 위치한다는 것을 생각했을 때 const로 지정된 '이름(name)' 을 변경할 수 없다는 의미다. const가 나오기 이전 ES5에서 객체의 자유도에 제한을 주기 위한 메소드 freeze()가 등장했는데, const과 자주 비교되는 메소드다. const가 값 자체 혹은 이름을 변경할 수 없도록 해준다면 freeze()는 '객체를 얼린다'라는 의미로 객체의 내용(속성 값)을 고정시킨다.
예시 코드를 확인해보자.
이렇게 const로 선언한 o1은 o2로 변경할 수 없고(에러) freeze()로 얼린 o1의 속성 name 값('kim')을 'park'으로 변경하려고 했으나 여전히 {name:'kim'}을 유지하고 있는 것을 볼 수 있다. 이렇게 둘은 값을 불변하게 한다는 점에서 비슷한 것 같지만 분명한 차이가 있다.
const()는 특정 값을 고정하는데 그 대상은 원시형 데이터의 경우 값 자체일 것이고 객체의 경우 객체를 가리키는 위치일 것이기 때문에 값 자체 혹은 가리키는 객체 위치를 바꿀 수 없도록 하지만 freeze()는 특정 위치에 있는 객체 원본(유일한)을 변경하지 못하게 한다. 그렇기 때문에 만약 let으로 선언한 o1을 얼리고(freeze), 다른 객체를 가리키도록 한다면 다음과 같이 수정될 수 있다.
자바스크립트에서 var 대신 let과 const를 쓰는 것이 주류가 된 것처럼 점차 자바스크립트가 가진 자유도를 제한하고자 하는 코드를 작성하려는 움직임이 많아지고 있다. 읽기 쉽고 더욱 안전하며 협업에도 유리하기 때문이다. 자바스크립트의 자유를 맘껏 누리면서도 필요에 따라 가능하다면 명시적인 코드로 작성해보는 것이 좋겠다.