(Javascript) 2차 배열 만드는 방법, 2차 배열의 참조가 같아지는 오류

 

2차 배열에서 주의해야 하는 참조

 

자바스크립트에서 빈 문자열로 2차 배열을 만들어야 한다고 하자 

 

이때 new Array와 full을 이용해 아래와 같은 방법을 생각해 낼 수 있다.

//error! 배열 내부의 참조가 모두 같아져 버린다.
new Array(len1).full(new Array(len2).fill(0))

 

하지만 결론적으로 말하자면 위와 같이 배열을 설정하면 안 된다.

 

그 이유는 배열이 생성되는 과정을 자세히 들여다보면 알 수 있다. 

 

1. new Array(len2).fill(0)가 배열을 생성한다. 

2. new Array(len1)가 배열을 생성한다.

3. new Array(len1)의 fill 함수가 new Array(len2)의 참조로 배열 내부를 채운다.

 

결론적으로 new Array(len1)의 배열 안에 있는 모든 함수가 같은 배열 객체를 가리키게 된다. 

 

참조가 같아지면, 한 배열의 요소를 변경하면 덩달아 다른 배열의 요소도 바뀌어 버리는 황당한 일이 발생한다. 

 

그럼 2차 배열을 올바르게 만드는 방법을 정리해 보겠다.

 

 

 

1. map 활용하기 

한 줄로 간단하게 2차 배열을 만들 수 있다.

 

먼저 새 배열을 만들어 null로 채우고, map을 이용해 새 배열을 할당하는 방식이다.

new Array(len1).fill(null).map(() => new Array(len2).fill(0));

 

 

 

2 . 중첩 for문 활용하기 

2차 배열을 만들 때 가장 잘 알려진 방법이다. 

for (let i = 0; i < len1; i++) {
    array[i] = [];
    for (let j = 0; j < len2; j++) {
        array[i][j] = 0; // 또는 다른 초기 값
    }
}