ES6 문법(3) - Iterator

ground4ekd·2020년 11월 19일
0

자바스크립트

목록 보기
3/6
post-thumbnail

Collection 을 반복하는 새로운 방법인 Iterator에 대해 알아보자.

Iterable

Iterable 은 반복가능한 뜻은 가진 형용사로, 스스로 반복가능한 객체를 뜻한다. 자바스크립트에서 배열, 문자열, SET, MAP 등 이 해당된다. Iterable 들은 아래와 같은 문법을 사용할 수 있다.

// 비구조화
const [one, two, three] = iterable  
// 전개 연산자
const copied = [...iterable]  

어떻게 Iterable 들은 반복이 가능한 것일까? 그건 Iterator을 내장하고 있기 때문이다.

Iterator

Iterator은 Iterable 객체 내의 내장되어 반복할 수 있게 도와주는 메서드이다. 앞서 얘기한 배열, 문자열, SET, MAP 등은 이 Iterator을 내장하고 있다.

const arr= []
console.log(!!arr[Symbol.iterator])  //true

Symbol?
심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용되는데, 같은 이유로 iterator는 이름 충돌을 막기위해 Symbol.iterator 를 사용한다.

규칙

iterator는 기본 규칙을 지켜야 한다. next 메서드를 선언해야하고, 반환 값은 { value, done } 형식으로 반환해야 한다. 예시로 배열의 iterator를 재정의 해보면 다음과 같다.

// iterator 반환 함수
function createIter(){
  let i = 0  // 배열 index를 가리키는 포인터
  
  const iterator = () => ({
    next: () => {
      const result = i < this.length ? 
        { done: false, value: this[i] }
        :
        { done: true, value: undefined }
      i++
      return result
    }
  }) 
  return iterator
}

const arr = [1,2,3]
arr[Symbol.iterator] = createIter.call(arr)

console.log([...arr]) // [1, 2, 3]

donetrue로 반환될 때까지 반복한다.

Object를 iterable 로 변경해보기

Object 에 iterator을 추가하여 iterable 객체로 변경해보자

const obj = {
  name: 'codingchu',
  age: 11,
  like: ['사과', '치즈']
}

obj[Symbol.iterator] = (function(){
  let i = 0
  const keys = Object.keys(this)
  return () => ({
    next: () => {
      if(i < keys.length){
        return { done: false, value: this[keys[i++]] }
      }else{
        return { done: true }
      }
    }
  })
}).call(obj);

console.log([...obj])
profile
오늘 뭐라도 하나 했다는 것

0개의 댓글