[ Javascript ] - 리스트 순회하기

리스트 순회하기

 

기존의 리스트 순회 방식

for i++

 

es6에 새롭게 등장한 리스트 순회 방법

for of

 

---

 

자바스크립트의 내장값 Array / Set / Map

Array, map, set은 자바스크립트 내장객체로서 이터러블, 이터레이터 브로토콜을 따른다.

[ Symbol.iterator ]

* 이터러블
-> 이터레이터를 리턴하는 [ Symbol.iterotor]( )를 가진 값, 즉 [Symbol.iterator]()을 실행 시 이터레이터를 반환하는 값.
* 이터레이터
-> { value , done} 객체를 리턴하는 next()를 가진 값.
* 이터러블/이터레이터 프로토콜 
-> 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록 한 규약

1) Array를 통한 접근   

// Symbol.iterator
// es6에서 추가된 것으로, 어떤 객체의 키로써 사용될 수 있다.
// ex)
log(arr[Symbol.iterator])
// 출력값 : ƒ values() { [native code] }
log(set[Symbol.iterator])
log(map[Symbol.iterator])

** map과 set이란?

** set과 map은 기본적으로 index를 통한 접근이 불가능한다. ex) set[0] 또는 map[0] 등을 출력시 undefined를 출력한다.

2) Set을 통한 접근   

3) Map을 통한 접근  

총 코드

<script>
    const log = console.log;
</script>

# Array를 통한 접근
<script>
    const arr = [1,2,3];
    for (const a of arr ) {
        log(a)
    }
</script>

# Set을 통한 접근
<script>
    const set = new Set([1,2,3]);
    for (const a of set ) {
        log(a)
    }
</script>

# Map을 통한 접근
<script>
    const map = new Map([['a',1],['b',2],['c',3]]);

    for (const a of map ) {
        log(a)
    }
</script>

# Symbol.iterator
es6에서 추가된 것으로, 어떤 객체의 키로써 사용될 수 있다.
ex)
<script>
    //
    log(arr[Symbol.iterator]())
    //
    log(set[Symbol.iterator]())
    const setIter = set[Symbol.iterator]();
    log(setIter.next()); // value: 1, done: false}
    log(setIter.next()); // {value: 2, done: false}
    log(setIter.next()); // {value: 3, done: false}
    log(setIter.next()); // {value: undefined, done: true}
    //
    log(map[Symbol.iterator]())
    const mapIter = map[Symbol.iterator]();
    log(mapIter.next()); // {value: Array(2), done: false}  // ['a', 1]
    log(mapIter.next().value) //['b', 2]
    log(mapIter.next()); // {value: Array(2), done: false}  // ['c', 3]
    log(mapIter.next()); // {value: undefined, done: true}

    let iter1 = arr[Symbol.iterator]();
    iter1.next();
    for(const a of iter1) {
        log(a);
    }
    // 2
    // 3

    let iter2 = set[Symbol.iterator]();
    iter2.next();
    for(const a of iter2) {
        log(a);
    }
    // 2
    // 3

    let iter3 = map[Symbol.iterator]();
    iter3.next();
    for(const a of iter3) {
        log(a);
    }
    // ['b', 2]
    // ['b', 3]

    const map2 = new Map([['a',1],['b',2],['c',3]]);
    for(const a of map.keys()) log(a);
    for(const a of map.values()) log(a);
    for(const a of map.entries()) log(a);

</script>

<script>
    log(map.keys()); // MapIterator {'a', 'b', 'c'}
    log(map.values()); // MapIterator {1, 2, 3}

    log(map.entries()); // MapIterator {'a' => 1, 'b' => 2, 'c' => 3}
    log(map.forEach((value, key)=>{
        log(`value : ${value} / key : ${key}`)
    }))
    // value : 1 / key : a
    // value : 2 / key : b
    // value : 3 / key : c

    log(map.get('a')); // 1
    log(map.has('a')); // true
    log(map.set('d', 4)); // Map(4) {'a' => 1, 'b' => 2, 'c' => 3, 'd' => 4}
    log(map.clear()); // undefined
    log(map.keys()); // MapIterator {}

</script>

 

[ 출처 ]

https://www.inflearn.com/course/functional-es6