[JS] 값을 쪼개서 배열로 만드는 방법 | Array.from 메서드

Array.from()

문자열 등 이터러블 객체나 NodeList 유사 배열 객체를 각 배열 요소로 쪼개는 기능을 하는 메서드 

MDN에 보면 Array.from 메서드의 다양한 활용에 대한 설명도 많이 있다.

Array.from() - JavaScript | MDN

 

기본 구조

    표시된 것은 optional 이며, 필요할 때 선택해서 사용하면 된다.

Array.from(iterable, mapFn, thisArg);

• iterable : 변환할 iterable 객체가 들어온다.
• mapFn: 각 요소를 변환하는 함수로, 인자로 element, index를 받는다.
  • element :  배열에서 처리되는 현재 요소
  • index : 배열에서 처리하기 위한 현재 요소의 인덱스
• thisArg : mapFn실행 시에 this로 사용할 값

 

사용법

(1) 문자열인 경우

보통 1의 목적을 위해 주로 사용되는 것 같다.

문자열을 각 배열로 쪼개야 하는 경우 다음 같이 작성할 수 있다. 

Array.from("foo");
// [ "f", "o", "o" ]

 

(2) 배열인 경우

2번째 인자를 이용해 배열 요소 각각에 대한 연산 기능을 수행할 수 있다.

Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

 

또는 아래같이 첫번째 인자로 길이값을 받고, 기본값으로 0부터 길이가 5인 인덱스를 출력시킬 수도 있다.

Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

 

혹은 3번째 인자를 이용해 2번째 인자로 전달한 함수 내에서 this로 사용할 값을 참조할 수도 있다.

const obj = {
  factor: 2,
  multiply: function (x) {
    return x * this.factor;
  }
};

const numbers = [1, 2, 3, 4];

// mapFn 내에서 this.factor를 사용하고자 할 때 thisArg를 설정
const multiplied = Array.from(numbers, function (x) {
  return this.multiply(x);
}, obj);