const는 변수와 다르게 우리가 보통 알고있기로는 변하지 않는 값을 가진다.
즉 immutable 로 이해하는 경우가 많다.
하지만 MDN 문서에는 아래와 같이 기술한다.
const 선언은 블록 범위의 상수를 선언합니다.
상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.
재할당할수 없으며는 결국 할당된 상태에서 그 주소의 값을 바꾸면 값을 변경할수가 있다는 얘기가 된다.
const a = 1;
a = 2;
아래와 같은 오류를 발생시킨다.
Uncaught TypeError: Assignment to constant variable.
즉 const 변수에 재할당이 발생한것이다.
내부적으로 자바스크립트 컴파일러는 1 이라는 값을 메모리에 담고 a 라는 상수에 그 주소값을 기억한다.
a = 2 를 만났을때 역시 2를 메모리에 담고 a 는 그 2 의 주소값을 바라보게 된다.
즉 재할당이 된것이다.
그렇다면 재할당 할수 없다는것은 값이 변하지 않는다 즉 immutable 과 같은 말 아닌가
하지만 object 경우를 생각해보자
const obj = {name:'ddori'};
obj = {name:'hiphopddori'};
위와 같이 하였을경우는 obj 상수가 재할당이 되기 떄문에
Uncaught TypeError: Assignment to constant variable. 오류가 발생할것이다.
그럼 다른 경우를 보자
const obj = {name:'ddori'};
obj.name = 'hipdopddori';
console.log(obj.name);
위처럼하였을경우 에러를 발생하지 않으며 console에 'hiphopddori' 로그가 남는것을 확인할수있다
즉 obj 상수에 재할당이 발생하지 않고 obj.name에 재할당이 발생한것이다.
그렇다면 object는 상수로 하고 싶을경우 어떻게 해야할까?
Object.freeze()를 이용하면 된다.
아래와 같다.
"use strict"
const obj = {name:'ddori'};
Object.freeze(obj);
하지만 안타깝게도 Object의 속성이 다시 Object일 경우 값 변경시 여전히 값이 변경이 된다.
즉 해당 freeze에 넘긴 객체만 적용이 되고 그 속성이 object인경우는 다시 Object.freeze를 해주어야한다.
예를들면 아래와같다
"use strict"
const obj = {name:'ddori',pairProgrammer:{name:'ksy'}};
Object.freeze(obj);
Object.freeze(obj.pairProgrammer);
이를 해결하기 위해선 아래의 함수등을 만들어 사용하면 될거같다.
"use strict"
function deepFreeze(obj) {
var propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(function(name) {
var prop = obj[name];
if (typeof prop == 'object' && prop !== null)
deepFreeze(prop);
});
return Object.freeze(obj);
}
const obj = {name:'ddori',pairProgrammer:{name:'ksy'}};
deepFreeze(obj);
'FrontEnd > javascript' 카테고리의 다른 글
[JS] THIS (0) | 2019.11.16 |
---|