💻 이터러블과 이터레이터

이터러블? 이터레이터? 그동안 [Symbol.iterator] 들어본 적은 있는게 이게 뭐지? 싶었던! 바로 그 이터레이터에 대해 다뤄보고자 한다.

📃 오늘 공부한 것

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

1. 이터러블 프로토콜
Symbol.iterator을 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이 규약을 이터러블 프로토콜이라고 한다.

2. 이터레이터 프로토콜
이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜은 이터레이터를 반환한다. 이터레이터는 next 메서드를 호출하면 이터러블을 순회하며 value와 done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다. 이 규약을 이터레이터 프로토콜이라고 한다.

이터러블

이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 즉, Symbol.iterator를 프로퍼티 키로 사용한 메서드르 직접 구현하거나 프로퍼타입 체인을 통해 상속받은 객체를 말한다.

• 이터레이터를 리턴하는 [Symbol.iterator()] 메서드를 가진 객체
• 배열의 경우 Array.prototype의 Symbol.iterator를 상속받기 때문에 이터러블이다.

이터레이터

이터러블의 Symbol.interator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.

• {value, done} 형태의 이터레이터 객체를 리턴하는 next()를 가진 값
• next 메서드로 순환 할 수 있는 객체
• Symbol.iterator 안에 정의 되어 있다.

const arr = [1, 2];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // {value: 1, done: false }
console.log(iterator.next()); // {value: 2, done: false }
console.log(iterator.next()); // {value: undefined, done: true}

사용자 정의 이터러블

const iterable = {
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜을 준수
  [Symbol.iterator]() {
    let i = 3;

    // Symbol.iterator 메서드와 next 메서드를 소유한 이터러블이면서 이터레이터인 객체를 반환
    return {
      next() {
        return i == 0 ? { done: true } : { value: i--, done: false }
      },
      [Symbol.iterator]() {
        return this;
      }
    }
  }
}

제너레이터

이터레이터이자 이터러블을 생성하는 함수이다. 제너레이터를 만드려면 '제너레이터 함수'라 불리는 function* 이 필요하다.

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

let iter = gen();
log(iter[Symbol.iterator]() === iter); // true

여기서 잠깐 🖐🏻

어제 알고리즘 문제를 풀 때 덱을 실제로 구현하는 클래스를 구현하는 코드를 보았다.
덱 클래스 중 한 메서드가 아래와 같이 정의되어 있었다.

class Node {
  prev = null;
  next = null;
  constructor(value) {
    this.value = value;
  }
}

class Deque {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
	
  .
  .
  .

  *[Symbol.iterator]() {
    let tmp = this.head;
    while (tmp) {
      yield tmp.value;
      tmp = tmp.next;
    }
  }
}


console.log([...deque]);

분명 어제 문제를 풀 때에는 저게 무엇인지 설명을 보아도 이해가 가지 않았었다. 오늘 공부후에 다시 보니 이해가 되었다. 덱 안에 원소를 연결 리스트로 구현하였는데 그 리스트를 편하게 가져올 때 사용하기 위해서였다.
위와 같이 사용할 수도 있다는 것이 신기하였다.😮

😏새롭게 알게된 내용

오늘 배운 내용 전부.. 새롭게 알게된 내용이다. 머쓱 😅

🔥 느낀점

이터러블과 이터레이터! 그리고 제너레이터! 들어본 적만 있었던 개념들을 새롭게 배웠다. 솔직히 재미있었다. 새롭게 무언가를 배운다는 것은 즐거운 일이다!💕

사실 위에 내용 말고도 그리디 알고리즘에 대해서도 배웠다.
진짜 익숙하지 않아 프로그래머스 문제 중 큰 수 만들기라는 문제를 푸는데 3시간이나 걸렸다. 익숙하지 않은 알고리즘은 역시 많이 풀어보는 것 말고는 답이 없는 것 같다. 지금처럼 꾸준히 하자

복습!!하지 않으면 오늘 배웠던 내용도 곧 잊혀질테니 자주 훑어보자! 할 것이 많아도 놓치지 않게 반복하면서 챙겨나가자!

🗣 오늘의 TMI

임시팀이 이번주까지만 진행된다는 것을 알게 되었다. 너무너무 아쉽다.😭 너무 짧은 것 아닌가ㅠㅠ 이제 좀 서로 익숙해질 때 쯤 바뀐다니!!
새로운 분들을 아는 것도 물론 좋지만 아쉬움은 어쩔 수 없는 것 같다!
하지만 괜찮아! 다른 곳에서도 충분히 볼 수 있으니까!!🤗

2주차에 접어 들었고 하루가 지났다. 남은 기간에도 후회하지 않도록 열심히 하자

Refer

도서 > 모던 자바스크립트 딥 다이브
사이트 > 제너레이터

오늘의 내용 정리

함수형 프로그래밍