(ing..) ES6 Symbol 프로퍼티

(ing..) ES6 Symbol 프로퍼티

목차

ECMAScript6 책 (두고두고 보는 자바스크립트 표준 레퍼런스)
정리중 입니다.


0. Well-Known Symbol

스펙에서 @@iterator 형태로 작성된 것을 볼 수 있는데, @@Symbol 대신 사용한 것이다.

  • @@iterator === Symobl.iterator

Well-Known Symbol은 스펙에서 처리 알고리즘을 구분하기 위해 부여한 이름이다.

  • 즉, 자바스크립트 엔진이 디폴트로 처리하는 알고리즘 유형 이름이다.

자바스크립트 프로그램에 같은 이름의 Well-Known Symbol을 작성하면 엔진의 디폴트처리를 실행하지 않고, 프로그램에 작성된 코드를 실행한다.

  • Well-Known Symbol이 오버라이드되는 것과 같으므로 프로그램에 같은 이름을 작성하여 Well-Known Symbol기능을 대체할 수 있다.
  • 이런 가변성과 유용성을 제공하는 것이 Well-Known Symbol의 목적.

11개의 Well-Known Symbol이 있다.

1. toStringTag

[object Object] 형태에서 Object를 Symbol.toStringTag 값으료 정하면 Object 문자열이 해당 값으로 출력된다.

  • Object를 toString으로 반환할 때와 Function 오브젝트를 toString으로 반활할때 둘다 [obejct Object]로 출력되므로 이를 구분하기 위해 Symbol.toSTringTag로 구분지으면 된다.
1
b.prototype[Symbol.toStringTag]
1
2
3
4
5
6
7
8
var a = {}
a.toString() // "[object Object]"

var B = function(){}
B.prototype[Symbol.toStringTag] = "나는 B"

var c = new B()
c.toString() // "[object 나는 B]"

1-2. 클래스의 메서드로 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
class a {};
let aObj = new a();
console.log(aObj.toString()); // "[object Object]"

class B {
get[Symbol.toStringTag](){
return '나는 B'
}
}

let BObj = new B();
console.log(BObj.toString());
console.log(Map.prototype[Symbol.toStringTag]);

개발자 코드로 Well-Known Symbol 기능을 대체할 수 있다.

2. isConcatSpreadable

3. unscopables

4. species 개념

5. species

6. 다른 Class 변환

7. null 변환

8. toPrimitive

9. iterator

Symbol.iterator()는 이터레이터 오브젝트를 생성하며 반환한다.
Symbol.iterator는 String, Array, Map, Set, TypedArray 오브젝트의 prototype에 연결되어 있다.
오브젝트의 [Symbol.iterator]를 호출하면 이터레이터 오브젝트를 생성하여 반환한다.

Array.prototype[Symbol.iterator]

배열을 처리하기 위한 이터레이터 오브젝트를 생성하여 반환한다.
배열 엘리먼트를 하나씩 처리할 수 있다.

1
2
3
4
5
6
7
8
9
let numberArray = [10,20];
for (let value of numberArray){
console.log(value);
}

let iteratorObj = numberArray[Symbol.iterator]();
console.log(iteratorObj.next());
console.log(iteratorObj.next());
console.log(iteratorObj.next());
  • for..of문에서 배열이 반복되는 것은 numberArray 오브젝트에 Symbol.iterator가 있기 때문이다.
  • 배열 엘리먼트를 하나씩 읽는 처리는 Symbol.iterator()를 호출하여 값을 반환하는 것에 해당한다.

numberArray[Symbol.iterator]();

  • numberArray 인스턴스의 Symbol.iterator()를 호출하는 것으로 이터레이터 오브젝트를 생성하여 반환한다.

String.prototype[Symbol.iterator]

Array.prototype[Symbol.iterator] 와 같은 원리

Object.prototype[Symbol.iterator]

Object에는 Symbol.iterator가 없다. 때문에 for-of를 사용할 수 없다.
obj 내에 Symbol.iterator를 작성하면 반복 처리할 수 있다.

10. Generator

11. match(): match 결과 반환

📚