[JavaScript] Array.from()을 어떻게 활용할까

알고리즘 문제를 풀다 보면 내가 원하는 배열의 길이와 그 원소 값을 가진 배열을 생성해야 하고 싶은 경우가 있다. 이럴 때 가장 자주 사용하던 메소드가 Array.from()이다. 알고리즘 문제를 풀다 보면 가끔 Array.from()을 사용해야 하는 경우가 생기는데, 매번 사용하는 것이 아니다 보니 항상 사용 전에 메소드를 다루는 법에 있어 제대로 사소한 실수들이 잦은 것 같아 머릿속에 뽝! 집어넣을 겸, Array.from()에 대해서 더 많은 정보도 찾아볼 겸, 블로그의 글로 작성해 보았다.  

 

🧐 Array.from()이 무엇일까?

Array.from() 메서드는 유사 배열 객체 또는 이터러블 객체를 전달받아 콜백함수를 통해 배열을 생성하는 메서드이다.

첫 번째 인수로 유사베열 객체 또는 이터러블 객체를 전달받는다. 

💡유사 배열 객체(array like object)? 이터러블 객체(iterable object)?

유사배열객체는 인덱스를 키 값으로 갖고, length 프로퍼티를 갖는 객체를 말한다. map, forEach 같은 배열 메서드는 사용이 불가하지만, for문을 통해 배열처럼 순회가 가능하다. 

이터러블 객체는 Symbol.iterator 메서드를 가지는 객체로, for...of 문을 이용해 순회가 가능하다. 자바스크립트에서는 대표적으로 배열, 문자열, map, set, DOM 컬렉션 등이 있다.  

 

 

💪Array.from()를 사용해보자!

첫 번째 인자로 들어가는 타입도 알아보았으니, 실제로 유사배열 객체와, 이터러블 객체를 넣어 배열을 생성해보겠다. 

 

1. string

const str = Array.from("apple");
console.log(str);
// [ 'a', 'p', 'p', 'l', 'e' ]

 

2. array-like-object

const array_like = Array.from({
  length: 3,
  0: "apple",
  1: "banana",
  2: "grape",
});
console.log(array_like);
// [ 'apple', 'banana', 'grape' ]

 

3. set

const set = Array.from(
  new Set(["apple", "apple", "apple", "banana", "banana"])
);
console.log(set);
// [ 'apple', 'banana' ]

 

4. map

map의 경우는 map.values(), map.keys() 메서드를 통해 map의 값이나 키 값으로만 배열 생성이 가능하다. 

const map = new Map([
  ["first", "apple"],
  ["second", "banana"],
  ["third", "grape"],
]);
const mapArr = Array.from(map);
const keys = Array.from(map.keys());
const values = Array.from(map.values());
console.log(mapArr); // [ [ 'first', 'apple' ], [ 'second', 'banana' ], [ 'third', 'grape' ] ]
console.log(keys); // [ 'first', 'second', 'third' ]
console.log(values); // [ 'apple', 'banana', 'grape' ]

 

 

☝️ mapping 함수를 이용해보자!

Array.from() 메서드는 두 번째 인자에 콜백함수를 전달하면, 첫 번째 인자로 들어온 값을 하나씩 순회하여 콜백함수를 요소에 실행하고, 그 결과 값으로 구성된 배열을 반환한다. 

 

예를 들어, 각각의 인덱스 값을 요소의 값으로 갖는 배열을 만들고 싶다면 Array.from()으로 가능하다.

const mapFn = Array.from(new Array(5), (val, idx) => idx);
console.log(mapFn); // [ 0, 1, 2, 3, 4 ]

 

맵핑 함수의 리턴 값으로 인덱스 값을 줌으로써 해당 요소의 값은 인덱스 값으로 반환되어 그 반환 값으로 배열을 채운다.

이 부분은 배열 메서드 중에 map 메서드와 동일한 기능을 한다. 

 

실제로 알고리즘 문제를 풀때 맵핑 함수를 넣어 배열을 생성해야하는 경우가 자주 있다. 이 방법을 기억해두면 좋다.

 

 

🕵️‍♀️ 성능 측정

공부를 하다보니, 분면 for문을 통해 인덱스 값을 넣는 것보다 가독성있다는 것은 알고있다. 하지만 '성능적으로도 for문보다 Array.from()을 사용하는 것이 더 나은 것일까?' 라는 생각이 문득 들었다. 그래서 한번 확인해보았다. 

 

성능 측정은 따로 사이트를 사용하지 않고, performance.now() 함수를 사용하여 코드의 시작과 끝의 시간 차를 측정하여 실험해보았다.

 

1. for문을 사용

const startTime = performance.now();
const test1Arr = [];
for (let i = 0; i < 5; i++) {
  test1Arr.push(i);
}
console.log(test1Arr);

const endTime = performance.now();
const elapsedTime = endTime - startTime;

console.log(`코드 실행에 걸린 시간: ${elapsedTime} 밀리초`);

// [ 0, 1, 2, 3, 4 ]
// 코드 실행에 걸린 시간: 3.7344000339508057 밀리초

 

2. Array,from()을 사용

const startTime = performance.now();
const test2Arr = Array.from(new Array(5), (val, idx) => idx);
console.log(test2Arr);
const endTime = performance.now();
const elapsedTime = endTime - startTime;

console.log(`코드 실행에 걸린 시간: ${elapsedTime} 밀리초`);

// [ 0, 1, 2, 3, 4 ]
// 코드 실행에 걸린 시간: 3.807700037956238 밀리초

 

공정성을 위해서 여러 번 돌려보았지만., 엎치락뒤치락 비슷비슷한 실행 시간을 보여주었다. 위에 적힌 실행결과는 Array.from()이 걸린 것처럼 보이지만, 다른 시도에서는 for문이 더 걸릴 때도 있었다! 결론은 둘 다 비슷한 것 같다!!(⭐)

 

그렇다면 for문보다 Array.from()을 사용하는 것이 가독성이 좋기 때문에 같은 상황에서 Array.from()을 이용해야겠다!!

---

Array.from() 메서드에 대해 조사하다보니, map과 set 뿐만 아니라 문자열까지도 배열로 만들 수 있다는 점을 배웠다.

더 알아보고 다니 더 다양한 경우에도 아주 유용할 것 같다.  

 

 

 

📑참고자료

• 모던 자바스크립트 Deep Dive, 이웅모