JavaScript에서는 배열 리터럴을 작성할 때 쉼표를 연속으로 사용하면 희소 배열(sparse array), 즉 값이 비어 있는 인덱스(hole)가 생길 수 있습니다. 이번 글에서는 이러한 빈 인덱스를 찾아 그 자리에 값을 채워 넣고, 빈 공간이 없다면 배열 맨 뒤에 값을 추가하는 함수를 직접 구현해 보겠습니다.
문제 상황
예를 들어 다음과 같이 중간중간 빈 값이 포함된 배열이 있다고 가정해 보겠습니다.
const arr = [43,534534,645,64,,645,64,,645,,645,,65,,645,,64];
여기서 우리가 만들 함수는 pushAtEmpty()입니다. 이 함수는 하나의 요소를 인자로 받아, 해당 배열에서 가장 먼저 발견되는 빈 인덱스에 그 값을 삽입합니다. 만약 배열에 빈 공간이 전혀 없다면, 일반적인 push()처럼 요소를 배열의 마지막에 추가하면 됩니다.
구현 방법
구현 로직은 간단합니다.
- 배열을 처음부터 끝까지 순회하면서
undefined인(비어 있는) 인덱스를 찾습니다. - 빈 인덱스를 발견하면
splice()메서드로 그 자리의 값을 새 요소로 교체하고 반복을 종료합니다. - 끝까지 순회했는데도 빈 인덱스가 없었다면,
push()로 배열 맨 뒤에 요소를 추가합니다.
코드 예제
const arr = [43,534534,645,64,,645,64,,645,,645,,65,,645,,64];
Array.prototype.pushAtEmpty = function(element){
let index;
for(index = 0; index < this.length; index++){
if(this[index] === undefined){
this.splice(index, 1, element);
break;
}
}
if(index === this.length){
this.push(element);
}
};
arr.pushAtEmpty(23);
arr.pushAtEmpty(33);
arr.pushAtEmpty(43);
arr.pushAtEmpty(53);
arr.pushAtEmpty(63);
arr.pushAtEmpty(73);
arr.pushAtEmpty(83);
arr.pushAtEmpty(93);
console.log(arr);코드 설명
Array.prototype에 함수를 정의했기 때문에 모든 배열에서arr.pushAtEmpty()형태로 호출할 수 있습니다.- 함수 내부의
this는 호출 주체가 되는 배열 자신을 가리킵니다. splice(index, 1, element)는index위치에서 1개의 요소를 제거하고 그 자리에 새로운element를 삽입하는 동작을 수행합니다. 즉, 기존 빈 자리를 새 값으로 대체하는 효과가 있습니다.- 반복문이 정상적으로 종료된 후
index === this.length라는 것은 빈 인덱스를 찾지 못했다는 의미이므로, 이 경우push()로 마지막에 값을 추가합니다.
실행 결과
위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.
[ 43, 534534, 645, 64, 23, 645, 64, 33, 645, 43, 645, 53, 65, 63, 645, 73, 64, 83, 93 ]
출력 결과를 보면 원래 비어 있던 인덱스들이 순서대로 23, 33, 43, 53, 63, 73, 83으로 채워졌고, 더 이상 남은 빈 공간이 없자 마지막 값 93은 배열의 끝에 추가된 것을 확인할 수 있습니다.
마무리
이처럼 splice()와 간단한 반복문만 활용하면 희소 배열의 빈 자리를 효율적으로 채울 수 있습니다. 참고로 실무 코드에서는 프로토타입을 직접 수정하는 대신 일반 함수나 유틸리티 형태로 구현하는 것이 안전하며, ES2023부터 도입된 findIndex()나 with() 같은 메서드를 조합하면 더욱 간결하게 표현할 수도 있습니다.