new Array().fill()과 Array.from()의 차이

코딩테스트 문제를 풀던 중, new Array().fill()함수와 Array.from()함수의 차이가 궁금하여 이 글을 작성하게 되었다.

javascript에서 배열을 초기화 시킬 때, 두 가지 방법을 사용할 수 있다.

const arr1 = new Array(5).fill([]);
const arr2 = Array.from({length: 5}, () => []);

배열을 초기화시킨 뒤, 콘솔에 출력해보면 두 배열이 같다고 생각할 수 있다.

하지만 큰 차이가 존재한다. new Array().fill() 함수의 인자로 객체나 배열이 들어올 경우 모든 요소가 같은 객체나 배열을 참조하게 된다.
그렇기 때문에 각 배열의 한 요소에 특정 값을 push하게되면 하단의 결과가 나오게 된다.

arr1[0].push(1);
arr2[0].push(1);

그럼 각각의 방법을 언제 사용해야할까 ?

Array.from()

1. 인덱스를 이용하여 초기화 시켜야할 때.

const arr = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(arr); // [0, 2, 4, 6, 8]

2. 배열의 요소를 객체나 배열로 초기화 시켜야할 때.

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

new Array().fill()

1. 기본 자료형으로 초기화할 때.

• 숫자, 문자열, null, undefined 등 기본 자료형으로 배열을 초기화할 때 fill을 사용하는 것이 간단하고 효율적이다.