반응형
자바스크립트의 모든 객체는 자기 자신에 대한 정보를 담은 속성 기술자(Property Descriptor)를 가지고 있다.
value | 객체의 값 |
writable | false라면 값 변경 불가 |
enumerable | false라면 for in, Object.key 나열 불가 |
configurable | false라면 속성 기술자 변경 불가 |
getOwnPropertyDescriptor를 통해 속성 기술자 객체를 확인해볼 수 있다.
let car = {
name: "tesla",
color: ["red", "blue", "green"],
};
console.log(Object.getOwnPropertyDescriptor(car, "name"));
console.log(Object.getOwnPropertyDescriptor(car, "color"));
console.log(Object.getOwnPropertyDescriptor(car, "nothing"));
definePropery 메서드로 객체의 속성을 정의할 수 있다.
let car = {
name: "tesla",
color: ["red", "blue", "green"],
};
Object.defineProperty(car, "name", {
value: "tesla upgrade",
/* enumberable: true, */ // default value는 true
writable: false,
});
console.log(Object.getOwnPropertyDescriptor(car, "name"));
console.log(Object.getOwnPropertyDescriptor(car, "color"));
console.log(Object.getOwnPropertyDescriptor(car, "nothing"));
car.name = "hyundae";
console.log(car.name);
car의 속성 중 writable을 false로 만들고 car.name을 변경하였다.
writable이 false이기 때문에 name이 변경되지 않았다.
enumerable을 false로 할 경우, for in 루프로 접근이 불가능하다.
let car = {
name: "tesla",
color: ["red", "blue", "green"],
};
for (let key in car) {
console.log(key);
}
console.log("enumerable false");
Object.defineProperty(car, "name", {
value: "tesla upgrade",
enumerable: false,
});
for (let key in car) {
console.log(key);
}
마지막으로 configurable을 false로 만들어보자.
let car = {
name: "tesla",
color: ["red", "blue", "green"],
};
console.log(delete car.name); // true
console.log(car);
car.name = "new tesla";
console.log(car);
console.log("configurable false");
Object.defineProperty(car, "name", {
value: "tesla upgrade",
configurable: false,
});
console.log(delete car.name); // false
console.log(car);
car.name = "new new tesla";
console.log(car);
Object.defineProperty(car, "name", {
configurable: true, // 재정의 불가
});
delete로 name을 지울 수 없는 것을 알 수 있다.
실제 console로 delete car.name을 출력해보면, configurable이 false가 되고 나서 false를 리턴하는 것을 알 수 있다.
값을 변경하는 것은 상관없다. (new new tesla로 변경)
그리고 defineProperty로 다시 속성을 변경하면 에러가 발생한다.
반응형
'개발 > JavaScript' 카테고리의 다른 글
html input 태그에서 비밀번호 표시 여부 설정하기 (0) | 2022.03.09 |
---|---|
input 에서 자동 완성 끄기, 캐시 삭제하기 (0) | 2022.03.09 |
자바스크립트 - 태그드 템플릿 리터럴 (Tagged Template Literals) (0) | 2021.08.20 |
자바스크립트 - 자기 자신을 정의하는 함수 (Lazy Function Definition) (0) | 2021.08.17 |
자바스크립트 Symbol (0) | 2021.08.14 |
댓글