Array.from() 을 사용하면 다양한 값으로 배열을 채울 수 있다.

  1. 첫번째 매개변수로 arrayLike(유사 배열 객체) 혹은 반복 가능한 객체 를 전달하면 이를 얕게 복사해서 새로운 Array 객체를 만든다.
  2. optional 매개변수로 mapFn(매핑함수) 콜백을 전달할 수 있는데, 중간에 다른 배열을 생성하지 않는다는 점을 제외하면 Array.from(obj).map(mapFn, thisArg) 와 같다.

1차원 배열

하나의 수로 채우기

const n = 5;
const arr = Array.from({ length: n }, () => 0); // 0으로 초기화
console.log(arr); // [0, 0, 0, 0, 0]

ES6에서 도입된 Array.fill() 메소드를 사용하여 배열을 한번에 채우는 방법도 있다.

const n = 5;
const arr = Array(n).fill(Infinity); // 무한대로 초기화
console.log(arr); // [Infinity, Infinity, Infinity, Infinity. Infinity]

1씩 증가하는 배열 만들기

1씩 증가하는 배열을 만들고 싶다면 Array.map() 의 두번째 인자인 index를 활용하면 된다.

const n = 5;
const arr = Array.from({ length: n }, (x, i) => i); // 0부터 1씩 증가
console.log(arr); // [0, 1, 2, 3, 4]
const n = 5;
const arr = Array.from({ length: n }, (x, i) => i + 1); // 1부터 1씩 증가
console.log(arr); // [1, 2, 3, 4, 5]

0부터 1씩 증가하는 배열을 만들 때 Array.keys() 로 배열의 인덱스를 추출하여 만들 수도 있다.

const n = 5;
const arr = Array.from(Array(n).keys());
console.log(arr); // [0, 1, 2, 3, 4]

2부터 2씩 증가하는 배열은 다음과 같이 만들면 된다.

const n = 5;
const arr = Array.from({ length: n }, (x, i) => (i + 1) * 2); // 2부터 2씩 증가
console.log(arr); // [2, 4, 6, 8, 10]

2차원 배열

빈 배열로 채우기

const n = 5;
const arr = Array.from({ length: n }, () => []);
console.log(arr); // [[], [], [], [], []]

하나의 수로 채우기

그래프 탐색, 최소 비용 알고리즘 등에 많이 사용된다.

const n = 5;
const arr = Array.from({ length: n }, () => Array(n).fill(Infinity));
console.log(arr);
/* [[Infinity, Infinity, Infinity, Infinity. Infinity],
    [Infinity, Infinity, Infinity, Infinity. Infinity],
    [Infinity, Infinity, Infinity, Infinity. Infinity],
    [Infinity, Infinity, Infinity, Infinity. Infinity],
    [Infinity, Infinity, Infinity, Infinity. Infinity]] */

참고