JavaScript ES6에서의 순회와 이터러블 프로토콜

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

• 기존의 JavaScript ES5에서는 for 문의 i++을 사용하여 배열 내를 순회함
• JavaScript ES6에서는 for of 문을 사용하여 순회

<script>
// ES5 배열 순회 방법
const list=[1,2,3];
for(var i=0; i<list.length; i++){
    console.log(list[i]);
}

// ES5 유사배열 순회 방법
const str='abc';
for(var i=0; i<str.length; i++){
    console.log(str[i]);
}

// ES6 배열 순회 방법
const list=[1,2,3];
for(const a of list){
    console.log(a);
}

// ES6 유사배열 순회 방법
const str='abc';
for(const a of str){
    console.log(a);
}
</script>

Array

<script>
// Array 사용
console.log('Arr ----------');
const arr=[1,2,3];
for(const a of arr) console.log(a);
</script>

Set

<script>
// Set 사용
console.log('Set ----------');
const set = new Set([1,2,3]);
for(const a of set) console.log(a);
</script>

Map

<script>
// Map 사용
console.log('Map ----------');
const map = new Map([['a',1], ['b',2], ['c', 3]]);
for(const a of map.keys()) console.log(a);    // a b c
for(const a of map.values()) console.log(a);    // 1 2 3
for(const a of map.entries()) console.log(a);    // (2)["a",1] (2)["b",2] (2)["c",3]
</script>

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

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

사용자 정의 이터러블

<script>
// 
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]();
console.log(iterator.next(());
console.log(iterator.next(());
console.log(iterator.next(());
console.log(iterator.next(());

// for (const a of iterable) consoel.log(a);

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

// Example
for(const a of docuemnt.querySelectorAll('*')) console.log(a);
const all = document.querySelectorAll('*');
console.log(all[Symbol.iterator]());
</script>

전개 연산자

<sciprt>
const a = [1,2];
// a[Symbol.iterator] = null;
console.log([...a, ...[3,4]);
</script>

과정 후기

포트폴리오 사이트를 개발하면서 반복문을 무조건 그냥 for 문을 사용하면서 코드가 많이 복잡해졌던 경험이 있는데 ES6방식으로 하면 가독성 좋은 코드를 개발할수 있겠다 싶었습니다.. 이번 강좌에서 좋았던 점은 기존 ES5 형식의 반복문과 ES6 형식의 반복문이 어떤 방식으로 작동되는가에 대해서 차이점을 내부적으로 설명해주었던 것 같습니다.. 대략적으로 어떻게 작동하는지 원리를 알고 나니 뭔가 깨우친 느낌이고 map을 사용해서 키값과 value 값을 가져오는 예제는 매우 인상적이였습니다. 왜냐하면 전에 요 기능을 써먹으려고 stackoverflow를 뒤졌던 경험이 있었는데 ES5 형식으로 하니 굉장히 복잡한 코드가 되었던 기억이 있어서입니다.