JS 배열 요소 삭제하는 방법 (shift, pop, splice, slice, filter)

전 포스트에서 자바스크립트 배열에 요소를 추가하는 방법에 대해 알아보았으니

이번에는 삭제하는 방법은 어떤 것이 있는지 한번 살펴보도록 하자.

 

삭제하는 방법도 마찬가지로 기존 배열을 변경시키는 mutable(가변) 방식과 그렇지 않은 immutable(불변) 방식이 존재한다.

 

---

Mutable(가변) 방식

shift

배열의 첫번째 요소를 삭제시키고 삭제된 요소를 반환한다

const foods = ['🌭','🍗','🍕','🍟'];
const firstFood = foods.shift();

console.log(lastFood); // 🌭
console.log(foods); // ['🍗','🍕','🍟']

 

pop

배열의 마지막 요소를 삭제 시키고 삭제된 요소를 반환한다

const foods = ['🌭','🍗','🍕','🍟'];
const lastFood = foods.shift();

console.log(lastFood) // 🍟
console.log(foods); // ['🌭','🍗','🍕']

 

splice

splice(시작 인덱스, 삭제 시킬 요소의 개수 [,요소1, 요소2, 요소N])

 

특정 인덱스에 요소를 추가시킬때도 사용했었지만 삭제하는 것도 가능하다.

 

배열에 요소를 추가해줄때는 삭제시킬 요소의 개수를 0 그리고 추가시킬 요소들을 순서대로 전달해줬지만

삭제를 하기 위해선 시작 인덱스와 삭제 시킬 요소의 개수만 전달해주면 된다.  반환 값은 삭제된 요소를 배열 형태로 반환한다.

 

const foods = ['🌭','🍗','🍕','🍟'];
const extractedFood = foods.splice(2, 1); // 인덱스는 0 부터 시작함으로 3 - 1 = 2 인덱스에있는 피자 요소 삭제

console.log(extractedFood) // ['🍕']
console.log(foods); // ['🌭','🍗','🍟']

 

delete

 

해당 키워드로 요소를 삭제시킬순 있지만 배열의 length가 업데이트되지 않고 빈 공간이 생기므로(희소 배열) 추천되는 방법은 아니다.

다시 인덱스 2 (피자)를 삭제 시켜보자.

 

const foods = ['🌭','🍗','🍕','🍟'];
delete foods[2]; 

console.log(foods) // ['🌭','🍗',undefined,'🍟']
console.log(foods.length) // 4

 

크롬 콘솔에서는 undefined라고 나오지만 정확하게 말하면 해당 위치의 값은 비어있다. 따라서 forEach, map, reduce 등 배열을 순회하는 함수를 사용하면 해당 인덱스에서는 콜백 함수를 실행하지 않는다.

 

foods.forEach(food => console.log('음식 있음)); // foods의 length는 4이지만 음식 있음 3번만 콘솔에 찍힌다

 

권장하진 않지만 만약 undefined라는 값을 굳이 넣어야겠다면 delete 가 아닌 undefined로 지정을 해주라고

mdn 문서에서 안내하고 있다. 

 

foods[2] = undefined;

 

희소 배열을 만들지 않으면서 특정 요소를 삭제하기 위해선 해당 방법이 아닌 splice 메서드를 사용하길 바란다.

---

Immutable(불변) 방식

slice

slice([시작 인데스, [,끝 인덱스]])

 

 

기존 배열에서 일부분을 잘라서 얕은 복사본 배열을 생성할 수 있다.

splice와 크게 다른 점은 기존 배열을 변경하지 않는다는 점 그리고 해당 방법으로 요소를 추가할 수는 없다는 점이다.

반환 값은 잘라낸 요소들을 배열 형태로 반환한다.

 

전달받은 시작 인덱스에서 시작해 끝 인덱스 - 1까지의 요소들의 복사본을 반환한다.

끝 인덱스를 지정해주지 않으면 시작 인덱스 이후 모든 요소들을 포함하여 반환한다.

 

위 예제와 마찬가지로 2번째 인덱스에 있는 피자만 삭제를 한다면 아래와 같이 사용할 수 있다.

 

const foods = ['🌭','🍗','🍕','🍟'];
const slicedFood = foods.slice(2, 3)

console.log(slicedFood); ['🍕']; // 잘라낸 배열 반환
console.log(foods); // ['🌭','🍗','🍕','🍟']; // 기존 배열는 변화가없음

 

filter

filter((요소값 [,인덱스, 순회하는 대상 배열]) => { /* ... */ } )

 

특정 조건에 부합하는 요소를 삭제시키기 위해 많이 사용되는 메서드로

콜백 함수에서 true가 반환되는 요소로 새로운 배열을 생성한다. 

이를 응용해서 피자만 삭제된 배열을 새로 만들고 싶다면 아래와 같이 사용하면 된다.

 

const foods = ['🌭','🍗','🍕','🍟'];
const filteredFood = foods.filter(food => food !== '🍕'); // 순회중인 요소가 피자가 아닐경우 true로 평가되므로 피자를 제외한 모든 요소들은 남고 피자는 false로 평과 되기때문에 새로운 배열에 복사되지않는다

console.log(filteredFood); // ['🌭','🍗','🍟'];
console.log(foods) // ['🌭','🍗','🍕','🍟'] - 기존 배열 유지

 

참고 자료 :

 

Array.prototype.slice() - JavaScript | MDN