[JavaScript] Array.fill 과 Array.from 차이?

 

프로그래머스에서 2022 KAKAO BLIND RECRUITMENT Lv3.양과 늑대 를 풀면서 겪은 문제에 대해 정리하고자 한다.

 

https://school.programmers.co.kr/learn/courses/30/lessons/92343

프로그래머스

 

 

해당 문제를 풀면서 초반에 아래와 같은 코드를 작성했었다.

function solution(info, edges) {
    var answer = 0;
    var link = Array(info.length).fill([]);
    
    edges.forEach(v => {
        var [parent, child] = v;
        link[parent].push(child);
    });
    
    console.log(link);
    
    return answer;
}

 

입력값의 예시는 다음과 같다. 

info	edges
[0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1]	[[0,1],[1,2],[1,4],[0,8],[8,7],[9,10],[9,11],[4,3],[6,5],[4,6],[8,9]]

 

내가 기대했던 link의 출력값은 link에서 parent에 해당하는 인덱스 위치의 배열에 child값이 push된 것이었다. 

[
[ 1, 8 ],
[ 2, 4 ],
[],
[],
[ 3, 6 ],
[],
[ 5 ],
[],
[ 7, 9 ],
[ 10, 11 ],
[],
[]
]

 

하지만 위의 코드는 다음과 같은 출력이 나왔다.

[
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ],
[ 1, 2, 4, 8, 7, 10, 11, 3, 5, 6, 9 ]
]

 

이상한 결과에 당황해서 link[parent].push(child);가 아닌 link[parent]=child;로 할당을 해보았다. 

그랬더니 전체 배열에 할당되는 것이 아니라 하나하나 잘 들어가는 것이다. 

[ 8, 4, [], [], 6, [], 5, [], 9, 11, [], []]

 

 

 

어떠한 이유에서 push를 하면 전체 배열에 작동하는 것인가 싶어서 구글링을 해봤지만 아쉽게도 정확하게 알아내지는 못했다.

하지만 개인적인 생각으로는 Array.fill()로 빈 배열을 할당하게 되면 동일한 주소값을 가지고 있는 배열이 할당되어, push를 하게 되면 전체적으로 적용되는 것이 아닌가 싶다. 

정확한 원인을 파악하고 싶은데 알 수 없어 답답한 심정일 뿐이다.. 

혹시 이에 대한 원인을 아시는 분은 댓글 주시면 무한한 감사드리겠습니다. 

 

 

결론적으로 Array.fill의 문제를 해결하기 위해 Array.from를 사용하여 코드를 작성하였고, 원하던 출력 결과를 얻을 수 있었다.

function solution(info, edges) {
    var answer = 0;
    var link = Array.from({length:info.length}, ()=>[]);
    
    edges.map(v => {
        var [parent, child] = v;
        link[parent].push(child);
    });
    
    return answer;
}