[JavaScript] Array.from() 과 Array.prototype.map() 비교하기

Array.from() 과 Array.prototype.map() 모두 기존 배열의 각 요소에 함수를 적용해서 새로운 배열을 만든다.

const arr = [0, 1, 2];
const usingFrom = Array.from(arr, (item)=> item + 1);
const usingMap = arr.map((item) => item + 1);
console.log(usingFrom); // [1, 2, 3];
console.log(usingMap); // [1, 2, 3];

그렇다면 Array.from() 과 Array.prototype.map() 의 차이는 무엇일까?

Static Method vs Instance Method

Array.from() 과 Array.prototype.map() 차이는 우선 생김새에서부터 나타난다.
Array.from() 은 Static Method 이기 때문에 instance로 생성된 배열에 대해 사용할 수 없다.

const arr = [1, 2, 3];
// 잘못된 사용
arr.from(); // Uncaught TypeError: arr.from is not a function

// 올바른 사용
const newArr = Array.from(arr);
console.log(newArr); // [1, 2, 3];

Array.prototype.map() 은 Instance Method 이기 때문에 Array에 직접 사용할 수 없고, instance로 생성된 배열에 대해 사용할 수 있다.

const arr = [1, 2, 3];
// 잘못된 사용
Array.map(); // TypeError: Array.map is not a function

// 올바른 사용
const newArr = arr.map((i) => i); 
console.log(newArr) // [1, 2, 3];

With array-like and iterable

Array.from() 는 유사배열 객체, 이터러블 객체를 배열로 바꿔주는 기능을 가지고 있다.

const obj = {'0':'apple', '1':'banana', '2':'carrot', length: 3}; // array-like
const objArr = Array.from(obj);
console.log(objArr); // ["apple", "banana", "carrot"]

const str = "abcde"; // iterable
const strArr = Array.from(str);
console.log(strArr); // ["a", "b", "c", "d", "e"];

Array.prototype.map() 는 유사배열 객체나 이터러블 객체에 대해 사용할 수 없다.

const obj = {'0':'apple', '1':'banana', '2':'carrot', length: 3};
const objArr = obj.map(); // Uncaught TypeError: obj.map is not a function

const str = "abcde";
const strArr = str.map(); // Uncaught TypeError: str.map is not a function

Performance

Array.from() 과 Array.prototype.map() 는 몇가지 차이가 있지만 일반 배열에 대해서는 똑같이 사용할 수 있다.
그렇다면 둘 중 무엇을 사용해야할까?

검사해보자

const fromWrapper = () => Array.from([{"count": 3},{"count": 4},{"count": 5}], x => x.count);
const mapWrapper = () => [{"count": 3},{"count": 4},{"count": 5}].map(item => item.count);

const iterations = 1000000;
console.time('Array.from()');
for(let i = 0; i < iterations; i++){
    fromWrapper();
};
console.timeEnd('Array.from()')

console.time('Array.prototype.map()');
for(let i = 0; i < iterations; i++){
    mapWrapper();
};
console.timeEnd('Array.prototype.map()')

결과

# Google Chrome Version 89.0.4389.90 (Official Build) (x86_64)
Array.from(): 179.098876953125 ms
Array.prototype.map(): 24.609130859375 ms

iterations 가 10 정도로 매우 작은 경우는 from 이 더 빠른데,
iterations 이 좀만 커져도 map이 빨라지는 것을 확인할 수 있다.

고로 둘다 사용할 수 있는 상황에서는 Array.prototype.map() 를 사용하는 것이 좋다

참고

Array.from() - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

stackoverflow : javascript - Array.from vs Array.prototype.map