iterable 객체

iterable 객체

• iterable객체 : ⭐️ 반복이 가능한 객체 ! 배열을 일반화 한 객체 !
  • iterable이라는 개념을 사용 ➡️ 어떤 객체든 ⭐️ for~of문을 적용시킬 수 있다.
  • for~of 반복문은 가장 먼저 symbol.iterator를 호출
    • symbol.iterator를 가지고 있지 않다면 TypeError발생
      ( 해당 오브젝트는 이터러블하지 않다. )
  • 가장 대표적인 이터러블 객체는 배열과 문자열
    • 그럼 배열에만 for~of 문을 사용할 수 있나? ➡️ NO !
  • 그럼 배열이 아닌 객체는 어떻게 이터러블 객체로 만들 수 있을까 ?
    • 아래 symbol.iterator 매서드를 이해해보자 !

Symbol.iterable

• 직접 이터러블 객체를 만들려면 symbol.iterable라는 매서드를 추가해야함 !

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

위 코드는 아직 이터러블하게 동작하지 않음..
➡️ Symbol.iterator 매서드를 이용하여 이터러블하게 변경해보자 !!

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

  [Symbol.iterator]() { //Symbol.iterator 매서드 사용
    this.current = this.from;
    return this;
  }, // 이터레이터 객체를 반환

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

for (let num of range) {
  console.log(num); // 1, 2, 3, 4, 5
}

결과

➡️ iterable 한 객체가 아니지만 range 객체 안에 Symbol.iterator 넣어줌으로써 이터레이터 객체를 반환 ( iterable한 객체로 변환 )

iterable과 유사배열

• 이터러블 ( iterable ) : 매서드 Symbol.iterator가 구현된 객체
• 유사배열 ( array-like ) : 인덱스와 length프로퍼티가 있어서 배열처럼 보이는 객체
• 유사배열이라고 해서 이터러블 객체가 아니며, 이터러블 객체라고 해서 유사배열 객체 또한 아니다 !
  • 위에 range 예시를 봐도 length라는 프로퍼티가 존재하지 않음 !
    ➡️ iterable 객체는 맞지만 유사배열은 아니다.

let arrayLike = { // 인덱스와 length프로퍼티가 있음 ➡️ 유사 배열
  0: "Hello",
  1: "World",
  length: 2
};

// Symbol.iterator가 없으므로 에러 발생 ➡️ iterable 객체가 아니다 
for (let item of arrayLike) {}

• 이터러블과 유사배열은 배열처럼 보이는 것이지 실제 배열이 아님
  ➡️ pop(), push() 등 배열 메서드를 지원하지 않음
  ➡️ 어떻게 하면 배열 메서드를 적용할 수 있을까 ? ⭐️ Array.from ⭐️

Array.from

: 이터러블이나 유사배열을 받아 " 진짜 Array "를 만들어 줌
➡️ 이터러블이나 유사배열에도 배열 메서드를 사용할 수 있는 것 !!

let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

let arr = Array.from(arrayLike); // (*) 진짜 Array를 만들어줌 !!
// [ "Hello","World" ] 
alert(arr.pop()); // World (메서드가 제대로 동작합니다.)

• (*)표시한 줄에 있는 Array.from은 객체를 받아 이터러블이나 유사배열인지 조사
  ➡️ 넘겨받은 인수가 이터러블이나 유사배열인 경우 New array를 만들고 객체의 모든 요소를 New Array에 복사한다.

🧚‍♀️ 오늘 풀이 한 koans Array.from 문제풀이

const argsArr = Array.from(argumentsObj);
expect(Array.isArray(argsArr)).to.deep.equal(true);
expect(argsArr).to.deep.equal(["first", "second","third"]);
expect(argsArr === restParams).to.deep.equal(false);

• expect(Array.isArray(argsArr)).to.deep.equal(true);
  ➡️ argsArr는 배열인가 ? true
• expect(argsArr).to.deep.equal(["first", "second","third"]);
  ➡️ argsArr는 ["first", "second","third"] 이다.
• expect(argsArr === restParams).to.deep.equal(false);
  ➡️ argsArr와 restParams의 주소값이 같은가 ? false ( 겉보기에는 같아도 주소는 다름 !)
• ✨ length가 없는 것으로 보아 iterable 객체는 맞지만 유사배열은 아니다 ❗️