Array로 생성한 배열은 모든 요소가 같은 배열을 참조한다?

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

기존 코드

function solution(arr1, arr2) {
    let answer = Array(arr1.length).fill([]);
    arr1.forEach((arr, i) => {
        arr.forEach((arrItem, j) => {
            answer[i].push(arrItem + arr2[i][j]);
        })
    })
    return answer;
}

예상과 달리 각각의 배열로 들어가지 않고 모두 같은 배열로 들어가는 문제가 발생했습니다.

❌ Array(length).fill([ ]) 사용의 문제점

value가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조합니다.

따라서 fill([ ])을 사용하면 모든 요소가 동일한 배열을 참조하게 됩니다.

몇 번째 인덱스의 배열이든 모든 요소가 동일한 배열을 참조하므로 answer[i].push()를 실행할 시 모든 행에 동일한 변경이 적용되는 문제가 발생합니다.

Array.prototype.fill() - JavaScript | MDN

Array 인스턴스의 fill() 메서드는 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경합니다. 그리고 수정된 배열을 반환합니다.

developer.mozilla.org

✅ Array.from( )

Array.from({ length: N }, () => [])를 사용하면 각 행이 독립적인 배열이 됩니다.

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

이렇게 각 요소에 대해 ( ) => [ ]가 호출되므로, 매번 새로운 빈 배열을 반환합니다.

이 때 계속해서 새로운 빈 배열이므로 모두 서로 다른 메모리 주소를 참조하게 됩니다.

이렇게 각 요소로 잘 들어간 모습을 확인할 수 있습니다.

FrontEnd-Dev