new Array와 Array.from의 차이점

미로 찾기 관련 DFS 문제를 풀다가,

이미 방문했던 곳을 다시 방문하지 않기 위해 방문 내역을 저장하기 위한 배열을 구현하던 도중 

new Array와 Array.from의 차이점에 대해 알게 되어 이에 대해 예를 들어 포스팅해본다.

 

1차원 배열의 경우

먼저 일반적인 new Array / Array.from으로 배열 길이가 n이며, 0으로 채운 배열을 만든다고 한다면 다음과 같다.

const n = 2
let arr1 = new Array(n).fill(0) // [0,0]
let arr2 = Array.from({length : n}, ()=> 0) // [0,0]

new Array 객체를 사용한 방식의 경우, 숫자를 인자로 받아 해당 숫자만큼의 길이를 가진 배열을 생성한다. (fill은 배열을 채우는 메서드)

Array.from 메서드를 사용한 방식의 경우, "length"속성을 이용하여 배열의 크기를 결정하게 되는데, 두번째 인자의 경우 각 배열에서 실행되는 함수라고 볼 수 있다. 

만약 두 변수의 값을 다른 값으로 변경시킨다고 할지라도 아래와 같이 정상적으로 수정되는 것을 볼 수 있다.

arr1[0] = 3
arr2[0] = 3
console.log(arr1,arr2) // [3,0] [3,0]

 

2차원 배열의 경우

위와 같은 방식으로 new Array / Array.from을 활용하여 2차원 배열을 생성하는 방법은 다음과 같다.

let arr3 = new Array(3).fill(new Array(2).fill(0))
console.log(arr3) // [[0, 0], [0, 0], [0, 0]]

let arr4 = Array.from({length 3}, () => new Array(2).fill(0))
console.log(arr4) // [[0, 0], [0, 0], [0, 0]]

그리고 위와 같은 두 배열에서 index 가 0인 배열에서 첫번째 요소를 1로 수정하는 경우에 대해 비교해보면 아래와 같은 결과가 나온다.

let arr3 = new Array(3).fill(new Array(2).fill(0))
arr3[0][0] = 1
console.log(arr3) // [[1, 0], [1, 0], [1, 0]]

let arr4 = Array.from({length : 3}, () => new Array(2).fill(0))
arr4[0][0] = 1
console.log(arr4) // [[1, 0], [0, 0], [0, 0]]

 new Array의 경우, index 0의 요소뿐만 아니라, 다른 값들도 모두 [1,0]으로 바뀐 것에 반해,

Array.from의 경우, index 0의 요소만 변경되었다.

 

new Array 는 배열이 생성될 때 각 행은 동일한 배열 객체를 참조한다.

따라서 한 행의 값을 변경하면 다른 행도 함께 변경된다는 특징이 있다.

 

Array.from 은 배열의 각 행이 독립적인 새로운 배열 객체를 참조한다.

따라서 한 행의 값을 변경해도 다른 행에 영향을 주지 않는 특징이 있다.

 

요약하자면, new Array의 경우는 주어진 길이의 빈 배열을 생성할 때 사용하는 것이 적합하며,

Array.from은 객체의 'length'속성과 초기화 함수를 사용하여 배열을 생성한다.

따라서, 독립적인 서브 배열을 생성해야 하는 경우에는 Array.from이 적합하다.