콘솔에서 [undefined × 100]과 같은 출력을 본 적이 있으신가요? 많은 분들이 이것을 JavaScript 자체의 기능이라고 생각하지만, 사실 그렇지 않습니다. 이는 Chrome(Chromium 기반 브라우저)이 배열 및 유사 배열 객체(array-like object) 안에서 초기화되지 않은 인덱스, 즉 '빈 슬롯(hole)'을 표시하는 고유한 방식입니다.
예제
다음 코드를 실행해 보면,
console.log(Array(100))
출력 결과
[undefined × 100]
Array(100)은 길이가 100인 배열을 생성하지만, 실제 요소는 하나도 존재하지 않는 희소 배열(sparse array)입니다. 만약 Chrome이 이를 그대로 출력한다면 다음과 같이 표시될 것입니다.
[undefined, undefined, undefined, ..., undefined]
100개의 요소를 일일이 나열하는 대신 [undefined × 100]으로 압축해서 보여주는 것이 훨씬 가독성이 좋습니다. 즉, '×' 뒤의 숫자는 해당 값이 반복되는 횟수를 의미합니다.
참고 사항
- 이 표기법은 개발자 도구(DevTools)의 출력 형식일 뿐, 실제 배열에 값이 저장된 것은 아닙니다.
- Firefox와 같은 다른 브라우저는 빈 슬롯을
<100 empty items>와 같이 다르게 표시합니다. - 빈 슬롯과 명시적으로
undefined가 할당된 요소는 미묘하게 동작이 다를 수 있으므로, 실무에서는 희소 배열 생성을 피하고Array.from()이나fill()등으로 배열을 초기화하는 것이 권장됩니다.