[JavaScript] iterable

JavaScript에서 iterable 객체는 배열을 일반화만 객체로, for ... of 를 사용할 수 있는 것이 특징입니다. 

 

1. Symbol.iterator

객체에 Symbol.iterator라는 메서드를 추가하게 되면 그 객체는 반복 가능한 객체가 됩니다.

 

for ... of 문이 시작되면 for ... of는 Symbol.iterator를 호출하는데, Symbol.iterator가 없으면 에러를 발생시킵니다.

Symbol.iterator가 추가되지 않은 다음 코드를 작동시키면 아래와 같은 결과가 나옵니다.

let range = {
    from :1,
    to: 5,

}


for(let num of range){
    console.log(num);
}

 

 

객체에 Symbol.iterator는 다음과 같이 추가해줄 수 있습니다.

let range = {
    from :1,
    to: 5,

}

range[Symbol.iterator] = function() {
    return {
        current: this.from,
        last: this.to,

        next(){
            if(this.current<=this.last){
                return {
                    done:false,
                    value:this.current++,
                }
            }
            else{
                return {
                    done:true,
                }
            }
        }
    }
}

for(let num of range){
    console.log(num);
}

이 때 Symbol.iterator는 iterator 객체를 반환해야 합니다.

iterator 객체는 next 메서드가 있는 개체를 의미한다고 합니다.

여기서 next()의 반환 값은 

{done: Boolean, value: any}

와 같은 형태이여햐 합니다.

done=true이면 반복이 종료되었다는 의미이고, false인 경우에는 value에 다음 값이 저장됩니다.

이러한 iterator를 코드로 작성해 객체에 추가한 것이 위의 예제 코드입니다.

실행을 시켜보면 from 값인 1부터 반복할 때마다  last 값인 5일 떄까지 current 값을 1씩 증가시켜 1부터 5까지를 차례대로 출력하는 것을 보실 수 있습니다.

코드를 아래와 같이 변경하면 range 객체 자체를 iterator로 변경할 수 있습니다.

let range = {
  from: 1,
  to: 5,

  [Symbol.iterator]() {
    this.current = this.from;
    return this;
  },

  next() {
    if (this.current <= this.to) {
      return { done: false, value: this.current++ };
    } else {
      return { done: true };
    }
  }
};

 

2. 유사 배열

유사배열은 인덱스: 값 관계의 프로퍼티가 있고, length 프로퍼티를 갖는 객체를 의미합니다.

예를 들자면 아래 코드와 같습니다.

let arrayLike={
    0:'사과',
    1:'바나나',
    length:2,
}

 

3. Array.from

Array.from을 이용하면 이터러블이나 유사 배열을 진짜 배열로 바꿔줄 수 있습니다.

위에서 선언한 range와 arrayLike를 Array.from을 이용해서 변환한 후, 그 값을 확인해보겠습니다.

const range_arrayFrom=Array.from(range);
const arrayLike_arrayFrom=Array.from(arrayLike);

console.log(range_arrayFrom);
console.log(arrayLike_arrayFrom);

 

참고

https://ko.javascript.info/iterable

iterable 객체