33장: 7번째 데이터 타입 Symbol

33.1 심벌이란?

• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값
• 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용

33.2 심벌 값의 생성

33.2.1 Symbol 함수

다른 값과 절대 중복되지 않는 유일무이한 값
symbol함수는 생성자 함수와 달리 new연산자와 함께 호출하지 않는다

// 심벌 값에 대한 설명이 같더라도 유일무이한 심벌 값을 생성한다.
const mySymbol1 = Symbol('mySymbol');
const mySymbol2 = Symbol('mySymbol');

console.log(mySymbol1 === mySymbol2); // false

--------------------------------------------------------
const mySymbol = Symbol('mySymbol');

// 심벌도 레퍼 객체를 생성한다
console.log(mySymbol.description); // mySymbol
console.log(mySymbol.toString());  // Symbol(mySymbol)

심벌 값은 암묵적으로 문자열이나 숫자 타입으로 변환되지 않는다

단, 불리언 타입으로는 암묵적으로 타입 변환된다

33.2.2 Symbol.for / Symbol.keyFor 메서드

Symbol.for 메서드는 인수로 전달받은 문자열 키로 사용하여 심벌 값의 쌍들이 저장되어 있는 전역 심벌 레지스트리에서 해당 키와 일치하는 심벌 값을 검색

33.3 심벌과 상수

// 위, 아래, 왼쪽, 오른쪽을 나타내는 상수를 정의한다.
// 중복될 가능성이 없는 심벌 값으로 상수 값을 생성한다.
const Direction = {
  UP: Symbol('up'),
  DOWN: Symbol('down'),
  LEFT: Symbol('left'),
  RIGHT: Symbol('right')
};

const myDirection = Direction.UP;

if (myDirection === Direction.UP) {
  console.log('You are going UP.');
}

33.4 심벌과 프로퍼티 키

심벌 값은 유일무이한 값이므로 심벌 값으로 프로퍼티 키를 만들면 다른 프로퍼티 키와 절대 충돌하지 않는다

34장: 이터러블

34.1 이터레이션 프로토콜

34.1.1 이터러블

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

34.1.2 이터레이터

• 이터러블의 symbol.iterator메서드가 반환한 이터레이터는 next 메서드를 갖는다
• 이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 한다
  • next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회결과를 나타내는 이터레이터 리절트 객체를 반환

// 배열은 이터러블 프로토콜을 준수한 이터러블이다.
const array = [1, 2, 3];

// Symbol.iterator 메서드는 이터레이터를 반환한다. 이터레이터는 next 메서드를 갖는다.
const iterator = array[Symbol.iterator]();

// next 메서드를 호출하면 이터러블을 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를
// 반환한다. 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는 객체다.
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

34.3 for...of 문

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

34.4 이터러블과 유사 배열 객체

유사배열 객체는 length 프로퍼티를 갖기 때문에 for문 순회와 인덱스를 나타내는 숫자형식의 문자열을 프로퍼티 키로 가지므로 배열처럼 인덱스 프로퍼티 값에 접근 가능

34.6.4 무한 이터러블과 지연 평가

지연평가는 데이터가 필요한 시점이전까지는 미리 데이터를 생성하지 않다가 필요한 시점이 되면 그때야 비로소 데이터를 생성하는 기법

35장: 스프레드 문법

// ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3)
console.log(...[1, 2, 3]); // 1 2 3

// 문자열은 이터러블이다.
console.log(...'Hello'); // H e l l o

// Map과 Set은 이터러블이다.
console.log(...new Map([['a', '1'], ['b', '2']])); // [ 'a', '1' ] [ 'b', '2' ]
console.log(...new Set([1, 2, 3])); // 1 2 3

// 이터러블이 아닌 일반 객체는 스프레드 문법의 대상이 될 수 없다.
console.log(...{ a: 1, b: 2 });
// TypeError: Found non-callable @@iterator

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

// Rest 파라미터는 인수들의 목록을 배열로 전달받는다.
function foo(...rest) {
  console.log(rest); // 1, 2, 3 -> [ 1, 2, 3 ]
}

// 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만든다.
// [1, 2, 3] -> 1, 2, 3
foo(...[1, 2, 3]);

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

35.2.1 concat

2개의 배열을 1개의 배열로 결합할때 사용

// ES5
var arr = [1, 2].concat([3, 4]);
console.log(arr); // [1, 2, 3, 4]

스프레드 문법 사용시

// ES6
const arr = [...[1, 2], ...[3, 4]];
console.log(arr); // [1, 2, 3, 4]

35.2.2 splice

// ES6
const arr1 = [1, 4];
const arr2 = [2, 3];

arr1.splice(1, 0, ...arr2);
console.log(arr1); // [1, 2, 3, 4]

35.2.3 배열 복사

// ES6
const origin = [1, 2];
const copy = [...origin];

console.log(copy); // [1, 2]
console.log(copy === origin); // false

35.2.4 이터러블을 배열로 변환

이터러블이 아닌 유사 배열 객체는 스프레드 문법의 대상이 될수 없음

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

// 객체 병합. 프로퍼티가 중복되는 경우, 뒤에 위치한 프로퍼티가 우선권을 갖는다.
const merged = { ...{ x: 1, y: 2 }, ...{ y: 10, z: 3 } };
console.log(merged); // { x: 1, y: 10, z: 3 }

// 특정 프로퍼티 변경
const changed = { ...{ x: 1, y: 2 }, y: 100 };
// changed = { ...{ x: 1, y: 2 }, ...{ y: 100 } }
console.log(changed); // { x: 1, y: 100 }

// 프로퍼티 추가
const added = { ...{ x: 1, y: 2 }, z: 0 };
// added = { ...{ x: 1, y: 2 }, ...{ z: 0 } }
console.log(added); // { x: 1, y: 2, z: 0 }