[JS]배열에서 특정 요소를 제거하는 방법

본 포스팅은 JavaScript의 배열에서 특정 요소를 제거할 수 있는 몇 가지 방법을 소개합니다.

개요

배열의 요소를 제거하기 위해 delete 연산자 혹은 shift(), pop() 메서드를 사용할 수 있지만, 몇 가지 문제점이 있다.

delete 연산자는 특정 위치의 요소를 undefined로 설정한다. 그리고 배열 길이는 영향을 받지 않는다.

const array = ['A', 'B', 'C', 'D', 'E'];
console.log(array);
// ["A", "B", "C", "D", "E"]

delete array[2];

console.log(array);
// ["A", "B", undefined, "D", "E"]

shift() 메서드는 배열에서 첫 번째 요소를 제거하고 배열 길이를 변경한다.

const array = ['A', 'B', 'C', 'D', 'E'];
console.log(array);
// ["A", "B", "C", "D", "E"]

array.shift();

console.log(array);
// ["B", "C", "D", "E"]

pop() 메서드는 배열에서 마지막 요소를 제거하고 배열 길이를 변경한다.

const array = ['A', 'B', 'C', 'D', 'E'];
console.log(array);
// ["A", "B", "C", "D", "E"]

array.pop();

console.log(array);
// ["A", "B", "C", "D"]

특정 요소의 위치가 첫 번째 또는 마지막이 아닌 경우 shift(), pop() 메서드를 사용할 수 없으며, delete 연산자는 배열의 요소를 제거하는 것이 아닌 값을 undefined로 설정하는 것이므로 원하는 결과를 얻지 못할 수 있다.

방법 1. indexOf() 메서드와 splice() 메서드

indexOf() 메서드로 특정 요소의 위치를 구하고 splice() 메서드로 해당 위치의 요소를 제거한다.

다음은 배열에서 문자열 ‘C’의 위치를 구하고 splice() 메서드로 해당 요소를 제거하는 예시다.

const array = ['A', 'B', 'C', 'D', 'E'];
// 문자열 'C'의 위치를 구한다.
const findIndex = array.indexOf('C');
// 문자열 'C'의 위치에서 한 개의 요소를 제거한다.
array.splice(findIndex, 1);

console.log(array);
// ["A", "B", "D", "E"]

한 가지 주의사항으로 splice() 메서드의 첫 번째 매개변수에 음수를 전달하는 경우 배열의 끝에서부터 시작한다. 그리고 indexOf() 메서드가 특정 요소를 찾지 못하면(존재하지 않으면) -1을 반환한다. 따라서, 배열에 특정 요소가 존재하지 않으면 마지막 요소가 제거되는 문제점이 발생한다.

const array = ['A', 'B', 'C', 'D', 'E'];
const findIndex = array.indexOf('F');
array.splice(findIndex, 1);
// 맨 마지막 요소인 'E'가 제거된 것을 확인할 수 있다.

console.log(array);
// ["A", "B", "C", "D"]

위 문제점을 해결하기 위해 indexOf() 메서드의 반환 결과가 -1이 아닌 경우 splice() 메서드를 호출한다.

const array = ['A', 'B', 'C', 'D', 'E'];
const findIndex = array.indexOf('F');

if(findIndex > -1) {
  array.splice(findIndex, 1);
}

console.log(array);
// ["A", "B", "C", "D", "E"]

특정 요소가 여러개 있는 경우

indexOf() 메서드는 배열의 시작 위치와 가까운 인덱스를 반환하고 lastIndexOf() 메서드는 배열의 마지막 위치와 가까운 인덱스를 반환한다. 따라서, 특정 요소가 여러개 있는 경우 한 번에 인덱스를 구할 수 없으므로 while문을 사용하여 특정 요소를 제거한다.

const array = ['A', 'B', 'B', 'C', 'B'];
const removeValue = 'B';
const findIndex = array.indexOf(removeValue);

while (findIndex !== -1) {
  array.splice(findIndex, 1);
  findIndex = array.indexOf(removeValue);
}

console.log(array);
// ["A", "C"]

방법 2. filter() 메서드

JavaScript 배열에서 제공하는 filter() 메서드는 조건을 충족하는 요소들로 이루어진 새로운 배열을 반환한다. 특정 요소가 여러개 있는 경우에도 사용할 수 있으며, indexOf() 메서드와 splice() 메서드를 사용하는 방법보다 코드가 훨씬 간결하다.

const array = ['A', 'B', 'B', 'C', 'B'];
const removeValue = 'B';
const filters = array.filter((value) => value !== removeValue); 

console.log(filters);
// ["A", "C"]

방법 3. for문

마지막 방법으로 for문을 사용하여 특정 요소가 제거된 요소들로 이루어진 새로운 배열을 생성할 수 있다. 빈 배열을 생성하고 반복문에서 특정 요소가 아닌 요소들을 빈 배열에 추가한다.

const array = ['A', 'B', 'B', 'C', 'B'];
const newArray = [];
const removeValue = 'B';

for(let i = 0; i < array.length; i++ ) {
  if(array[i] !== removeValue) {
    newArray.push(array[i])
  }
}

console.log(newArray);
// ["A", "C"]

Conclusion

배열에서 특정 요소 한 개를 제거해야하는 경우 다음 방법을 활용한다.

indexOf(), splice() 메서드 사용

배열에서 특정 요소 여러개를 제거해야하는 경우 다음 두 가지 방법 중 하나를 활용한다.

반복문, indexOf(), splice() 메서드 사용
filter() 메서드를 사용