[모던 자바스크립트 Deep Dive] 34장 : 이터러블 - JS

이터레이션 프로토콜

ES6에서는 순회 가능한 데이터 컬렉션을 이터러블로 통일하였다.

 

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

---

이터러블

이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 즉, 이터러블은 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);
}

// 스프레드 문법 사용할 수 있다.
console.log([...array]); // [1, 2, 3]

// 디스트럭처링 할당할 수 있다.
const [a, ...rest] = array;
console.log(a, rest); // 1, [2, 3]

 

ex) 배열, 문자열, Map, Set

 

 

 

이터레이터

이터러블  Symbol.iterator 메서드를 호출하면 이터레이터를 반환한다.

const array = [1, 2, 3];

// Symbol.iterator 메서드는 이터레이터를 반환
const iterator = array[Symbol.iterator]();

// next 메서드를 갖는다.
console.log('next' in iterator); // true

 

 

유사 배열 객체

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있고, 인덱스로 프로퍼티 값에 접근할 수 있다.

 

const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

for (let i = 0; i < arrayLike.length; i++) {
  console.log(arrayLike[i]); // 1 2 3
}

 

하지만 유사 배열 객체는 이터러블이 아닌 일반 객체다. 따라서 for ... of 문으로는 순회할 수 없다.

for (const item of arrayLike) {
  console.log(item); // 1 2 3
}

// TypeError: arrayLike is not iterable

 

 

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

이터레이션 프로토콜은 데이터 소비자와 데이터 공급자를 연결하는 인터페이스 역할을 한다.

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!