[JavaScript] 배열에서 특정 요소 제거하기

프로그래밍을 하다 보면 배열에서 특정 요소를 제거해야할 때가 있다. 이 글에서 자바스크립트 배열의 특정 요소를 제거하는 방법에 대해 알아보자.

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

splice() 메서드 사용

splice() 메서드는 첫 번째 인자로 주어진 인덱스에서 시작해서, 두 번째 인자로 주어진 개수만큼의 요소를 제거한다. splice() 메서드는 요소의 교체 및 추가에도 쓰인다. indexOf() 메서드를 사용하여 제거할 값의 인덱스를 먼저 찾을 수 있다.

const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3); // 값 3의 인덱스를 찾는다.

if (index > -1) {
  array.splice(index, 1); // 인덱스 위치에서 1개의 요소를 제거
}

console.log(array); // [1, 2, 4, 5]

filter() 메서드 사용

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 만든다.

const array = [1, 2, 3, 4, 5];
// 값 3을 제외한 새 배열을 반환
const filteredArray = array.filter((item) => item !== 3);

console.log(filteredArray); // [1, 2, 4, 5]

여기서 주의할 점은 splice() 메서드는 배열의 기존 요소를 직접 변경하는 반면, filter() 메서드는 기존 배열을 변경시키지 않고 새 배열을 반환한다는 것이다.

객체 배열에서 id 값으로 객체를 제거하는 방법

const array = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
];

const idToDelete = 2;
// id 값 2를 제외한 새 배열을 반환
const filteredArray = array.filter((item) => item.id !== idToDelete);

console.log(filteredArray);
// [
//   {
//       "id": 1,
//       "name": "Apple"
//   },
//   {
//       "id": 3,
//       "name": "Cherry"
//   }
// ]

참고

Array.prototype.splice() - MDN
Array.prototype.filter() - MDN