LHJ

I'm a FE developer.

11. iterator / generator 언어의 혜택

10 Aug 2020 » codespitz_re

iterator / generator 언어의 혜택

  1. Array destructuring (배열 해체)
  2. 내장 반복 처리기

단지 iterator 스펙만 충족해주면 이러한 기능들을 사용할 수 있다는 것이다.

Array destructuring (배열 해체)

해체라고도 이야기하고, 분열이라고도 이야기하고, 비구조화라고도 이야기한다.
해체를 사용하기 위해선 iterable 객체여야 한다.
iterable 객체란 iterator result object 를 반환하는 것을 뜻한다.

const iter = {
    [Symbol.iterator]() {return this;},
    arr: [1, 2, 3, 4],
    next() {
        return {
            done: this.arr.length == 0,
            value: this.arr.pop()
        };
    }
};

// 해체 구문은 일반적으로 '할당' 즉, 변수를 선언하는 쪽에 쓰인다.
// 아래 a는 이 배열로부터 첫번째껄 얻게 된다.
// 나머지를 모아서 b에 담아라.
// 위 iterable interface 구문을 지켰을 때 아래 iter를 가상의 배열로 볼 수 있다. next()를 실행...
// 언제까지 next()를 실행? done이 true가 될 때까지..
const [a, ...b] = iter;
console.log(a, b); // 4, [3,2,1]

위에서 a에는 4가, b에는 [3,2,1]이 할당된다.
iter는 배열도 아니었다.
하지만 여러분들이 iterable interface의 요구 스펙만 지켜준다면, 언어의 혜택을 바로 받을 수 있게된다.
왜냐하면 처음부터 이 언어에 해체라는 기능은 iterable에 반응하는 거지 배열에 반응하는 것이 아니다.

내장 반복 처리기 - Spread(펼치기)

const iter = {
    [Symbol.iterator]() {return this;},
    arr: [1, 2, 3, 4],
    next() {
        return {
            done: this.arr.length == 0,
            value: this.arr.pop()
        };
    }
};

// iter 값을 펼쳐서 배열에 넣어버림
// 그 배열을 a 상수에 담음
// 아까와는 반대로 값을 펼쳐서 배열에 담는다.
// 즉, 이는 해체가 아니라 스프레드라고 부른다.
// 이런 스프레드(펼치기)도 이터러블에 반응하는 것.
// 이터러블 객체가 아니면 작동하지 않는다. 반드시 이터러블 객체여야 된다.
const a = [...iter];
console.log(a); // [4,3,2,1]

내장 반복 처리기 - Rest Parameter(나머지 인자)

const iter = {
    [Symbol.iterator]() {return this;},
    arr: [1, 2, 3, 4],
    next() {
        return {
            done: this.arr.length == 0,
            value: this.arr.pop()
        };
    }
};

// 함수의 인자도 펼칠 수 있다.
// 이것은 '값'을 펼친 것도 아니고 해체를 한 것도 아니다. 함수의 인자를 펼친 것.
const test = (...arg) => console.log(arg);
test(...iter); // [4,3,2,1]

우리가 귀찮음을 무릎쓰고 iterator 객체로 만든다면, 이러한 언어적 혜택을 다 받을 수 있다.
iterator, iterable 객체를 만들 땐 조금 괴로울지 몰라도, 사용할 때는 엄청 편해지는 것이다.
자바스크립트 ES6 이후부터는 반복을 위하여 iterable 을 만든다.