[Js] 2차원 배열 new Array().fill()로 값 할당할 때 주의할 점

요새 프론트엔드가 js로 코딩테스트 보는게 많아져서 

js로 여러 알고리즘 문제를 풀고있는데...

 

알고리즘 문제를 풀다보면 배열을 초기화 해놓고 그 배열을 이용하는 경우가 많다.

그래서 js도 배열을 초기화하는 메서드 fill 이 있길래 그걸 주로 이용했엇는데

2차원 배열에선 절대 사용하면 안되는걸알았다...

 

let arr = new Array(4).fill([]);

for(let i=0;i<4;i++){
    for(let j=0;j<5;j++){ 
        arr[i][j]= i*j;
    }
}

console.log(arr);

arr이 뭐가 출력될거 같은가?

0 0 0 0 0

0 1 2 3 4

0 2 4 6 8

0 3 6 9 12

 

난 당연히 위와같이 될줄 알았다.

웬걸, 

콘솔에 찍어보면 

이렇게 나옴..

 

 

이유는 fill 메서드가 얕은 복사로 값을 채우기 때문에 빈 배열이 들어가게 되면 같은 주소값을 띄게되어

모든 행이 같은 값을 띄게 된다는 것이다...

한마디로 말하면 fill 사용시 같은 동일한 메모리를 가르키는 참조를 넣어준다...

 

이거 몰라서 진짜 개고생했음.. 

 

그래서 어떻게 초기화 할 수 있냐!

let arr = Array.from({ length: 4 }, () => []);

이렇게 하면 [[],[],[],[]] 형태로 초기화 할 수 있다. 

진짜 js는 알아도 알아도 끝이 없다 ㅠㅠ