ES6 이터러블 /이터레이터, 리스트 순회

리스트 순회

기존

for(var i =0;i< str.length;i++){
     ...
}

es6

for(const a of list){
 ... 
}

간결하게 변경 되었음

이터러블/이터레이터

Array , Set, Map

const arr = [1,2,3];
for(const a of arr){

}
const set = new Set([1,2,3]);
for(const a of set){

}

const map = new Map(['a',1], ['b',2] , ['c',3]);
for(const a of map){

}

array 는 arr[0] , arr[1] 이렇게 해서 값을 찾을 수 있지만

Set과 Map은 불가능함

어떻게 for of문에서 동작이 되는가?

Symbol.iterator es6에 추가된 symbol 은 어떤 객체의 key로 사용될 수 있음

이터러블/이터레이터 프로토콜이랑?

• 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값
• 이터레이터 :{ value , done} 객체를 리턴하는next()를 가진 값
• let iterator = arr[Symbol.iterator](); iterator.next(); /// {value : 1 ,done : false } 값을 가진다
• 이터러블/이터레이터 프로토콜 : 이터러블은 for ... of 전개 연산자 등과 함께 동작하도록 규약

Array는 let iterator = arr[Symbol.iterator]();를 실행한 iterator를 계속해서 순회하면서 value로 떨어지는 값을 순회하는것

let iterator = set[Symbol.iterator]();
iterator.next();
 /// {value : 1 ,done : false } 값을 가진다
 iterator.next();
 /// {value : 2 ,done : false } 값을 가진다
 iterator.next();
 /// {value : 3 ,done : false } 값을 가진다


let iterator = map[Symbol.iterator]();
iterator.next();
 /// {value : Array(2) ,done : false } 값을 가진다
 /// Array(2) ::: value ["a" , 1] 

Set,Map도 마찬가지로 let iterator = arr[Symbol.iterator]();를 실행한 iterator를 계속해서 순회하면서 value로 떨어지는 값을 순회하는것

map.keys()는 iterator를 리턴한다

var a = map.keys();
a.next();
 /// {value : "a" ,done : false } 값을 가진다

:: value에 key만 남게 된다.

:: key만 뽑을 수 있다는것

keys() 뿐만 아니라 values(), entries() 도 가능

let iter = arr[Symbol.iterator]();
log(iter[Symbol.iterator]() == iter2) // true

iterator함수를 부른 값도 이터러블이다.

iterator함수는 자기 자신을 리턴한다.

전개 연산자

const a = [1,2];
log(...a) // 1,2출력
log([...a], ...[3,4]); //1,2,3,4 출력
log(...a, ...arr, ...set, ...map.keys()]); //모든 값이 추가됨 

a[Symbol.iterator] = null; 
 //오류 생김

전개 연산자 역시 이터러블 프로토콜을 따르고 있다.

제너레이터와 이터레이터

: 이터레이터이자 이터러블을 생성하는 함수

: 순회 할 수 있는 값을 만들 수 있다. 제너레이터를 통해 조작 할 수 있음

funcation *gen(){
    yield 1;
    if(false) yield 2;
    yield 3;
    //마지막에 리턴값을 만들수 있음 
    return 100; //done 이 true일 때 출력 but 순회할때(for)는 안나온다.
}
let iter = gen();
log(iter[Symbol.iterator]() === iter ) // true
log(iter.next());

Odds

   function *odd(l){
        for(let i = 0;i<l; i++){
            if(i % 2) yield i;
        }
    }
    let iter2 = odd(10);
    console.log(iter2.next());
    console.log(iter2.next());
    console.log(iter2.next());
    console.log(iter2.next());
    console.log(iter2.next());
    console.log(iter2.next());
    console.log(iter2.next());

요런 함수 만들어봄

결과가 나온다.

구조 분해

    const [head, ...tail] = odds(5);
    console.log(head);
    console.log(tail);

    const [a,b, ...rest] = odds(10);
    console.log(a);
    console.log(b);
    console.log(rest);