모던 자바스크립트 DeepDive 공부 내용 13차

이번 정리 목차는 33 ~ 37장이다.

33장 Symbol

심벌이란

-       ES6에서 도입된 7번째 데이터 타입(문자열, 숫자, 불리언, undefined, null, 객체)

-       다른 값과 중복되지 않는 유일무이한 값

-       유일한 프로퍼티 키를 만들기 위해 사용

 

심벌 값의 생성

-       Symbol 함수 호출하여 생성, 외부에서 확인할 수 없고 다른 값과 절대 중복되지 않는 유일무이한 값

-       new 연산자와 함께 호출하지 않는다

-       선택적으로 문자열을 인수로 전달 가능, 이 문자열은 디버깅 용도로만 사용, 심벌 값 생성에 어떤 영향도 주지 않음, 설명이 같더라도 생성된 심벌 값은 유일무이한 값

-       심벌 값도 객체처럼 접근하면 암묵적으로 래퍼 객체 생성

-       암묵적으로 심벌 값이 문자열이나 숫자 타입으로는 변환되지 않고 불리언 타입으로는 변환

 

[Symbol.for / Symbol.keyFor 메서드]

-       Symbol.for메서드는 인수로 전달받은 문자열을 키로 사용하여 전역 심벌 레지스트리에 해당 키로 저장된 심벌 값이 없으면 새로운 심벌 값을 생성하고 있으면 해당 심벌 값 반환

-       Symbol.keyFor메서드를 사용하면 전역 심벌 레지스트리에 저장된 심벌 값의 키를 추출

 

심벌과 상수

-       상수 대신 심벌 값 사용 가능하다

 

심벌과 프로퍼티 키

-       프로퍼티 키는 모든 문자열 또는 심벌 값으로 만들 수 있으며 심벌 값으로 프로퍼티 키 만들면 다른 프로퍼티 키와 절대 충돌하지 않는다.

 

심벌과 프로퍼티 은닉

-       심벌 값을 프로퍼티 키로 생성하면 은닉이 가능하다.

-       Object.getOwnPropertySymbols메서드로 찾기 가능

 

심벌과 표준 빌트인 객체 확장

-       일반적으로는 표준 빌트인 객체에 사용자 정의 메서드를 직접 추가하면 추후에 생길 메서드와 중복될 수 있어 권장하지 않지만 심벌을 사용하여 확장하면 안전하게 확장 가능

 

Well-known Symbol

-       기본 제공하는 빌트인 심벌 값을 Well-known Symbol이라 함

-       Array, String, Map, Set 등 순회 가능한 이터러블은 Symbol.iterator를 키로 갖는 메서드를 가지며 Symbol.iterator 메서드 호출하면 이터레이터를 반환하도록 규정

-       빌트인 이터러블은 이터레이션 프로토콜을 준수

-       심벌은 중복되지 않는 상수 값을 생성하는 것은 물론 기존에 작성된 코드에 영향을 주지 않고 새로운 프로퍼티를 추가하기 위해, 즉 하위 호환성 보장을 위해 도입

 

34장 이터러블

이터레이션 프로토콜

-       순회 가능한 데이터컬렉션(자료구조)을 만들기 위해 ECMAScript에 정의한 미리 약속한 규칙

-       ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for…of문법, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다.

-       이터러블 프로토콜과 이터레이터 프로토콜이 있다.

-       이터러블 프로토콜: Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다라는 규약

-       이터레이터 프로토콜: 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터레이터는 next 메서드를 소유하며 next메서드를 호출하면 이터러블 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다 라는 규약.

 

[이터러블]

-       이터러블 프로토콜을 준수한 객체를 이터러블이라 한다.

-       Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체

-       배열도 이터러블임으로 for…of문 순회, 스프레드 문법과 배열 디스트럭처링 할당 대상 사용가능

-       TC39프로세스의 stage4에 제안되어 있는 스프레드 프로퍼티 제안은 일반 객체의 스프레드 문법 사용 허용

-       일반 객체도 원래는 아니지만 이터러블 프로토콜 준수하도록 구현하면 이터러블 된다.

 

[이터레이터]

-       이터러블의 Symbol.iterator메서드 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환. 이터러블의 Symbol.iterator메서드가 반환한 이터레이터는 next 메서드를 갖는다.

-       next메서드는 이터러블의 각 요소를 순회하기 위한 포인터역할을 한다.

-       즉 next메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환

-       next메서드가 반환하는 이터레이터 리절트 객체의 value 프로퍼티는 현재 순회 중인 이터러블의 값을 나타내고 done 프로퍼티는 이터러블의 순회 완료 여부 나타냄

빌트인 이터러블

-       Array, String, Map, Set, arguments, DOM컬렉션, TypedArray 빌트인 객체들은 이터러블

 

for…of문

-       이터러블을 순회하면서 이터러블 요소를 변수에 할당

-       for (변수 선언문 of 이터러블) { … }

-       내부적으로 이터레이터의 next 메서드를 호출하여 이터러블 순회하며 next 메서드가 반환한 리절트 객체의 value 프로퍼티 값을 변수에 할당, done 이 true이면 이터러블 순회 중단

 

이터러블과 유사 배열 객체

-       유사배열객체는 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length프로퍼티를 갖는 객체를 말한다.

-       유사배열 객체는 이터러블이 아닌 일반 객체 이므로 for…of문으로 순회 불가

-       단 arguments, NodeList, HTMLCollection은 이터러블이며 유사배열객체

-       ES6에서 배열도 이터러블이 되었음

 

이터레이션 프로토콜의 필요성

-       데이터 소비자와 데이터 공급자를 연결하는 인터페이스의 역할을 한다.

 

사용자 정의 이터러블

-       일반 객체에도 이터레이션 프로토콜을 준수하도록 구현하면 사용자 정의 이터러블이 된다.

-       지연평가는 평가 결과가 필요할 때까지 평가를 늦추는 기법

-       지연평가를 사용하면 필요한 데이터를 필요한 순간에 생성하여 불필요한 메모리 소비 없고 빠른 실행 속도 기대하며 무한도 표현할 수 있다는 장점이 있다

 

35장 스프레드 문법

-       ES6에서 도입된 스프레드 문법은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다

-       사용할 수 있는 대상은 Array, String, Map, Set, DOM컬렉션과 같이 for…of문으로 순회할 수 있는 이터러블에 한정

-       스프레드 문법의 결과는 값이 아니므로 변수에 할당 안됨

-       …[1,2.3] => 1 2 3

-       함수 호출문의 인수 목록 / 배열 리터럴의 요소 목록 / 객체 리터럴의 프로퍼티 목록 에서 사용

[함수 호출문의 인수 목록에서 사용하는 경우]

const arr = [1,2,3]; const max =Math.max(…arr) => 3

 

[배열 리터럴 내부에서 사용하는 경우]

-       const arr = […[1,2], …[3,4]]; => [1,2,3,4]

-       const arr1 = [1,4]; const arr2 = [2,3]; arr1.splice(1,0, …arr2) => [1,2,3,4]

-       const origin = [1,2]; const copy=[…origin];

 

[객체 리터럴 내부에서 사용하는 경우]

-       TC39프로세스의 stage4에 제안되어있는 스프레드 프로퍼티 사용하면 객체 리터럴의 프로퍼티 목록에서도 스프레드 문법 사용 가능

-       const obj = {x:1, y:2}; const copy={ …obj }; => {x:1, y:2}

 

36장 디스트럭처링 할당

-       이터러블 또는 객체를 디스트럭처링하여 1개 이상의 변수에 개별적으로 할당하는 것

-       배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용

 

[배열 디스트럭처링 할당]

-       배열 디스트럭처링 할당의 대상(우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉 순서대로 할당

-       const arr = [1,2,3]; const [ one, two, three] = arr; => 1 2 3

-       변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.

-       변수에 기본값 설정 가능, 기본값 보다 할당된 값이 우선 됨

-       변수에 Rest 파라미터와 유사하게 Rest 요소 …을 사용할 수 있다. 반드시 마지막에 위치해야 한다.
const [x, …y] = [1,2,3]; console.log(x,y) => 1 [2, 3]

 

[객체 디스트럭처링 할당]

-       객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당

-       객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용

-       할당의 대상(우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다.

-       순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

-       const user = {firstName: “Ungmo”, lastName: “Lee”};
const { lastName, firstName } = user;
console.log(firstName, lastName); => Ungmo Lee

-       변수에 기본값 할당 가능

-       객체를 인수로 전달받는 함수의 매개변수에도 사용 가능

-       Rest 프로퍼티 …을 사용 가능(TC39프로세스의 stage4의 제안)
const { x, …rest } = {x:1, y;2, z:3};
console.log(x, rest); => 1 {y:2, z:3}

 

37장 Set과 Map

Set

-       중복되지 않는 유일한 값들의 집합

구분	배열	Set 객체
동일한 값 중복하여 포함	O	X
요소 순서에 의미	O	X
인덱스로 요소 접근	O	X

-       set은 수학적 집합을 구현하기 위한 자료구조로 교집합, 합집합, 차집합, 여집합 구현 가능

-       Set 생성자 함수로 생성, 인수 전달 안하면 빈 Set객체 생성

-       이터러블을 인수로 전달받아 Set객체 생성, 이터러블의 중복된 값은 Set객체에 요소로 저장되지 않는다.

-       배열에서 중복된 요소 제거에 사용

-       size프로퍼티로 요소 개수 확인

-       add 메서드로 요소 추가

-       has 메서드로 요소 존재 여부 확인

-       delete 메서드로 요소 삭제

-       clear 메서드로 요소 일괄 삭제

-       forEach로 요소 순회, Set객체는 이터러블이므로 for…of문도 가능하고 스프레드 문법과 배열 디스트럭처링 대상이 될 수 있다.

 

Map

-       Map객체는 키와 값의 쌍으로 이루어진 컬렉션이다.

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

-       Map 생성자 함수로 생성, 인수 전달 안 하면 빈 Map 객체 생성

-       이터러블을 인수로 받아 Map 객체 생성, 이때 이터러블은 키와 값의 쌍으로 이루어져야함

-       이터러블에 중복된 키를 갖으면 값이 덮어써짐, 중복된 키를 갖는 요소 존재 X

-       size 프로퍼티로 요소 개수확인

-       set메서드로 요소 추가

-       get메서드로 요소 취득

-       has 메서드로 요소 존재 여부확인

-       delete메서드로 요소 삭제

-       clear 메서드로 요소 일괄 삭제

-       forEach메서드로 요소 순회, Map 객체는 이터러블 이므로 for…of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상 될 수 있다.

-       Map 객체는 이터러블이면서 동시에 이터레이터인 객체를 반환하는 메서드 제공

-       Map.prototype.keys: Map객체에서 요소키를 값으로 갖는 이터레이터 객체 반환

-       Map.prototype.values: Map객체에서 요소값을 값으로 갖는 이터레이터 객체 반환

-       Map.prototype.entries: Map객체에서 요소키와 요소값을 값으로 갖는 이터레이터인 객체 반환