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

dowon kim·2022년 6월 23일
0

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

  • for i++
  • for of
<script>
  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]);
  }
  for (const a of list) {
    // log(a);
  }
  for (const a of str) {
    // log(a);
  }
</script>

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, 전개 연산자 등과 함께 동작하도록한 규약

사용자 정의 이터러블을 통해 알아보기

<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]();
  // log(iterator.next());
  // log(iterator.next());
  // log(iterator.next());
  // log(iterator.next());
  //
  for (const a of iterable) log(a);
  //
  // const arr2 = [1,2,3];
  // let iter2 = arr2[Symbol.iterator]();
  // iter2.next();
  // for (const a of arr2) log(a);
</script>

전개 연산자

<script>
  console.clear();
  const a = [1, 2];
  // a[Symbol.iterator] = null;
  log([...a, ...arr, ...set, ...map.keys()]);
</script>

수강후기

기존 문법에서의 반복문과 es6+에서 새롭게 지원하는 반복문의 차이를 먼저 알아본후

이번 es6+에서 지원하는 중요기능중 하나인 이터러블 / 이터레이터 프로토콜을 다양한 예제를 통해

자세히 알아 볼 수 있었다.

에러가 나기 쉬운 i++, j++, if, for, break 등의 명령형 코드를 작성하지 않아도 되는 편리함과 안전함의 메리트를 알 수 있었으며 ,

기존 es5에서 다양한 자료형에 따라 그에 맞는 조회문 및 반복문을 써야 하는 불편함을 없애고

통일된 약속을 만들어 코드의 안정성을 높이는 방안으로 출시된 이터러블 / 이터레이터 프로토콜을

좋은 예제를 통해 원리를 알고 습득할 수 있었다.

profile
The pain is so persistent that it is like a snail, and the joy is so short that it is like a rabbit's tail running through the fields of autumn

0개의 댓글