[자바스크립트] delete 연산에 대하여

자바스크립트에서 delete 연산자는 C 및 C++의 키워드와 다른 기능을 합니다. 바로 속성(property)을 제거하는 기능입니다. 또한 메모리를 직접 비우지 않는 대신 객체에서 속성을 제거하기 때문에 delete를 하게 되면 empty를 가진 배열이 생성됩니다. 다음의 예제를 보시죠.

var array = [0, 1, 2, 3]
delete array[2] 
true
array // (4) [0, 1, empty, 3]

delete 연산의 결과 empty를 가진 배열이 만들어졌습니다.

여기서 눈 여겨봐야할 점은 배열의 길이입니다. delete 연산을 하여도 배열의 크기는 그대로 유지됩니다. 따라서 delete 연산은 배열을 재배치하여 돌려주는 연산자가 아님을 알 수 있습니다.

그렇다면 for문을 돌려보면 어떤 결과가 나오게 될까?

for (var i = 0; i < array.length ; i++){ 
	console.log(array[i]) // 0 1 undefined 3
}

for (const key in array) { 
	console.log(key) // 0 1 3
}

for (const key of array) { 
	console.log(key) // 0 1 undefined 3
}

array.forEach(function(element){
	console.log(element); // 0 1 3
    });

자 이렇게 됩니다. delete를 사용하게 되면 어떤건 undefined, 어떤 건 생략이라는 줏대 없는 결과가 나옵니다. 물론 각각의 for문들이 가진 특성을 생각하면 당연한 결과이지만 사용하는 입장에선 다소 불편합니다. 

따라서 delete 연산자를 배열에서 요소를 제거하는 방법으로 사용하지 않을 것을 권장하고 있습니다.

대신에 splice을 추천합니다. 배열이 재배치되는 연산이라 새롭게 배열을 만들어서 반환해줍니다. 더이상 for문에 따른 결과를 고민할 필요가 없죠. 

let a = [0,1,2,3,4]
a.splice(2,2) // [2,3]
console.log(a) // [0,1,4]

추가적으로 delete연산자가 splice 보다 약간 코스트가 높은 함수라 합니다. 하지만 전체적인 속도에는 영향을 끼치지 않는 미묘한 차이라곤 합니다.