모던자바스크립트튜토리얼을 그대로 복기하며 공부해보겠읍니다 ..

iterable 객체

iterable 객체란 배열을 일반화한 객체를 말한다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for...of 반복문을 적용할 수 있다.

✔️ symbol.iterator

이터러블 객체를 만들어 보자.

let range = {
  from : 1,
  to : 5
};

//for..of가 동작하여 1,2,3,4,5가 출력될 수 있도록 만들어 보자..

range를 이터러블로 만들려면 객체에 symbol.iterator(특수 내장 심볼)이라는 메서드를 추가해야 한다.

1. for..of가 시작되자마자 Symbol.iterator를 호출. Symbol.iterator는 반드시 이터레이터(메서드 next가 있는 객체)를 반환해야 함.

2. 이후 for..of는 반환된 객체(이터레이터)만을 대상으로 동작함.

3. for..of에 다음 값이 필요하면, for..of는 이터레이터의 next() 메서드를 호출

4. next()의 반환 값은 {done : Boolean, value : any}와 같은 형태이어야 함.

let range = {
  from : 1,
  to : 5
};

range[Symbol.iterator] = function(){
  return{
    current : this.from,
    last : this.to,
    
    next(){
      if(this.current <= this.last){
        return {done : false, value : this.current++ }
      } else {
        return {done : true };
      }
    }
  };
};

for (let num of range) {
  alert(num); //1, then 2, 3, 4, 5

👉🏻 이터레이터 객체와 반복 대상인 객체를 분리하는 것이 핵심이다.

• range엔 메서드 next()가 없다.
• 대신 range[Symbol.iterator]()를 호출해서 만든 '이터레이터' 객체와 이 객체의 메서드 next()에서 반복에 사용될 값을 만들어 낸다.

✔️ 문자열 = 이터러블

for (let char of "test") {
  // 글자 하나당 한 번 실행됩니다(4회 호출).
  alert( char ); // t, e, s, t가 차례대로 출력됨
}

✔️ 이터레이터 명시적 호출

let str = "Hello";

// for..of를 사용한 것과 동일한 작업을 합니다.
// for (let char of str) alert(char);

let iterator = str[Symbol.iterator]();

while (true) {
  let result = iterator.next();
  if (result.done) break;
  alert(result.value); // 글자가 하나씩 출력됩니다.
}

✔️ 이터러블과 유사 배열

• 이터러블 : 메서드 Symbol.iterator가 구현된 객체
• 유사배열 : 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체

👉🏻 이터러블과 유사배열은 대개 배열이 아니기 때문에, 배열 메서드들을 지원하지 않는다.

이들에게 배열 메서드를 적용하려면? ->

✔️ Array.from

범용 메서드 Array.from은 이터러블이나 유사 배열을 받아 '진짜' Array를 만들어 준다.

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); // World 

👉🏻 Array.from엔 '매핑' 함수를 선택적으로 넘겨줄 수 있다.

Array.from(obj [, mapFn, thisArg])

mapFn을 두 번째 인수로 넘겨주면, 새로운 배열에 obj 요소들을 추가하기 전에 각 요소를 대상으로 mapFn을 적용할 수 있다. 세 번째 인수 thisArg는 각 요소의 this를 지정할 수 있도록 해준다.

📚 모던 자바스크립트 튜토리얼