Javascript - 프로퍼티 플래그 , 설명자란?

Javascript - 프로퍼티 플래그 , 설명자란?

자바스크립트 기본기를 잘 갖추지 않고 리액트니 뭐니 쓰고있던 나.

초보방을 스킵하고 고수방을 들락날락 거리다 패배의 쓴맛을 본 이 시점에 빨리 공부 해줘야한다.

자자 가봅시다~ 레고~

1. 프로퍼티 플래그( property flags )란?

객체는 키(key) + 값(value) 쌍으로 이루어진 프로퍼티(property)가 저장된 친구에요.

저는 객체가 이게 다 인줄 알았습니다... 하지만

놀랍게도 프로퍼티는 값(value) 과 함께

플래그(flag)라고 불리는 특별한 속성 세 가지를 갖습니다!!!

모두 true 나 false 값을 가집니다잇!

1. writable -> 값(value) 수정이 가능한지 여부입니다. [ write = 쓰다 ]

2. enumerable -> 반복문을 사용해 나열 가능한지 여부입니다. [ enumerate = 나열하다 , 열거하다 ]

3. configurable -> 프로퍼티 삭제와 플래그 수정이 가능한지 여부입니다. [ configurate = 구성하다 ]

우리가 보통 알고있는 기본적인 방법으로 객체를 만들면,

3가지의 플래그 모두 기본값으로 true를 가집니다.

그래서 제가 여태 만든 객체들이 수정, 반복문 사용, 삭제 가능한 것이었습니다!!!

뭔가 조금씩 뿌리와 가까워지는 이 느낌.. 좋습니다 ^^

2. 설명자(descriptor)란?

위에서 배운 플래그들을 호출할 수 있는데유~

Object.getOwnPropertyDescriptor 메소드를 사용하시면 됩니다.

첫번째 인자 ->객체 명

두번째 인자 -> 프로퍼티 명

을 써주시면 됩니다.

위 사진처럼 메소드를 사용하면

'설명자' 라고 불리는 객체가 하나 리턴됩니다.

설명자 객체를 확인해보면 ~

property 값을 포함한 플래그 3개의 정보가 담겨있네유~~

우리가 알고있는 기본적인 방법으로 객체를 선언했으니 플래그 값은 모두 true인 것을 확인할 수 있네유~

2-1. 플래그 수정하기!

configurable: true 라네요~ 그럼 프로퍼티 삭제와 플래그 수정이 가능하겠네요?

자~~~ 그러면 이제 플래그를 한번 수정해 보겠습니다잇~

Object.defineProperty 메소드를 사용하면 플래그 수정이 가능합니다.

첫번째 인자 -> 객체 명

두번째 인자 -> 프로퍼티 명

세번째 인자 -> {변경하고 싶은 설명자 값 : 변경할 값}

을 써주시면 됩니다.

writable 값을 false로 바꿔서 name프로퍼티의 값을 수정하지 못하게 변경했습니다!!

다시 설명자를 받아와서 콘솔에 출력해보면~~~

false로 바뀐것이 보이구요!

userInfo.name을 "kim"으로 바꾸려는 시도에는 Error를 리턴하는 모습입니다잇!

2-2. 프로퍼티 추가하기!

여기서 한번 더 Object.defineProperty 메소드를 써보겠습니다.

두번째 인자에 'age' 라는 프로퍼티명을 넣었습니다.

세번째 인자에는 { value : 18 } 이라는 설명자 값 : 변경 값 을 넣었습니다.

콘솔창에 객체명을 넣어 출력하면 결과는?

age: 18 프로퍼티가 추가된 모습

userInfo 객체에 age : 18 프로퍼티가 추가되었습니다!!

Object.defineProperty 메소드는~

두번째 인자로 준 프로퍼티가 없는 프로퍼티면~~

넘겨받은 정보를 이용해 새로운 프로퍼티를 만듭니다!!!

이제 새로운 프로퍼티 'age'의 설명자를 콘솔에 찍어봅니다.

지정해준 value 값을 제외한 나머지 모든 플래그들은 false 값을 가졌네유~

이렇게 3번째 인자로 값을 정해주지 않는다면,

설명자 객체 안의 플래그 값들은 기본값으로 false를 가집니다잇 !

이렇게 일반적인 방법으로 객체를 생성했을 경우와

Object.defineProperty 메소드를 사용해서 생성했을 경우

둘의 차이점은 ?

플래그들의 기본값이 true이냐 false이냐 입니다 !!

쓰고보니 길군요.

다음시간에는 제가 이걸 공부하게된 이유인 getter setter에 대해서 써보겠슴돠~ 빠이용

끝!

from http://think0wise.tistory.com/26 by ccl(A) rewrite - 2021-10-25 01:01:36