본문 바로가기

FrontEnd/javascript

const 정리

반응형

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