JavaScript_ES6_Study [ Iteration & for...of ]

2022-03-17 노션페이지,
2022-04-03 노션페이지,
2022-04-06 노션페이지,
2022-04-26 노션페이지,
2022-05-18 노션페이지,
2022-05-19 노션페이지
기록된 노션을 다시 정리

어려웠던 부분

• 이터레이션, 이터러블, 이터레이터 전체적으로 어려움
• Symbol.iterator메소드
• 커스텀 이터러블의 예시로 피보나치함수의 재귀 흐름
  (참조 웹페이지 확인)

1. 이터레이션 프로토콜

• 이터레이션 프로토콜에는 이터러블프로토콜과 이터레이터프로토콜이 있다,
• 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.

---

이터러블

• 이터러블은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다.
• 이터러블은 for…of 문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다.
• 이터러블 프로토콜 = Symbol.iterator 메소드를 소유하거나 상속받은 객체

const array = [1, 2, 3];

// 배열은 Symbol.iterator 메소드를 소유한다.
// 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.
console.log(Symbol.iterator in array); // true

// 이터러블 프로토콜을 준수한 배열은 for...of 문에서 순회 가능하다.
for (const item of array) {
  console.log(item);
}

---

이터레이터

• Symbol.iterator 메소드는 이터레이터를 반환한다.
• 이터레이터 프로토콜을 준수한 이터레이터는 next 메소드를 갖는다.
• next 메소드를 호출하면 이터러블을 순회하며 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 것이다.

  간단하게 정리

  • [Symbol.iterator](); 을 호출하면 이터레이터가 반환
  • 반환된 이터레이터로 next 메소드 호출 가능
  • next메소드 호출하면 이터레이터 리절트(iterator result) 객체를 반환

// 배열은 이터러블 프로토콜을 준수한 이터러블이다.
const array = [1, 2, 3];
// 이터레이터의 next 메소드를 호출하면 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환한다.
// next 메소드를 호출할 때 마다 이터러블을 순회하며 이터레이터 리절트 객체를 반환한다.
console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: 3, done: false}
console.log(iterator.next()); // {value: undefined, done: true}

// 이터러블은 for...of 문으로 순회 가능하다.
for (const item of array) {
  console.log(item);
}

---

이터레이션 프로토콜의 필요성

• for...of문, spread 연산자, 디스트럭처링 할당 등 다양한 데이터 소스가 각자의 순회 방식을 갖는다면 각각의 방식을 지원해야하므로 비효율적이다.
  => 이런 이유로 이터레이션 프로토콜로 통일했다.

2. for...of문

• 내부적으로 이터레이터의 next 메소드를 호출하여 이터러블을 순회
• next 메소드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for…of 문의 변수에 할당한다.
• 이터레이터 리절트 객체의 done 프로퍼티 값이 true이면 이터러블의 순회를 중단한다.

// 배열
for (const item of ['a', 'b', 'c']) {
  console.log(item);
}
// 'a', 'b', 'c'
//=> (iterator.next()); 을 연속으로 호출하는 것과 동일

>> 비슷한 for...in문은 요속의 key값(index)을 변수에 할당하다.
>> 객체에서 사용 가능
```js
// 객체
for (const item in {a:1, b:2, c:3}) {
  console.log(item);
}
// 'a', 'b', 'c'

3. 커스텀 이터러블

• 일반 객체는 이터러블이 아니다.
• 그러므로 일반 객체는 이터러블 프로토콜을 준수하지 않으므로 for…of 문으로 순회할 수 없다.
• 하지만 일반 객체가 이터레이션 프로토콜을 준수하도록 구현하면 이터러블이 된다.

참조 : poiemaweb.com