Property attribute

김민기·2024년 4월 11일
0
post-thumbnail

Propery attribute

객체는 key 와 name의 한 쌍으로 이루어져있다. 근데 이러한 객체에도 세부적인 설정이 가능하다.

우선 객체의 프로퍼티는 2가지로 나눌 수 있다.

객체 프로퍼티의 종류

1. 데이터 프로퍼티

데이터 프로퍼티는 객체의 상태를 나타내는 값을 포함한다.
key : name 한 쌍으로 이루어져 있는 실질적인 값을 표현하는 프로퍼티이다.

2. 액세스 프로퍼티

getter 와 setter이다.
실질적으로 값을 가지고 있지 않지만, 다른 값을 가져오거나 설정 할 때 호출되는 함수로 구성된 프로퍼티이다.

객체 프로퍼티가 가지고 있는 속성

객체는 4가지의 속성이 있다.

value - 실제 프로퍼티가 가지고 있는 값
writable - 값을 수정할 수 있는지에 대한 여부
enumeralbe - 열거가 가능한지에 대한 여부 for ...in loop등
configuralbe - 프로퍼티 어트리뷰트에 대한 재정의 여부(false면 재정의가 불가능 하지만, writable이 true일 경우 writable에 한해서만 재정의 변경 가능)

1. 객체의 속성을 확인하는 법

//객체 전체의 속성을 확인 할 때
Object.getOwnPropertyDescriptors([객체])

//객체 프로퍼티의 속성을 확인 할 때
Object.getOwnPropertyDescriptor([객체],[객체의 키 값])

데이터 프로퍼티로 이루어진 객체가 있다.
이 객체의 속성을 확인해보자.

출력결과
첫번째 콘솔 로그의 결과는 객체의 모든 프로퍼티의 속성에 대한 결과값이 출력이 되고, 두번째 콘솔 로그의 결과는 지정한 객체의 프로퍼티의 속성만이 출력되게 된다.

2. 데이터 프로퍼티의 속성

위의 출력결과를 보았을 때 데이터 프로퍼티는 value , writable, enumerable, configurable의 속성을 가지고 있는 것을 확인 할 수 있고, 모두 디폴트값이 true로 자유롭게 변경, 조회가 가능하다.

3. 액세스 프로퍼티의 속성

액세스 프로퍼티는 gette와 setter이다. getter와 setter로 이루어진 객체가 있다. age에 대한 객체 프로퍼티의 속성을 확인해보면,

출력결과

데이터 프로퍼티와 다르게 get과 set 함수, enumerable, configurable 속성만 존재하는 것을 확인 할 수 있다.

객체 프로퍼티의 속성 변경

Object.defineProperty([객체], [객체의 키값], {[변경하고 싶은 객체프로퍼티의 속성]});


information의 name 프로퍼티의 속성을 변경해보자.
모든 속성을 false로 변경 한 후 객체 프로퍼티의 속성을 확인해보면

모두 false로 바뀌는 것으로 확인 할 수 있다.

객체 프로퍼티 속성의 특징

1. value

value는 객체 프로퍼티의 값을 변경 할 수 있다.

출력결과

2. writable

writable 속성은 값을 수정할 수 있는지에 대한 여부를 나타낸다.

출력결과
writable이 true일 때는 name의 값 변경이 가능하여 바뀐 값 "lim"이 출력되지만, writable를 false로 변경 했을 경우, 새롭게 설정한 값 "park"이 출력 되어지지 않고 기존 값 "lim"이 출력되게 된다.
writable이 false로 설정되어 있을 경우 객체의 값 변경이 불가능하다.

3. enumerable

enumerable은 값을 열거 할 수 있는지에 대한 여부를 나타낸다.

출력결과

enumerable를 false로 설정하면 열거가 불가능 해지고, 루프를 돌아도 열거가 되어지지 않는다.

하지만 값에 대한 조회는 가능하다.

console.log(introduce.name) // kim

4. configurable

프로퍼티 속성에 대해 재정의를 할 수 있는지에 대한 여부를 나타낸다. 만약 configuralbe를 false로 설정하고 나중에 프로퍼티에 대한 설정을 변경한다고 했을 경우,

출력결과
에러가 발생하게 된다.

configurable의 예외

일반적으로 configurable가 false라면 속성 변경이 불가능 하지만, writalbe이 true 라면 false로 변경이 가능하다. 하지만 false에서 true로의 변경은 불가능하다.

출처

https://www.youtube.com/watch?v=ZOVG7_41kJE&t=16632s

0개의 댓글

관련 채용 정보