JavaScript / JavaScript Deep Dive 스터디 2주차

---

---

오늘은 자바스크립트 스터디 2주차의 내용

이번주 주제는 조금 까다로운 편이였는데, 다들 열심히 준비해주고

발표의 구성도 엄청 늘어서, 스터디 기획자로서 엄청 뿌듯한 하루였음 히히

 

프로퍼티 어트리뷰트

1.내부 슬롯과 내부 매서드

자바스크립트 객체를 만들면 내부 슬롯과 내부 메서드라는게 생김.

근데 이게 함부러 접근할수 있는게 아니라, 자바스크립트 내부에서 작동하는 숨겨진 녀석들이며,

이 내부 슬롯중에서도 특이하게 접근이 가능한 요소가 프로퍼티임

 

2. 데이터 프로퍼티와 접근자 프로퍼티

접근 가능한 프로퍼티는 위와같이 데이터 프로퍼티, 그리고 접근자 프로퍼티로 나눠져있으며

각각의 특징이 있음

 

데이터 프로퍼티와 접근자 프로퍼티는 위와 같이 네가지 특징을 가짐

자세한 설명은 아래 프로퍼티 정의에서 진행할예정

 

여기서는 각 프로퍼티가 위와 같은 특징을 가지며, 

해당 데이터를 보기 위해서는 Object.getOwnPropertyDescriptor 를 사용하면 됨

 

3. 프로퍼티 정의와 프로퍼티 특징

위에서 말한 각각 프로퍼티를 정의하며 특징을 알아볼것임

 

데이터 프로퍼티

우선 데이터 프로퍼티는 위와 같이 정의할 수 있음

Object.definedProperty를 통해 정의하는데,

만약 상세한 프로퍼티 특징을 명시하지 않는다면,

default값으로 나머지 프로퍼티의 key, value가 들어감

 

value는 뭐 들어가는 값이니까 딱히 특징이 없고,

writable같은 경우에는 해당 값이 false면 이렇게 수정이 불가능함

 

그리고 이뉴머블이랑 콘피규러블은 아래서 설명

 

접근자 프로퍼티

 

 

접근자 프로퍼티는 위와 같이 정의할 수 있음

데이터 프로퍼티와 같이 Object.definedProperty를 통해 정의하는데,

중요한건 get과 set을 정의해주는 부분임

여기서 get은 해당 데이터를 가져온다고 알면되고

set은 해당 데이터를 부여한다고 생각하면 됨

 

Enumerable은 말 그대로 나열이 가능한지임

만약 이 값이 false라면 나열이 불가능함

configurable은 해당 값이 재정의 가능한지임

만약 위 사항이 false라면, 위와 같이 무언가 값을 재정의하려고 하면 오류가 발생

 

4. 객체 변경 방지

프로퍼티의 특징상 이렇게 마음대로 값이 추가되고 변경될 수 있기 때문에

이 객체자체를 다음과 같은 설정들을 통해 변경방지 작업을 해줄수 있음

1. 확장금지

객체가 더이상 불어나지 않게 확장을 막아주는 기능

하지만 값의 변경이나 삭제는 가능함

 

2. 객체밀봉

객체를 추가하거나 삭제하지 못하게끔 막는 기능

하지만 값의 변경은 가능함

3. 객체 얼림

객체를 추가 변경 삭제까지 전부 안되게 막는

사실상 진짜 객체 변경 방지를 하는 기능

하지만, 객체의 참조값까지 적용시키지 못하기 때문에

순회를 통해 모든 객체에 설정을 해주어야함

 

 

Q. 어디에 활용할 수 있는 건가요?

A. 이번에 DOM을 준비하면서 어디에 활용할수 있을지 알게 되었습니다. 발표당시 드렸던 답변은, 프로퍼티들의 확실한 이해를 통해, 순수 언어(java나 c같은)와 비슷한 효과를 내고 그렇게 하면서 자바스크립트의 한계를 극복할 수 있을 용도로 사용하지 않을까? 하고 답변을 드렸었습니다.

하지만 DOM부분을 공부하다보니, WEB의 구성요소는 전부 객체이며, 그 객체들의 세세한 특징들이 value, writable, enumerble과 같은 데이터 프로퍼티와 접근자 프로퍼티로 구성되어있다는 것을 알게 되었습니다.

즉, 웹을 다루고 그 웹을 제대로 다루기 위한 DOM을 제대로 사용하기 위한 초석으로 이 내용을 활용할 수 있을거라 생각합니다.

 

---

같이 보기 좋은 링크

 

• Chapter 16, 17, 18 (프로퍼티와 어트리뷰트, 생성자 함수에 의한 객체 생성, 함수와 일급객체)
• Chapter 19 (프로토타입)
• Chapter 20, 21, 22 (strict mode, 빌트인 객체, this)
• Chapter 23(실행 컨텍스트)
• Chapter 24(클로저)