배열 초기화: Array.fill()과 Array.from()의 차이

배열을 초기화할 때 다음과 같은 두 가지 방식을 쓸 수 있다. 

 

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

 

똑같은 배열이 생성된 것 같지만, 차이가 있다. Array.fill()의 인자로 "객체가 들어올 경우, 그 참조만 복사해서 배열을 채운다." (출처: mdn) 무슨 말인고 하니 위의 arr1의 요소는 모두 같은 주소값을 가지고 있다는 뜻이다. 그렇기 때문에 빈 배열에 push를 해보면 다음과 같은 결과가 나온다. 

 

 

Array.fill()에 객체가 바로 들어올 때 발생하는 문제이기 때문에 다음과 같이 fill() 메소드로 원시값을 먼저 채워준 다음에 map 메소드로 배열로 바꿔주는 경우에는 이러한 문제가 발생하지 않는다. 

let arr3 = new Array(5).fill(0).map(x => [])