JavaScript 배열에서 delete 연산자의 의외 동작, 길이가 줄어들지 않는 이유

JavaScript의 delete 연산자는 원래 객체(object)를 대상으로 설계된 연산자입니다. 그런데 JavaScript에서 배열 역시 인덱스를 키로 가지는 일종의 객체이기 때문에, 배열에도 delete 연산자를 사용할 수 있습니다. 문제는 이때 많은 개발자가 예상하지 못한 결과가 나온다는 점입니다.

배열 리터럴 준비하기

다음과 같은 배열을 가정해 보겠습니다.

const arr = ['a', 'b', 'c', 'd', 'e'];

예제 코드 실행

아래 프로그램을 실행했을 때 어떤 결과가 나올지 먼저 예측해 보세요.

const arr = ['a', 'b', 'c', 'd', 'e'];
delete arr[4];
console.log(arr);
console.log(arr.length);

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[ 'a', 'b', 'c', 'd', <1 empty item> ]
5

결과 분석

배열의 요소 하나를 삭제했으니 arr.length가 4가 출력될 것이라고 기대하기 쉽습니다. 하지만 실제 결과는 다릅니다.

delete 연산자는 해당 인덱스에 담긴 "값"만 메모리에서 제거할 뿐, 배열이 차지하고 있던 슬롯 자체는 그대로 남겨둡니다. 즉, 값은 사라졌지만 자리는 비어 있는 상태(empty item, 흔히 "구멍(hole)"이라고 부름)로 유지되는 것입니다.

결국 배열의 길이에는 아무런 변화가 없으며, 여전히 길이 5를 유지한 채 단 하나의 메모리 위치만 비어 있게 됩니다.

요소를 완전히 제거하려면?

배열에서 요소를 실제로 제거하고 길이까지 줄이고 싶다면 splice() 메서드를 사용하는 것이 올바른 방법입니다.

const arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(4, 1);
console.log(arr);        // [ 'a', 'b', 'c', 'd' ]
console.log(arr.length); // 4

정리하면, delete는 값만 없애고 빈 자리를 남기는 반면, splice()는 배열 구조 자체에서 요소를 제거한다는 차이가 있습니다. 두 연산의 동작 방식을 정확히 구분해 두면 의도치 않은 버그를 예방하는 데 큰 도움이 됩니다.