개요
- 빈 배열이나 새로운 배열을 만들 때 보통 사람들은 new Array나 Array.from을 많이 사용한다.
- 거기서 빈 2차원배열을 만들 때의 둘의 차이점을 알아보도록 하겠다.
어떤 점이 다른지
1. new Array
보통 코딩테스트에서 빈 배열안에 n개의 여러 값들을 넣기 위해 사용한다.
const newArr = new Array(3).fill(3);
console.log(newArr); // [3,3,3]이런식으로 new Array(배열의 크기)를 지정하여 새로운 배열을 만든 후 fill 함수를 이용해 값을 채워준다.
2. Array.from
const newArr = Array.from({length: 3}, () => 3);
console.log(newArr); // [3,3,3]비슷한 방식으로 1차원 배열을 만들 수 있다.
2차원 배열 만들기
const arr1 = new Array(3).fill([]);
const arr2 = Array.from({ length: 3 }, () => []);
arr1[0].push(1);
arr2[0].push(1);
console.log(arr1); // [ [ 1 ], [ 1 ], [ 1 ] ]
console.log(arr2); // [ [ 1 ], [], [] ]필자는 new Array로도 될 줄 알았다..
하지만 결과는 위와 같이 나오게 되었다.
사실 이건 new Array와 Array.from이 문제가 아니라 fill의 문제이긴하다.
평소에 풀 때는 원시값(문자열, 숫자) 등으로 값들을 채워서 알아차리지 못했지만 fill은 얕은 복사로 값들을 채우기 때문에 채워진 빈 배열은 같은 주소를 띄고 있다.
그래서 0의 자리에 있는 배열에 1을 채워도 나머지 배열에 1이 추가되는 것이다.
Array.from도 기본은 얕은 복사지만 배회가능한 객체 (map, set), length가 있는 객체(array등)은 새 Array를 반환한다는 조건으로 인해 저런 식으로 할 수 있게 된다.
이제 헷갈리지않고 Array.from으로 2차원 배열을 만들도록 해야겠다.
참고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
backend-developer