ECMAScript6 길들이기 정리(2) - const and readonly

Const

ES6 이전에는 상수(읽기 전용 변수, 값을 다시 할당할 수 없는 변수)를 만드는 키워드가 없었습니다. 이제 const라는 키워드로 상수를 만들 수 있습니다.

const pi = 3.141;

let r = 2;


console.log(pi * r * r);


pi = 12;


[결과]
12.564
TypeError: Assignment to constant variable.

상수의 scope

const로 선언한 변수는 let으로 선언한 변수와 스코프 규칙이 같습니다.
즉, 블록 스코프입니다.

상수의 객체 참조

원시 타입이 아닌 객체를 상수로 만들게 되면 참조값(reference)가 저장 됩니다. 이 뜻은 const로 선언한 변수에 객체를 할당하게 되면 객체가 아닌 참조값이 고정(불변)되는 것입니다. 다시 말하면 객체는 가변(mutable) 상태입니다.

const SUZY = {
    name : "Suzy",
    age : 26,
    growUp : function() {
        this.age ++;
    },
    introduce : function() {
        console.log("Hello, I'm " 
        + this.name + ", " + this.age);
    }
};

SUZY.introduce();
SUZY.growUp();
SUZY.introduce();
SUZY.name = "수지";
SUZY.introduce();
SUZY = {};

[결과]
Hello, I’m Suzy, 26
Hello, I’m Suzy, 27
Hello, I’m 수지, 27
TypeError: Assignment to constant variable.

위 코드를 보시면 SUZY라는 상수를 만들었습니다. 이 상수는 객체인데 객체 내의 프로퍼티를 맘껏 바꿀 수 있습니다. 그런데 SUZY라는 상수에 재할당하려는 코드에서는 에러가 납니다. 그럼 객체의 프로퍼티를 변경 못하게 하려면 어떻게 해야 할까요?

const에 대해서 더 궁금한 점은 아래 링크를 찾아보세요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

추가 자료 READONLY property

많은 사람들이 const를 생각하면 readonly도 같이 떠올리실 것 같습니다. c#에서는 약간의 차이가 있지만 비슷한 용도로 쓴다고 하네요. 자바스크립트에서 readonly는 보통 프로퍼티가 읽기 전용인 경우를 말합니다. 읽기 전용으로 만들려면 프로퍼티의 데이터를 기술하는 데이터 기술자(data descriptor)중에서 writable이 false인 경우를 말합니다.

let suzy = {
    "name" : "suzy"
};
//suzy 객체의 name 프로퍼티의 데이터 기술자 확인
console.log("데이터 기술자 : ", Object.getOwnPropertyDescriptor(suzy, "name"));

//suzy 객체의 name 프로퍼티 읽기 전용으로 변경
Object.defineProperty(suzy, "name", {
    writable : false
});
console.log("데이터 기술자 : ", Object.getOwnPropertyDescriptor(suzy, "name"));
console.log("suzy name : ", suzy.name);
suzy.name = "수지";
console.log("suzy name : ", suzy.name);

[결과]
데이터 기술자 : { value: ‘suzy’,
writable: true,
enumerable: true,
configurable: true }
데이터 기술자 : { value: ‘suzy’,
writable: false,
enumerable: true,
configurable: true }
suzy name : suzy
suzy name : suzy

코드를 보시면 Object.getOwnPropertyDescriptor(객체, 프로퍼티명)으로 해당 프로퍼티의 데이터 기술자를 조회합니다. 그리고 Object.defineProperty(객체, 프로퍼티명, 데이터 기술자)를 통해서 읽기 전용으로 변경했습니다.
신기한건 읽기 전용으로 변경하고 나서 suzy.name을 한글 “수지”로 변경하는 코드를 넣었는데 변경되지도 않고 에러도 안나고 실행된 것입니다. 개발자 입장에서는 실수 할 수 있을 것 같습니다.

이제 필요하다면, const를 통해서 상수를 만들고 할당된 객체들도 데이터 기술자를 통해서 읽기 전용 속성으로 변경할 수 있겠네요!

데이터 기술자 (data descriptor)

이름	의미
enumerable (필수)	true 또는 false, 열거 가능한지 여부
configurable (필수)	true 또는 false, 제거 가능한지 여부
value (선택)	property의 값, 기본은 undefined
writable (선택)	true 또는 false, true이면 읽기 쓰기 가능이고 false이면 읽기만 가능

이번에는 readonly 프로퍼티를 만들기 위해서 writable 데이터 기술자를 다뤄보았습니다. 

그 외에 자세한 내용은 아래 링크를 참고하면세요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

참고 도서 

ECMAScript6 길들이기  - 나라얀 프루스티 저, 이일웅 역