기존과 달라진 ES6에서의 리스트 순회
•
기존 리스트 순회
const list = [1, 2, 3];
for( var i = 0; i< list.length; i++){
log(list[i]);
}
/*유사 배열 순회*/
const str = 'abc';
for( var i = 0; i< str.length; i++){
log(str[i]);
}
JavaScript
복사
•
변경된 리스트 순회
for(const a of list){ //for of로 리스트 안에 있는 값(a)을 순회한다.
log(a);
}
for(const a of str){
log(a);
}
JavaScript
복사
Array, Set, Map을 통해 알아보는 이터러블/이터레이터 프로토콜
: Array, Set, Map모두 for...of를 사용하면 Symbol.iterator를 반환하고여 next()를 통해 value를 순회한다.
Array를 통해 알아보기
const arr = [1, 2, 3];
for(const a of arr) log(a);
JavaScript
복사
Set를 통해 알아보기
const set = new Set([1,2,3]);
for(const a of set) log(a);
JavaScript
복사
Map를 통해 알아보기
const map = new Map([['a',1], ['b', 2], ['c', 3]]);
for (const a of map)log(a)
JavaScript
복사
map이 아닌 map.values(), map.keys(), map.entries()역시 정상동작을 하는데, 이는 해당 함수를 통해 반환되는 값들도 Iterator 형태임을 알 수 있다.
Symbol.iterator
: Array, Set, Map은 Javascript 내장객체로써 이터러블/이터레이터 프로토콜을 따른다.
이터러블
이터레이터
: {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;} //자기자신을 return 해준다.
}
}
}
let iterator = iterable[Symbol.iterator]();
for(const a of iterable) log(a);
JavaScript
복사
잘 만든 이터러블이란?•
이터레이터를 만들어서 순회를 할 때 잘 동작 한다.
•
일부 진행한 이후에는 진행된 결과 이후의 값들로 진행이 된다.
이터레이터 역시 Symbol.iterator를 가지고 있고 이 Symbol.iterator를 실행한 값은 자기자신이다.-이러한 이터레이터가 well-formed Iterable이다.
const arr2 = [1, 2, 3];
let iter = arr2[Symbol.iterator]();
log(iter[Symbol.iterator]() == iter2)// true
JavaScript
복사
DOM 들 도 Iterator를 통해 순회가 가능하다
for( const a of document.querySelectorAll('*')) log(a) //dom ... dom
JavaScript
복사
querySelectorAll의 반환값(NodeList)역시 Symbol.iterator가 구현되어 있고 규약을 따르기에
for...of 사용을 통해 순회가 가능하다.
전개 연산자
≒ 나머지 연산자
전개연산자도 이터러블/이터레이터 프로토콜을 따른다. const a = [1, 2];
a[Symbol.iterator] = null;
log([...a, ...[3,4]);//Uncaught TypeError: a is not iterable
const b = [1, 2];
log([...a, ...[3,4]); // [1, 2, 3, 4]
JavaScript
복사
a[Symbol.iterator] = null; 으로 iterator를 null로 해주면 에러가 발생한다.
즉, 전개연산자 역시 iterable 프로토콜을 따른다는 의미가 된다.
