const one = [10, 20], two = ["A", "B"];
const show = () => {
log(one.concat(two));
};
show();
two[Symbol.isConcatSpreadable] = true;
show();
two[Symbol.isConcatSpreadable] = false;
show();
// [10, 20, A, B]
// [10, 20, A, B]
// [10, 20, [A, B]]
[Symbol.isConcatSpreadable] = true
one 배열 끝에 two 배열의 엘리먼트를 하나씩 연결
[Symbol.isConcatSpreadable] = false
전개하지 않고 two 배열 자체를 연결
Array-like 전개
const one = [10, 20];
const like = {0: "A", 1: "B", length: 2};
const show = () => {
log(one.concat(like));
};
show();
like[Symbol.isConcatSpreadable] = true;
show();
like[Symbol.isConcatSpreadable] = false;
show();
// [10, 20, {0: A, 1: B, length: 2}]
// [10, 20, A, B]
// [10, 20, {0: A, 1: B, length: 2}]
Symbol.species
Symbol.species는 constructor를 반환
constructor를 실행하면 인스턴스를 생성하여 반환하므로
결국, 인스턴스를 반환
Symbol.species를 오버라이드하면
다른 인스턴스를 반환할 수 있다는 의미
우선 Symbol.species와 관련된 개념 살펴보기
메소드를 실행한 후의 결과 형태
Symbol.species 기능
메소드를 실행한 후의 결과 형태
const obj = [1, 2, 3];
/*
1. [1, 2, 3]으로 Array 오브젝트를 생성하여 obj에 할당
2. 오른쪽의 obj를 펼쳐서 obj 구조를 보면 prototype은 없고 __proto__만 있으므로
3. obj는 빌트인 Array 오브젝트가 아니라 Array.prototype에 연결된 메소드로 생성한 인스턴스
4. 다만, new 연산자를 사용하지 않았으므로 강좌에서 인스턴스라고 하지 않고 오브젝트라고 한 것
*/
const one = obj.slice(1, 3);
/*
1. 위 코드를 실행한 후의 one과 obj 구조는 차이가 없으며 값 [2, 3]만 다름
2. 이것은 인스턴스에 있는 메소드를 호출하면 메소드 실행 결과값을 반환하지 않고
3. 결과값이 설정된 인스턴스를 반환하기 때문
*/
const two = one.slice(1, 2);
/*
1. 바로 앞에서 반환된 one으로 메소드를 호출할 수 있는 것은 one이 인스턴스이기 때문
2. 또한 slice(1, 2)를 실행하면 결과 값이 설정된 인스턴스를 반환
*/
Array 인스턴스의 메소드를 호출하면 값을 반환하는 것이 아니라
반환할 Array 인스턴스를 생성하고, 메소드에서 구한 값을 반환할 Array 인스턴스에 설정하여, Array 인스턴스를 반환
Symbol.species 기능
class Sports extends Array {};
const obj = new Sports(10, 20, 30);
const one = obj.slice(1, 2);
log(one);
// [20]
class Sports extends Array{}
빌트인 Array 오브젝트를 상속(확장, 연결) 받음
const obj = new Sports(10, 20, 30);
인스턴스를 생성
const one = obj.slice(1, 2);
obj 인스턴스의 slice()를 호출하면
slice() 처리 결과를 인스턴스에 설정하여 인스턴스 반환
이렇게인스턴스의 메소드를 호출했을 때, 인스턴스를 반환하도록 하는 것이 Symbol.species 기능
Symbol.species 오버라이드
Symbol.species는
static 악세서 프로퍼티이며
getter만 있고 setter는 없음
class Sports extends Array {
static get [Symbol.species](){
return Array;
}
};
const obj = new Sports(10, 20);
Symbol.species를 사용할 수 있는 빌트인 오브젝트
Array, Map, Set, RegExp
Promise, ArrayBuffer, TypedArray
빌트인 오브젝트를 상속받은 class에
Symbol.species를 작성하면 빌트인 오브젝트의 @@species가 오버라이드됨
인스턴스 바꾸기
인스턴스 바꾸기
class Sports extends Array {
static get [Symbol.species](){
return Array;
}
};
const one = new Sports(10, 20, 30);
log(one instanceof Sports);
const two = one.slice(1, 2);
log(two instanceof Array);
log(two instanceof Sports);
// true
// true
// false
class Sports extends Array{}
빌트인 Array 오브젝트를 상속받음
static get[Symbol.species](){ return Array; }
빌트인 Array 오브젝트의 @@species를 오버라이드
const one = new Sports(10, 20, 30);
인스턴스를 생성
파라미터 값이 인스턴스에 설정됨
one intanceof Sports
Sports로 one을 만들었으므로 true 출력
const two = one.slice(1, 2);
Array 오브젝트를 상속받았으므로 one 인스턴스로 slice()를 호출할 수 있음
slice() 대상은 인스턴스에 설정된 [10, 20, 30]
인스턴스를 반환하며 반환되는 인스턴스에 slice()를 결과를 설정
Symbol.species()로 오버라이드했으므로
static get[Symbol.species](){}가 호출됨
호출에 사용한 one 인스턴스 형태를 반환하지 않고 Array 인스턴스를 반환
이처럼 Symbol.species()로 반환할 인스턴스를 변경할 수 있음
two instanceof Array
two 인스턴스에는 Array 인스턴스가 할당되어 있으며
Array 오브젝트로 만들었으므로 true 출력
two instanceof Sports
-Sports가 아니라 Array 오브젝트로 two 인스턴스를 만들었으므로 false 출력
Symbol.toPrimitive
오브젝트를 대응하는 Primitive 값으로 변환
대응, 기대하는 타입
number, string, default
오브젝트를 문자열에 대응
const point = {bonus: 100};
log(point.toString());
const book = {
toString() {
return "책"
}
};
log(`${book}`);
// [object Object]
// 책
