JavaScript Array.from()란 무엇인가?

1. JavaScript 배열 Array.from() 메서드 소개

ES5에서 배열과 유사한 객체에서 배열을 생성하려면 모든 배열 요소를 반복하고 다음과 같이 중간 배열에 각 요소를 추가합니다.

function arrayFromArgs() {
    var results = [];
    for (var i = 0; i < arguments.length; i++) {
        results.push(arguments[i]);
    }
    return results;
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);

Output:

[ 'Apple', 'Orange', 'Banana' ]

더 간결하게 만들기 위해 다음과 같이 Array.prototype의 slice() 메서드를 사용할 수 있습니다.

function arrayFromArgs() {
    return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);

ES6은 배열과 유사하거나 반복 가능한 객체에서 Array의 새 인스턴스를 생성하는 Array.from() 메서드를 도입했습니다. 다음은 Array.from() 메서드의 구문을 보여줍니다.

Array.from(target [, mapFn[, thisArg]])

이 구문에서:

• target은 배열로 변환할 배열과 유사하거나 반복 가능한 객체입니다.
• mapFn은 배열의 모든 요소를 호출하는 맵 함수입니다.
• thisArg는 mapFn 함수를 실행할 때의 this 값입니다.

Array.from()은 대상 객체의 모든 요소를 포함하는 Array의 새 인스턴스를 반환합니다.

 

2. JavaScript Array.from() 사용방법

Array.from() 메서드를 사용하는 몇 가지 예를 살펴보겠습니다.

 

A) 배열과 유사한 객체에서 배열 생성 방법

다음 예제에서는 Array.from() 메서드를 사용하여 함수의 arguments 객체에서 새 배열을 만듭니다.

function arrayFromArgs() {
    return Array.from(arguments);
}

console.log(arrayFromArgs(1, 'A'));

Output:

[ 1, 'A' ]

이 예에서는 arrayFromArgs() 함수의 인수에서 배열을 만들고 배열을 반환합니다.

 

B) 매핑 함수가 있는 JavaScript 배열 Array.from() 사용법

Array.from() 메서드는 생성 중인 배열의 모든 요소에 대해 매핑 함수를 실행할 수 있는 콜백 함수를 허용합니다. 다음 예를 참조하십시오.

function addOne() {
    return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));

Output:

[ 2, 3, 4 ]

이 예에서는 addOne() 함수의 각 인수를 하나씩 증가시키고 결과를 새 배열에 추가합니다.

 

C) this 값이 있는 JavaScript 배열 Array.from() 사용법

매핑 함수가 객체에 속한 경우 선택적으로 세 번째 인수를 Array.from() 메서드에 전달할 수 있습니다. 객체는 매핑 함수 내에서 이 값을 나타냅니다. 다음 예를 고려하십시오.

let doubler = {
    factor: 2,
    double(x) {
        return x * this.factor;
    }
}
let scores = [5, 6, 7];
let newScores = Array.from(scores, doubler.double, doubler);
console.log(newScores);

Output:

[ 10, 12, 14 ]

 

D) 반복 가능한 객체에서 배열 생성 방법

Array.from() 메서드는 반복 가능한 객체에서도 작동하므로 이를 사용하여 [symbol.iterator] 속성이 있는 모든 객체에서 배열을 만들 수 있습니다. 예를 들어:

let even = {
    *[Symbol.iterator]() {
        for (let i = 0; i < 10; i += 2) {
            yield i;
        }
    }
};
let evenNumbers = Array.from(even);
console.log(evenNumbers);

Output:

[0, 2, 4, 6, 8]

 

이 예에서:

• 먼저 0부터 10까지의 짝수를 반환하는 [System.iterator]로 짝수 객체를 정의합니다.
• 그런 다음 Array.from() 메서드를 사용하여 짝수 객체에서 짝수의 새 배열을 만듭니다.

 

 

이 자습서에서는 JavaScript Array Array.from() 메서드를 사용하여 배열과 유사하거나 반복 가능한 객체에서 배열을 만드는 방법을 배웠습니다.

 

 

Reference: https://www.javascripttutorial.net/es6/javascript-array-from/