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];
JavaScript
복사
그렇다면 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];
JavaScript
복사
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];
JavaScript
복사
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"];
JavaScript
복사
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
JavaScript
복사
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()')
JavaScript
복사
결과
# Google Chrome Version 89.0.4389.90 (Official Build) (x86_64)
Array.from(): 179.098876953125 ms
Array.prototype.map(): 24.609130859375 ms
Bash
복사
iterations 가 10 정도로 매우 작은 경우는 from 이 더 빠른데,
iterations 이 좀만 커져도 map이 빨라지는 것을 확인할 수 있다.
고로 둘다 사용할 수 있는 상황에서는 Array.prototype.map() 를 사용하는 것이 좋다
