JavaScript - 중복 배열에서 특정 값을 검색하여 첫 번째 일치 값만 제거

개요

중복 값이 있는 배열에서 특정 값을 검색하여 첫 번째 일치 값만 제거하는 방법을 정리해봅니다.

filter의 경우 모든 일치 값을 제거하기 때문에, 첫 번째 일치 값만 제거하고 싶을 때는 다른 방법을 사용해야 합니다.

방법

indexOf / findIndex 메서드를 사용하여 특정 값과 일치하는 첫 번째 인덱스를 찾습니다.

indexOf 메서드의 경우 정수, 문자열 등 기본 자료형의 배열에서 사용할 수 있습니다.
findIndex 메서드의 경우 객체 배열에서 사용할 수 있습니다.

splice 메서드를 사용하여 검색된 인덱스를 기준으로 1개의 요소를 제거합니다.

예시

1. 정수 배열에서 특정 값 제거하기

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
arr.splice(arr.indexOf(3), 1);
console.log(arr); // [1, 2, 4, 5, 1, 2, 3, 4, 5]

❗ splice 메서드는 원본 배열을 변경합니다. 아래 코드를 참고해주세요.

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
const removed = arr.splice(arr.indexOf(3), 1);
console.log(removed); // [3]
console.log(arr); // [1, 2, 4, 5, 1, 2, 3, 4, 5]

2. 문자열 배열에서 특정 값 제거하기

const arr = ['word1', 'word2', 'word3', 'word1', 'word2', 'word3'];
arr.splice(arr.indexOf('word3'), 1);
console.log(arr); // ['word1', 'word2', 'word1', 'word2', 'word3']

3. 객체 배열에서 특정 값 제거하기

const arr = [
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
  { id: 3, name: 'name3' },
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
  { id: 3, name: 'name3' },
];
arr.splice(arr.findIndex((item) => item.id === 3), 1);
console.log(arr); // [{ id: 1, name: 'name1' }, { id: 2, name: 'name2' }, { id: 1, name: 'name1' }, { id: 2, name: 'name2' }, { id: 3, name: 'name3' }]

문법 정리

indexOf

MDN에서 설명하는 indexOf는 아래와 같습니다.

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.

arr.indexOf(searchElement[, fromIndex])

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
arr.indexOf(3); // 2
arr.indexOf(3, 3); // 7
arr.indexOf(7); // -1

findIndex

MDN에서 설명하는 findIndex는 아래와 같습니다.

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

findIndex(callbackFn)

const arr = [
  { id: 1, name: 'name1' },
  { id: 2, name: 'name2' },
  { id: 3, name: 'name3' },
];
arr.findIndex((item) => item.id === 3); // 2
arr.findIndex((item) => item.id === 7); // -1

splice

MDN에서 설명하는 splice는 아래와 같습니다.

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
// 인덱스 4부터 1개의 요소를 제거합니다. (5가 제거됩니다.)
const removed = arr.splice(4, 1);
console.log(removed); // [5]
console.log(arr); // [1, 2, 3, 4, 1, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
// 인덱스 4부터 0개의 요소를 제거 후 6을 추가합니다. (제거 없이 6이 추가됩니다.)
const removed = arr.splice(4, 0, 6);
console.log(removed); // []
console.log(arr); // [1, 2, 3, 4, 6, 5, 1, 2, 3, 4, 5]

const arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5];
// 인덱스 4부터 2개의 요소를 제거 후 6을 추가합니다. (5, 1이 제거되고 6이 추가됩니다.)
const removed = arr.splice(4, 2, 6);
console.log(removed); // [5, 1]
console.log(arr); // [1, 2, 3, 4, 6, 2, 3, 4, 5]

(위 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.)

개요

방법

예시