[JS] 순회와 이터러블(iterable)

이제부터 console.log는 log로 표기한다.

기존과 달라진 ES6에서의 리스트 순회

• for i++
• for of

// es6 이전 

const list = [1,2,3];
for (var i = 0; i < list.length; i++){
log(list[i]);	
}
// 1 2 3

const str = 'abc'
for (var i = 0; i < str.length; i++){
log(str[i]);	
}
// a b c

// es6 이후

for (const a of list) {
	log(a);
}
// 1 2 3

for (const a of str) {
	log(a);
}
// a b c

• Symbol이란

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

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

const iterable = {
	[Symbol.iterator](){
      let i = 3;	
      return {
        next() {
        	return i == 0? {done:true} : {value: i--, done:false},
              [Symbol.iterator]() {return this;}
        }
      }
    }
};

let iterator = iterable[Symbol.iterator]();
for (const a of iterable) log(a);

// 3 2 1

• ✅ well formed iterator : iterator가 자기 자신을 반환하는 Symbol.iterator를 가지고 있을때 well formed iterator라고 할 수 있다.

const arr = [1,2,3,4,5];
let iter = arr[Symbol.iterator]();
log(iter[Symbol.iterator]() == iter);
// true

Array Set Map

### Array === 이터러블	

const arr = [1,2,3];
// arr[Symbobl.iterator] = null; >> 밑에 log가 에러남
for (const a of arr) log(a);
// arr[0] 1 arr[1] 2 arr[2] 3

// let iterator = arr[Symbol,iterator]();
// iterator.next() >> {value:1,done:false} 3번 후 배열이 끝나면 {value: undefined, done:true} 반환

>> arr[Symbol.iterator]엔 어떠한 함수가 들어가있으며 값을 null로 준다면 함수 실행이 안된다

const arr2 = [1,2,3,4];
let iter2 = arr2[Symbol.iterator]();
iter2.next();
for (const a of iter2) log(a);

// iter2.next()가 실행된 후에 for of 문이 실행되기 때문에 log에는 2 3 4가 찍히게 된다.

### Set

const set = new Set([1,2,3]);
for (const a of set) log(a);
// set[0]... undefined

// iterator.next() >> {value:1,done:false}


### Map

const map = new map([['a',1],['b',2],['c',3]]);
for (const a of map) log(a);
// map[0]... undefined

// iterator.next() >> {value:['a',1],done:false}

// var a = map.keys();	map의 key들만 반환
// a.next(); >> {value:'a',done:false}

즉 for 문 안에서 일어나는 것과 같다 value를 반환하면서 done:true 시점에서 for 문을 빠져나간다.

전개 연산자

const a = [1,2];
const b = [3,4,5];
// a[Symbol.iterator] = null; >> 에러
log([...a,...b])	// 1 2 3 4 5

Symbol.iterator MDN 설명 링크