자바스크립트 배열에 undefined 구멍(빈 슬롯)을 만드는 방법은 간단합니다. 기존보다 훨씬 높은 인덱스 위치에 새 요소를 추가하고, 그 사이의 인덱스들은 그대로 비워 두면 됩니다. 이렇게 건너뛰어진 작은 인덱스들은 자동으로 undefined 구멍으로 채워집니다. 아래 예제를 통해 자세히 알아보겠습니다.
예제
다음 예제에서는 처음에 요소 3개(1, 2, 3)만 담긴 배열을 선언했습니다. 이후 원래 존재하지 않던 5번 인덱스에 값 6을 할당하면 어떻게 되는지 확인해 보겠습니다. 이 순간 배열의 길이는 6이 되며, 건드리지 않고 비워 둔 3번과 4번 인덱스는 undefined 구멍으로 채워집니다.
<html>
<body>
<script>
var nums = [1,2,3];
nums[5] = 6;
var Len = nums.length;
var text = "";
for (i = 0; i < Len; i++) {
text += nums[i] + "</br>";
}
document.write(text);
</script>
</body>
</html>출력 결과
1 2 3 undefined undefined 6
핵심 포인트
위 코드의 동작 원리를 정리하면 다음과 같습니다.
nums[5] = 6;을 실행하는 순간, 자바스크립트 엔진은 배열의 길이를 자동으로 가장 높은 인덱스 + 1, 즉 6으로 늘립니다.- 중간에 할당되지 않은 3번, 4번 인덱스에는 값이 존재하지 않으므로 접근 시
undefined가 반환됩니다. - 이처럼 중간에 빈 슬롯이 있는 배열을 희소 배열(sparse array)이라고 부릅니다.
참고로 희소 배열은 일부 배열 메서드(forEach, map 등)에서 빈 슬롯을 건너뛰거나 다르게 처리할 수 있으므로, 실무에서는 의도치 않은 버그를 피하기 위해 주의해서 사용해야 합니다.