[JavaScript] new Array().fill().map() - 빈 슬롯 참조 방식

문제

특정 길이를 가지는 새로운 배열을 생성한 후 fill 메서드를 사용하지 않으면 map으로 배열을 순회하더라도 배열의 인덱스에 접근할 수 없습니다.

Array 생성 직후 map 호출

new Array(3).map(v => new Array(3).fill(0));

// [ <3 empty items> ]

fill 메서드 호출 후 map 호출

new Array(3).fill().map(v => new Array(3).fill(0));

// -> [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]

 

이러한 차이는 배열의 빈 슬롯에 대한 참조 방식이 달라서 발생함을 알게 되었습니다.

---

빈 슬롯(empty)에 대한 참조 방식

메서드가 배열의 빈 슬롯을 참조하는 방식은 다음의 두 가지로 나뉘며, 일관적이지 않습니다.

1. 빈 슬롯의 값을 undefined로 처리하는 방식
2. 인덱스에 접근하기 전 in 연산을 거쳐 접근 여부를 결정하는 방식

fill 메서드는 빈 슬롯의 값을 undefined로 취급하는 메서드로써, 해당 슬롯이 비어 있더라도 인덱스에 접근하여 값을 채울 수 있습니다.

반면, map 메서드는 in 연산을 거쳐 접근 여부를 결정하는 메서드로써, 해당 슬롯이 비어 있는 경우에는 인덱스로 접근할 수 없습니다.

빈 슬롯의 값을 undefined로 취급하는 메서드, undefined로 취급하지 않는 메서드는 아래의 페이지에서 확인하실 수 있습니다.

Array - JavaScript | MDN