지수의 블로그

1 분 소요

Javascript 개념

모던 자바스크립트 딥 다이브 정리

이터러블

이터레이션 프로토콜

이터레이션 프로토콜이란?

  • ES6 이전: 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등 순회 가능한 자료구조들은 규약 없이 for, for in문, forEach 메서드 등의 방법으로 순회했다.
  • ES6 이후: 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for of문, 스프레드 문법, 배열 디스트럭쳐링 할당이 가능하도록 했다.

이터러블

이터러블 프로토콜(규약)을 따르는 객체

→ 이터러블 프로토콜: Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환해주는 규약

for of문으로 순회할 수 있고, 스프레드 문법 및 배열 디스트럭쳐링 할당의 대상으로 사용할 수 있다.

이터레이터

이터레이터 프로토콜 규약을 지킨 객체

→ 이터레이터 프로토콜: 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터를 반환한다. 또한, next 메서드를 갖고 리절트 객체를 반환하는 규약

next 메서드를 소유하고, next 메서드를 호출할 경우 이터러블을 순회하면서 value와 done 프로퍼티를 갖는 객체(이터레이터 리절트 객체)를 반환한다.

value는 순회 중인 이터러블의 값, done은 이터러블의 순회 완료 여부를 나타낸다.

빌트인 이터러블

자바스크립트에서 제공하는 이터레이션 프로토콜을 준수한 표준 빌트인 객체

Array, String, Map, Set, TypedArray, arguments, DOM 컬렉션이 있다.

for of문

for (변수선언문 of 이터러블)로 사용한다.

이터레이터의 next 메서드를 호출해서 이터러블을 순회하면서 요소를 하나씩 변수에 할당한다.

유사 배열 객체

유사 배열 객체는 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체

for문으로 순회할 수 있다.

유사 배열 객체는 이터러블이 아닌 일반 객체이기 때문에 Symbol.iterator 메서드가 없어 for of문으로 순회할 수 없다.

유사 배열 객체 중 arguments, NodeList, HTMLCollection은 이터러블이다.

이터러블이 아닌 유사 배열 객체는 Array.from 메서드를 통해 배열로 변환할 수 있다.

댓글남기기

참고