[JavaScript] Array.from()으로 배열 만들기

Array.from()

Array.from() 함수는 알고리즘 문제를 풀면서 보통 두 가지 기능이 필요할 때 사용한다.

1. 문자열이나 정수 값을 배열로 반환할 때

2. 순회할 때

 

 

 

구문

Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

 

arrayLike - 배열로 변환할 객체

mapFn - 배열에 각 요소를 생성하는 함수 (두 개의 매개변수 배열의 각 요소, 현재 요소의 인덱스를 받는다.)

thisArg - mapFn 실행시 this로 사용할 값

 

 

Array.from(obj, mapFn, thisArg)는 Array.from(obj).map(mapFn, thisArg)와 동일한 결과를 가져올 수 있다.

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

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

 

 

 

예제

1. 문자열을 배열로 반환

Array.from("hello");
//Output: ["h", "e", "l", "l", "o"]

 

2. 배열 연산

Array.from([1, 2, 3], (x) => x * x);
//Output: [1, 4, 9]

 

3. 순회

const originalArray = Array.from({ length: 5 }, (_, index) => index + 1);

console.log(originalArray);
//Output: [1, 2, 3, 4, 5]

 

 

 

알고리즘 문제를 1차적으로 for문으로 풀어보고 2차로 Array.from()를 활용해 다시 풀어보았다.

 

프로그래머스⎜배열 만들기 1

• 문제 설명

• 정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요.

 

• 제한 사항

• 1 ≤ n ≤ 1,000,000
• 1 ≤ k ≤ min(1,000, n)

 

for문

function solution(n, k) {
  const result = [];
    for(let i = 1; i <= n; i++) {
        if (i % k === 0) {
            result.push(i)
        }
    }
  return result;
}

 

 

Array.from()

function solution(n, k) {
  return Array.from({ length : n }, (_, index) => index + 1).filter(number => number % k === 0)
}

console.log(solution(10, 3))
//Output: [3, 6, 9]

 

 

• 풀이

Array.from({ length: n }, (_, index) => index + 1)

 

(_, index)

위의 코드에서 _는 첫 번째 매개변수인 현재 요소로, "사용하지 않는 매개변수"를 나타내는 관례적인 표현이다. 코드를 읽는 사람에게 해당 매개변수를 사용하지 않겠다는 의미를 전달한다. 코드의 의도를 명확히 하기 위한 관례적인 표현이므로 _ 대신 다른 변수명을 사용해도 문법적으로는 문제가 없다고 한다.

 

(_, index) => index + 1)

요소 자체를 사용하지 않고 인덱스만 사용하여 각 인덱스에 1을 더해 배열을 생성한다.

 

 

 

Array.from()의 장점

Array.from()는 간결하고 가독성이 좋다.

반복문을 사용하지 않고도 변환된 값으로 새로운 배열을 생성할 때 유용하다.

로직이 간단하여 유지보수를 수행할 때 코드를 이해하기 쉽다.

 

 

 

 

 

 

참고

MDN https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from

 

블로그 https://ziszini.tistory.com/174