JavaScript
Iterable 객체 Iterable : 반복 가능한
- 반복가능한 객체는 배열을 일반화한 객체입니다.
이터러블이라는 개념을 사용하면 어떤 객체든 for ... of 반복문을 사용할 수 있습니다.
배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복이 가능하며 문자열 역시 이터러블의 예입니다.
- 배열이 아닌 객체가 있는데 이 객체가 어떤 것들의 컬렉션 ( 목록, 집합 등 )을 나타내고 있는 경우 for... of 문법을 적용한
다면 컬렉션을 순회하는 데 유용할 것입니다.
Symbol.iterator
- for ... of 를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들어보자
let range = {
from: 1,
to: 5,
};
목표
for ( let num of range ) ... num = 1, 2, 3, 4, 5
- range를 이터러블로 만들기 위해 ( for ... of 문법을 사용하기 위해 ) 서는 객체에 Symbol.iterator ( 특수 내장 심볼 ) 라는
메서드를 추가하여 아래와 같은 일이 벌어지도록 해야 합니다.
1. for .. of 가 시작되자마자 for .. of 는 Symbol.iterator를 호출합니다. ( Symbol.iterator )가 없다면 에러가 발생합니다.
Symbol.iterator는 반드시 이터레이터 ( Iterator, 메서드 next 함수가 있는 객체 ) 를 반환해야 합니다.
2. 이 후 for .. of는 반환된 객체 ( 이터레이터 )만을 대상으로 동작합니다.
3, for .. of 에 다음 값이 필요하면 for .. of 는 이터레이터의 next() 메서드를 호출합니다.
4. next() 의 반환 값음 { done : Boolean, value : any } 와 같은 형태여야 하며 done = true 는 반복이 종료 됨을 의미합니다.
done = false 일 땐 value에 다음 값이 저장 됩니다.
- range 를 반복 가능한 객체로 만들어 주는 코드는 다음과 같습니다.
let range = {
from: 1,
to: 5,
};
// for ( let num of range ) ... num = 1, 2, 3, 4, 5
// 1. for .. of 최초 호출 시 , Symbol.iterator가 호출됨
range[Symbol.iterator] = function () {
// Symbol.iterator는 이터레이터 객체를 반환
// 2. 이 후 for..of는 이터레이터 객체만을 동작하는데, 이 때 다음 값도 정해집니다.
return {
current: this.from,
last: this.to,
// 3. for.. of 반복문에 의해 반복마다 next() 호출
next() {
// 4. next()는 값을 객체 {done:.. value :..} 형태로 반환
if (this.current <= this.last) {
return { done: false, value: this.current++ };
} else {
return { done: true };
}
},
};
};
for (let num of range) {
console.log(num);
}// 1, 2, 3, 4, 5
- 이터러블 객체의 핵심은 ' 관심사의 분리 ( Separation of concern, SoC ) ' 에 있습니다.
1. range엔 메서드 next() 가 없습니다.
2. 대신 range[Symbole.iterator]()를 호출해서 만든 '이터레이터' 객체와 이 객체의 메서드 next() 반복에 사용될
값을 만들어 냅니다.
- 이렇게 하면 이터레이터 객체와 반복 대상인 객체를 분리할 수 있습니다.
- 이터레이터 객체와 반복 대상 객체를 합져 range 자체를 이터레이터로 만들면 코드가 더 간단해집니다.
let range = {
from: 1,
to: 5,
[Symbol.iterator]() {
this.current = this.from;
return this;
},
next() {
if (this.current <= this.to) {
return { done: false, value: this.current++ };
} else {
return { done: true };
}
},
};
for (let num of range) {
console.log(num); // 1, 2, 3, 4, 5
}- 이제 range[Symbol.iterator]()가 객체 range 자체를 반환하고 반환된 객체엔 메서드 next()가 존재하게 된다.
더하여 this.current에 반복이 얼마나 진행되었는지를 나타내는 값도 저장되어 있다.
단점은 두 개의 for..of 반복문을 하나의 객체에 동시에 사용할 수 없다는 점입니다.
이터레이터(객체 자신)가 하나뿐이어서 두 반복문이 반복 상태를 공유하기 때문이죠.
그런데 동시에 두 개의 for..of를 사용하는 것은 비동기 처리에서도 흔한 케이스는 아닙니다.문자열은 이터러블이다.
- 배열과 문자열은 가장 광범위하게 쓰이는 내장 이터러블이다.
- for.. of는 문자열의 각 글자를 순회한다.
for (let char of "test") {
// 글자 하나당 한 번 실행됩니다(4회 호출).
console.log(char); // t, e, s, t가 차례대로 출력됨
}
- 이터레이터를 명시적으로 호출하기
- for .. of 를 사용할 때 동일한 방법으로 문자열을 순회할 것인데, 직접 호출을 통해 순회해 보자.
다음 코드는 문자열 이터레이터를 만들고, 값을 ' 수동 '으로 가져옵니다.
let str = "Hello";
// for..of를 사용한 것과 동일한 작업을 합니다.
// for (let char of str) console.log(char);
let iterator = str[Symbol.iterator]();
while (true) {
let result = iterator.next();
if (result.done) break;
console.log(result.value); // 글자가 하나씩 출력됩니다.
}
console.log(str[Symbol.iterator]); // [Function: [Symbol.iterator]]
console.log(str.__proto__[Symbol.iterator]); // [Function: [Symbol.iterator]]
console.log(str.__proto__.constructor); //[Function: String]
console.log(String.prototype[Symbol.iterator]); // [Function: [Symbol.iterator]]- 이터레이터를 명시적으로 호출하는 경우는 잘 없는데, 이 방법을 사용하면 for .. of를 사용하는 것 보다 반복 과정을
더 잘 통제할 수 있다는 장점이 있습니다. 반복을 시작했다가 멈춰 다른 작업을 하다 다시 반복을 시작하는 것과 같이
반복 과정을 여러 개로 쪼개는 것이 가능합니다.
이터러블과 유사 배열
- 비슷해 보이지만 아주 다른 두 용어입니다
1. 이터러블 ( iterable )은 위와 같이 메서드 Symbol.iterator 가 구현된 객체입니다.
2. 유사 배열은 인덱스와 length 프로퍼티가 있어 배열 처럼 보이는 객체입니다.
- 브라우저 등 호스트 환경에서 자바스크립트를 사용해 문제를 해결할 때 이터러블 객체나 유사 배열 객체 혹은 둘 다인
객체를 만날 수 있습니다.
- for ... of 를 사용하며 length 프로퍼티가 있는 문자열이 대표적인 예입니다.
- 이터러블이라고 해서 유사 배열 객체는 아닙니다. 배열 객체라고 해서 이터러블 객체인 것도 아닙니다.
- 위 예시의 range는 이터러블 객체이긴 하지만 인덱스도 없고 length 프로퍼티도 없으므로 유사 배열 객체가 아닙니다.
- 아래 예시의 객체는 유사 배열 객체이긴 하지만 이터러블 객체가 아닙니다.
let arrayLike = {
0: "Hello",
1: "World",
length: 2,
};
for (let item of arrayLike) {
console.log(item);
} // arrayLike is not iterable- 이터러블과 유사 배열은 대게 배열이 아니기에 push, pop 등의 메서드도 지원하지 않습니다.
range에 배열 메서드를 사용해 무언가를 하고 싶을 때 어떻게 하면 배열 메서드를 적용할 수 있을 까요??
Array.from
- 범용 메서드 Array.from 은 이터러블이나 유사 배열을 받아 진짜 Array를 만들어 줍니다.
이 과정을 거칠 시 이터러블이나 유사 배열에 배열 메서드를 사용 가능합니다.
let arrayLike = {
0: "Hello",
1: "World",
length: 2,
};
// for (let item of arrayLike) {
// console.log(item);
// } // arrayLike is not iterable
let arr = Array.from(arrayLike);
console.log(arr.pop()); // world- Array.from() 메서드를 통해 전달 받은 인자 값이 유사 배열인지 이터러블인지 조사합니다.
넘겨 받은 인자가 유사 배열이거나 이터러블인 경우 새로운 배열을 만들고 객체의 모든 요소를 새롭게 만든 배열로
복사합니다.
const range = {
from: 1,
to: 5,
[Symbol.iterator]() {
this.current = this.from;
return this;
},
next() {
if (this.current <= this.to) {
return { done: false, value: this.current++ };
} else {
return { done: true };
}
},
};
arr = Array.from(range);
console.log(arr); // [1, 2, 3, 4, 5]- Array.from ()엔 매핑 함수를 선택적으로 넘겨 줄 수 있습니다.
arr = Array.from(range, (num) => num * num);
console.log(arr); // [1, 4, 9, 16, 25]1. for..of을 사용할 수 있는 객체를 이터러블이라고 부릅니다.
2. 이터러블엔 메서드 Symbol.iterator가 반드시 구현되어 있어야 합니다.
3. obj[Symbol.iterator]의 결과는 이터레이터라고 부릅니다.
이터레이터는 이어지는 반복 과정을 처리합니다.
4. 이터레이터엔 객체 {done: Boolean, value: any}을 반환하는 메서드 next()가 반드시 구현되어 있어야 합니다.
여기서 done:true은 반복이 끝났음을 의미하고 그렇지 않은 경우엔 value가 다음 값이 됩니다.
5 .메서드 Symbol.iterator는 for..of에 의해 자동으로 호출되는데, 개발자가 명시적으로 호출하는 것도 가능합니다.
문자열이나 배열 같은 내장 이터러블에도 Symbol.iterator가 구현되어 있습니다.
문자열 이터레이터는 서로게이트 쌍을 지원합니다.
6. 인덱스와 length 프로퍼티가 있는 객체는 유사 배열이라 불립니다.
7. 유사 배열 객체엔 다양한 프로퍼티와 메서드가 있을 수 있는데 배열 내장 메서드는 없습니다.
8. 명세서를 보면 대부분의 메서드는 ‘진짜’ 배열이 아닌 이터러블이나 유사 배열을 대상으로 동작한다고 쓰여 있는걸 볼 수 있습니다.
이 방법이 더 추상적이기 때문입니다.
10. Array.from(obj[, mapFn, thisArg])을 사용하면 이터러블이나 유사 배열인 obj를 진짜 Array로 만들 수 있습니다.
이렇게 하면 obj에도 배열 메서드를 사용할 수 있죠.
선택 인수 mapFn와 thisArg는 각 요소에 함수를 적용할 수 있게 해줍니다.
iterable 객체
ko.javascript.info