지난 포스팅에서 for 문과 for of 의 내부적인 동작방식에 차이가 있고, 그것을 좌지우지하는 것이 Symbol.iterator라는 정체불명의 녀석이라는 이야기까지 했으므로, 이번 포스팅에서는 과연 그 녀석이 어떤 녀석인지 ! 어떤 기능을 가지고 있는지 작성해보도록 하겠습니다.
이터러블(iterable)은 정확히 무엇인가?
먼저 이터러블이 무엇인지에 대해 이야기하고 --> 이터레이터(iterator)에 대해 이야기하고 -->
이터러블 / 이터레이터 프로토콜이 무엇인지에 대해 이야기해보겠습니다.
이터러블을 정의하자면 다음과 같습니다.
이터레이터를 반환하는 Symbol.iterator() 를 가진 값
어떤 것이 이터러블인지 아닌지 궁금하시다면 알 수 있는 방법은 간단합니다 !
const whatever = 미지의 값(문자열, 숫자, 불리언, 함수, 객체 등등)
console.log(whatever[Symbol.iterator]) // undefined라면 이터러블이 아닙니다.그렇다면 이터레이터는 무엇일까요 ?
{ value , done } 형태의 값을 가지는 객체를 리턴하는 next()를 가지는 값
이터레이터를 아는 순간부터 for-of 문의 구동방식에 관한 실마리가 풀리기 시작합니다. 다음 코드를 보시죠 .
const list = [1,2,3];
const iter1 = list[Symbol.iterator](); // 이 순간부터 iter1 변수는 next()를 가지게 됩니다.
console.log(iter1.next()); // 결과 : {value: 1, done: false}list 배열의 이터레이터를 iter1이라는 변수에 초기화시키고, iter1 이터레이터가 가지는 next() 메소드를 console.log에 찍어본 결과 { value : 1, done : false } 라는 결과가 나온 것을 확인할 수 있습니다 .
조금만 더 next()를 해보면 어떤 결과가 나올지 볼 수 있겠네요 !
const list = [1,2,3];
const iter1 = list[Symbol.iterator](); // 이 순간부터 iter1 변수는 next()를 가지게 됩니다.
console.log(iter1.next()); // 결과 : {value: 1, done: false}
console.log(iter1.next()); // 결과 : {value: 2, done: false}
console.log(iter1.next()); // 결과 : {value: 3, done: false}
console.log(iter1.next()); // 결과 : {value: undefined, done: true}이터러블인 list는 길이가 3인 배열이죠 ! 달리 말하면 요소가 3개인 배열이라고도 할 수 있겠습니다.
위의 코드에서 iter1.next()를 4번 호출하자, 3번째 까지는 value에 list의 요소가 1씩 증가되면서 출력되다가 4번째 호출에서는 value : undefined, done : true 가 나오는 것을 확인할 수 있습니다.
⭐️ 결론 : for-of문은 next()가 반환하는 객체의 value값을 참조해서 동작하는구나 !
그렇다면 이터러블 / 이터레이터 프로토콜은 무엇일까 ?
이터러블/이터레이터 프로토콜이란 이터러블을 for...of , 스프레드 연산자 등과 함께 동작하도록 하는 규약입니다.
말이 어렵지만 예시를 들자면 배열객체 ,Set객체, Map 객체는 이터러블/이터레이터 프로토콜을 따르는구나 라고도 정리할 수 있겠습니다.
다음 포스팅에서는 이러한 이터러블/이터레이터 프로토콜의 연장선인 generator 에 대해서 알아보겠습니다 :)
