B23 : iterable 객체

목차

1. iterable 객체

    1-1. iterable 객체의 개념

    1-2. iterable 개념 이해해보기

2. 내장 이터러블

3. Array.from으로 Array 만들기

---

1. iterable 객체

1. iterable 객체의 개념

iterable 객체는 배열을 일반화한 객체이다.

• 반복할 수 있는 구조의 객체이다.
• 대표적으로 배열, 유사배열, 문자열, map, set 등이 있다.
• 이터레이션(Symbol.iterator)함수를 가져야한다.
• for..of 문법을 적용하여 순회를 할 수 있다.

2. iterable 개념 이해해보기

우선 이터러블이라는 개념에 대해 이해할 필요가 있다.

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

객체 range는 1부터 5까지의 간격을 나타낸다.

여기에 Symbol.iterator(특수 내장 심볼) 메서드를 추가하면 이터러블로 만들 수 있다.

 

for..of가 동작하도록 하는 Symbol.iterator 메서드를 추가해보자.

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

// range에 아래와 같이 기능하는 함수 Symbol.iterator를 추가해봤다.
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) {
  alert(num);
}

기존에 존재하던 객체 range에는 여전히 메서드 next()가 없지만,

추가한 이터레이터 객체가 가진 메서드 next()로 반복에 사용될 값을 만들어내고 있다.

 

반복 대상의 객체와, 반복을 하는 이터레이터 객체를 분리한 것이다.

 

[Symbol.iterator]를 range에 포함시켜도 그런 방향으로 기능하는 것은 여전하다.

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, 2, 3, 4, 5
  }

 

---

2. 내장 이터러블

배열과 문자열은 많이 쓰이는 내장 이터러블이다.

for (let char of "test") {
  alert(char);	// t, e, s, t
}

내부적으로 이터레이터를 가지고 있기에 이터러블 객체인 것이다.

 

우리는 내장 이터러블이 가지고 있는 이터레이터를 명시적으로 호출해 볼 수도 있다.

let str = 'hello';

let iterator = str[Symbol.iterator]();

while(true) {
  let result = iterator.next();
  if(result.done) break;
  console.log(result.value);	// h, e, l, l, o
}

 

이터레이터를 명시적으로 호출하는 경우는 거의 없으나, 명시적으로 호출하였을 경우 for..of문을 사용하는 것보다

반복을 더 세세하게 통제할 수 있다는 장점이 있다.

 

---

3. Array.from으로 진짜 Array 만들기

메서드 Array.from으로 이터러블이나 유사 배열을 받아 진짜 Array를 만들 수 있다.

이를 통해 이터러블이나 유사 배열에 배열 메서드를 사용할 수 있게 된다.

// Array.from(유사배열)
let arrayLike = {
  0: "Hello",
  1: "World",
  length: 2
};

let arr = Array.from(arrayLike);
console.log(arr.pop());	// World

// Array.from(이터러블)
let arr = Array.from(range);
console.log(arr);	// 1, 2, 3, 4, 5

 

Array.from 메서드는 객체를 받아 이터러블/유사배열인지 조사한다.

넘겨 받은 인수가 이터러블이나 유사배열이 맞다면, 새로운 배열을 생성하고, 객체의 모든 요소를 배열로 복사한다.

 

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

const multiplier = {
  factor: 3,
};

const str = "12345";

const arr = Array.from(
  str,	//  1. 배열로 만들 이터러블
  function(char) { return Number(char) * this.factor; },  // 2. 각 요소에 적용할 함수(this가 multiplier를 가리킴)
  multiplier	// 3. 각 요소에 this를 지정
};

console.log(arr);  // [3, 6, 9, 12, 15]

• obj : 배열로 만들 이터러블/유사 배열
• mapFn : 각 요소에 적용할 함수
• thisArg : 각 요소의 this를 지정

 

 

 

 

 

참고

https://ko.javascript.info/iterable