[데브코스 11일차 TIL] Vanilla JS 시작하기 + 이터러블 / 이터레이터 프로토콜

🤔 앞으로 배워야 할

1. new 키워드에 대햐여
2. 즉시실행함수에 대하여
3. 클로저에 대하여
4. this에 대하여
5. 화살표 함수와 this, this 바인딩, 그리고 클로저

6. 실행 컨텍스트, 렉시컬 컨텍스트...

6. 당연히 이것들 말고도 더 있음

7. 자바스크립트 그 자체

 

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

Array, Set, Map 등을 for - of 문이나 다른 고차함수들로 "간편하게" 순회를 할 수 있는 것은 이터러블 / 이터레이터 프로토콜을 준수했기 때문. Set, Map은 기존 for문처럼 i에 인덱스(key)값을 넣어줌으로서 순회를 할 수 없다. 그런데 for - of 문으로는 순회를 할 수 있다. 이것은 for - of가 내부적으로 기존 for문과 다르게 동작한다는 것 → Set, Map은 이터레이터를 리턴하는 이터러블( 이터러블 / 이터레이터 프로토콜을 준수한 객체)이고 for - of는 이터러블을 순회하는 것이기 때문.

이터러블

이터러블은 내부에 [Symbol.iterator]를 가진 값을 말한다. 예를들어 딕셔너리형 객체를 for - of 문으로 순회할 수 없는 이유는 간단히 말해서 [Symbol.iterator]가 없기 때문이라고도 할 수 있다. 그리고 이 [Symbol.iterator]를 이터레이터 라고 한다. 이터레이터여야 하는 조건은 바로 아래서 다시 설명한다.

const dic = {
  0: 0,
  1: 1,
  2: 2,
};

console.log(dic[Symbol.iterator]) // undefined

이터레이터

이터레이터는 바로 위해서 말한 [Symbol.iterator]가 next 메서드를 가지고 있고, 이 next 메서드가 { done, value }를 리턴한다면 이터레이터이다. 이것을 만족하면 이터레이터이기도 하다. (이터러블 - 이터레이터 프로토콜을 만족하는)

그래서 사용자 정의 이터레이터를 구현해보았는데, 이터레이터는 내부적으로 클로저를 리턴하는 함수로 보였다. 몇 달 전에는 느끼지 못한 부분이었는데, 오늘 클로저를 공부하고 이터레이터를 다시 보니 "어 이거 클로저네..." 라는 생각이 들었음..

원리

객체 빌트인 메서드인 keys(), values(), entries() 는 이터레이터를 반환한다. 그리고...

const map = new Map([['a', 1], ['b', 2], ['c', 3]])

const iter = map.keys()
console.log(iter) // [Map Iterator] { 'a', 'b', 'c' }

const iter2 = iter[Symbol.iterator]()
console.log(iter2) // [Map Iterator] { 'a', 'b', 'c' }

console.log(iter === iter2) // true (well-formed iterator)

map.keys() 를 하면 이터레이터를 반환한다. 그리고 여기서 한번 더 이터레이터를 반환하면 자기 자신이 된다. (이 조건을 만족하면 well-formed iterator) for - of문은 이런 원리(이것이 이터러블 - 이터레이터 프로토콜)로 원소를 출력한다는 것.

 

 

정리

1) Array는 for - of문으로 순회가 가능하다. 왜냐하면 for - of 는 이터러블을 순회하고 Array는 이터러블이니까.

2) Array가 이터러블인 이유는 이터레이터를 가지고 있기 때문이다. 이터레이터는 [Symbol.iterator] 를 가지고 있고, next 메서드를 가지고 있으며 이 next 메서드를 호출하면 { done, value } 를 리턴하는 객체이다.

3) 이 점을 이용하여 사용자 정의 이터러블 - 이터레이터 객체를 만들 수 있다.

 

---

💡 오늘의 회고

알고리즘과 자료구조를 간단히 배우고 드디어 자바스크립트를 시작한다. 강의를 듣기 전에 앞서 사전문제를 풀어봤는데, 100% 정확히는 아니지만 어느정도 감은 있는 것 같았다. 몇 달 동안 vanillaJS 토이 프로젝트만 하고 자바스크립트 공부를 오래했었으니 그래도 잘 풀어서 다행(?)인 듯 싶다... 하지만 지금 내가 아는 수준에서 더 깊게 내려가다보면 설명하지 못하는 레벨이 분명히 있는 것 같다. 앞으로 더 깊게 공부를 하며 자바스크립트라는 언어 자체를 이해해보도록 하자.

 

해설 강의를 보면서 들었던 생각은, 해결하는 방법은 여러가지지만 결국 근본적인 이유는 같다는 것이다. 결국 자바스크립트의 this (일반적인 클래스 기반 프로그래밍 언어와 다른 자바스크립트의 this... 점(마침표, ".") 연산자를 통해서 바인딩되는 this가 달라지는 등) 의 특징, 그리고 항상 더 깊게 파야겠다라고 생각하는 화살표 함수와 this, this 바인딩, 그리고 클로저... 클로저는 예전부터 스스로 잘 알지 못한다고 생각하고 있었고 데브코스 1일차부터 클로저에 대한 미련이 깊어졌다... "깊게" 이해한 이후에, 나중에 글을 정리해보도록 하자.

 

인프런에서 인동님의 함수형 자바스크립트 강의 기본 + 응용까지 다 구매를 했었는데, 데브코스에서 모두 다 제공을 받아버렸다(덜덜) 또 인동님께서 직접, 바쁘신와중에도 데브코스 멘토님으로 오셔서 질문을 받아주신다고 했다. 일단 강의부터 다시 봐보자. 예전에 구매는 했지만 기본편도 아직 다 못 본 상태... 오늘부터 다시 정주행중이다. 분명 한 번 봤던 강의인데, 예전에 봤을 때랑 다르게 또 새로운 것이 보이기 시작한다... 나 혹시 성장하는 중?