JavaScript - iterable, 유사 배열, Array.from

• 이터러블(iterable): Symbol.iterator가 구현된 객체
• 유사 배열(array-like): 인덱스와 length 프로퍼티가 있어서 배열처럼 보이는 객체

- 문자열의 경우 이터러블 객체이면서 유사배열 객체이다.

- 이터러블 객체라고 해서 유사 배열 객체는 아니다.

- 유사 배열 객체라고 해서 이터러블 객체인 것도 아니다.

- 이터러블과 유사 배열은 배열이 아니기 때문에 push, pop 등의 배열 메소드를 지원하지 않는다.

- 이터러블과 유사 배열에서 배열 메소드를 사용할 수 있는 방법은? Array.from

 

 

- Array.from

• Array.from은 이터러블이나 유사 배열을 받아 Array로 만들어준다.
• 이 과정을 거치면 이터러블이나 유사 배열에서 배열 메소드를 사용할 수 있다.
  • Array.from은 객체를 받아 이터러블이나 유사 배열인지 조사
  • 넘겨 받은 인수가 이터러블이나 유사 배열인 경우, 새로운 배열을 만들고 객체의 모든 요소를 새롭게 만든 배열로 복사

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

let arr = Array.from(arrayLike); // (*)
alert(arr.pop()); // World (메서드가 제대로 동작합니다.)

 

• Array.from 에는 매핑(mapping) 함수를 선택적으로 넘겨줄 수 있다.
  • mapFn을 두번째 인수로 넘겨주면 새로운 배열에 obj의 요소를 추가하기 전에 각 요소를 대상으로 mapFn을 적용할 수 있다.
  • 새로운 배열에는 mapFn을 적용하고 반환된 값이 추가된다.
  • 세번째 인수 thisArg는 각 요소의 this를 지정할 수 있도록 해준다.

Array.from(obj[, mapFn, thisArg]);

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 };
    }
  }
};

for (let num of range) {
  alert(num); // 1, then 2, 3, 4, 5
}

// 각 숫자를 제곱
let arr = Array.from(range, num => num * num);

alert(arr); // 1,4,9,16,25

---

[ 참고자료 ]

https://ko.javascript.info/iterable#array-like

iterable 객체