(Javascript) iterable, 유사 배열(arraylike)의 차이점, 사용법

 

 

유사배열과 iterable의 설명을 보다 보면 비슷하면서 다르기에 꽤나 헷갈린다.

 

이번 포스팅에서는 iterable과 유사배열의 차이를 확실히 정리하고자 한다. 

 

 

iterable이란?

 

iterable을 직역하면 반복이 가능하다는 뜻이다. 

 

이 말 그대로, 반복이 가능한 객체를 iterable로 부른다.

 

iterable 객체에는 문자열, 배열, map, set 등이 있다.

 

iterable이 되려면 특정 조건을 충족해야 한다. 

 

가장 중요한 조건은 for...of를 사용할 수 있어야 한다는 것인데,

 

for... of를 사용할 수 있으려면 해당 객체 내에 메서드 Symbol.iterator가 구현되어 있어야 한다.

 

for... of를 사용하면 객체 Symbol.iterator가 자동으로 호출된다.

 

 

[Symbol.iterator 메서드 조건]

• return 값 : iterater 객체
  • iterater객체는 next() 메서드를 가져야 한다.
  • next() 메서드는 {done: Boolean, value: any} 형식의 객체를 반환
    
    • done: false인 경우, value가 다음 값이 됨
    • done: true은 반복을 끝냄

 

Symbol.iterator 메서드를 직접 구현해 Iterable 객체를 직접 만들 수도 있다.

const iterableObject = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 5) {
          return { value: step, done: false };
        } else {
          return { value: undefined, done: true }; 
        }
      }
    };
  }
};

for (const value of iterableObject) {
  console.log(value); // 1, 2, 3, 4, 5
}

 

 

 

유사 배열(array-like)이란?

유사 배열(array-like)은 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체이다.

 

배열과 유사한 특징을 지니지만, 배열은 아니기에 배열 매서드(pop, push)등을 사용할 수 없다.

 

유사배열에는 문자열, arguments 객체, NodeList 객체 등이 있다.

 

유사배열이지만 iterable이 아닌 객체에 for... of를 사용하면 Symbol.iterator가 없기 때문에 에러가 발생한다.

 

유사배열을 배열처럼 사용하고 싶으면 Array.from을 사용해 배열로 변환하면 된다. 

 

let arrayLike = {
  0: "array",
  1: "like",
  length: 2
};

for (let item of arrayLike) {
  console.log(item); //Symbol.iterator가 없으므로 에러 발생
}

let arr = Array.from(arrayLike); //Array.from을 사용해 유사배열을 배열로 변환

for (let item of arr) {
  console.log(item); //잘 작동함
}

 

 

 

정리

결국 정리하면 아래와 같다.

• iterable : Symbol.iterator가 구현되어 있어서 ,for...of를 사용할 수 있는 객체
• array-like : index, length 프로퍼티를 가지고 있는 객체