ES6+에서의 iterable 1

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

• for i++
• for of

기존 ES5에서의 리스트 순회 방식.

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]);
  }

• 기존 ES5에서의 리스트 순회 방식은 for문을 이용하여 i의 값을 증가시키면서 순회를 진행했다.

ES6+에서의 리스트 순회 방식.

  for (const a of list) {
     log(a);
  }
  for (const a of str) {
     log(a);
  }

• ES6+에서는 of 문으로 리스트 순회가 가능해졌으며, 개발자에게 더욱 직관적인 표현방식을 제공한다.

Array를 통해 알아보기

<script>
  log('Arr -----------');
  const arr = [1, 2, 3];
  let iter1 = arr[Symbol.iterator]();
  for (const a of iter1) log(a);
</script>

Set을 통해 알아보기

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

Map을 통해 알아보기

<script>
  log('Map -----------');
  const map = 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);
  console.clear();
</script>

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

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