[16-20장] 모던 자바스크립트 Deep Dive

스터디 날짜 : 2023. 11. 12 (일)

 

---

16장. 프로퍼티 어트리뷰트

 

- [[...]] 내부 슬롯, 메서드

- 직접 접근 불가능, __proto__로 간접 접근 가능

- [[Enumerable]] 열거, iterable 가능여부

TODO: 더 와닿는 좋은 예시 없을까?

 

 

[처음보는 객체 관련 프로퍼티]

- Object.defineProperty

- Object.preventExtensions : 객체의 장래 확장 방지

- Object.seal : freeze 와 달리 기존 속성값 변경은 가능

- Object.freeze : 모-두 금지

- Object.getOwnPropertyDescriptors : 처음보는 클래스, 객체의 인터페이스를 알 수 있다.

TODO: 이걸로 사내 디자인시스템 스토리북 프로퍼티 doc 기능 고도화할 수 있겠는데?

 

 

[getter/setter]

 

단순히, 복잡한 연산에 대한 get, set 을 위한 메소드라고만 생각했다. 헌데 스터디원이 여쭤보셔서 다시 곱씹어보게 되었다. 해당 글을 읽어보니 객체 내부 속성 은닉화, 옳지 않은값 세팅을 방지할 수 있다는 장점이 있더라. 

 

 

17장. 생성자 함수에 의한 객체 생성

 

[빌트인 생성자 함수]

- new String(...) 생성자 함수 리턴값은 객체이다!

- new 키워드 없이 호출하면 일반함수로 동작한다. (모든 함수 객체는 내부 메소드 [[Call]] 을 갖고 있다)

 

[커스텀 생성자 함수]

 

[non-constructor 함수 객체]

- ES6 메서드 축약표현

- 화살표 함수

- 모든 함수가 내부 메소드 [[Constructor]] 를 갖는 것은 아니다. 

TODO: 근데, 내부 메소드 확인은 어떻게 하는거지.. 흐음.. 

 

[혹 생성자 함수로 사용되었는지 체크하려면]

- new.target 으로 분기하기

- this instanceof functionName

 

18장. 함수와 일급 객체

 

- 함수를 값과 동일하게 사용가능!

- 함수 객체의 length 는 매개변수 개수

 

 

19장. 프로토타입

 

- JS 는 프로토타입을 기반으로 상속을 구현한다.

- 프로토타입 체인은 단방향이어야한다.

- 프로토타입의 property vs 인스턴스 property 는 구분된다. (전자는 생소하긴하다)

- 오버라이딩 : 상위 속성을 덮어 하위 속성으로 사용

- 오버로딩 : (JS 미지원) 매개변수 타입,개수에 따라 메서드 구분 호출

 

여전히 어려운 개념 과거 아티클 다시 살펴보기

[JS] 객체 지향 프로그램

 

[Object.Create 특징]

- 프로토타입 지정 가능

- 객체 리터럴로 생성된 객체를 상속받기 (주로 사용했던 방법)

- 생성자 함수가 소유한 프로퍼티 / 메서드는 정적 프로퍼티 / 메서드로 접근 못함

=> 이거 이해안감

 

[Object 순회하기]

문에따라 in의 의미가 다름

- if (key in obj) : 동치 Reflect.has(obj, key) OR obj.hasOwnProperty(key)

- for (key in obj) : 주의사항 [[Enumerable]] = true 인 속성만 순회가 가능하다 (오.. 신기하다)

- 혹은 Object.keys, Object.values, Object.entries 권장

 

 

20장 strict mode

 

- 암묵적 전역 등의 잠재적 오류를 줄인다.

- eslint 로 유사 효과를 낼 수 있다.

 

---

스터디 중간 회고

 

 

위 사진은 Pub/Sub Pattern을 공부하던 중에 12장, 18장 일부 내용인 "일급객체"에 대해서 설명하고 있어 반가웠기 때문이다. 챕터 난이도도 올라가고, 그간 어렴풋이 알고 있던 개념들을 짚고 넘어가서 매우 도움이 된다! 욕심부리지 말고, 꾸준히 할 수 있는 분량만큼 해내자!