JavaScript에서 특정 배열 값을 찾아 삭제하는 방법

 

 

JavaScript에서 특정 배열 값을 찾아 삭제하는 방법은 여러 가지가 있습니다. 사용 목적(원본 배열 유지 여부, 단일/다중 값 삭제)에 따라 적절한 방법을 선택하세요.

---

 

1. filter 메서드 사용 (가장 추천)

특정 값을 제외한 새 배열을 반환합니다.
불변성 유지 → React/Next.js 프로젝트에서 안전하게 사용 가능

const fruits = ["apple", "banana", "orange", "banana"];
const updatedFruits = fruits.filter(fruit => fruit !== "banana");

console.log(updatedFruits); // ["apple", "orange"]

 

설명

• filter는 조건(fruit !== "banana")에 맞는 요소만 새 배열로 반환합니다.
• 원본 배열은 변경되지 않습니다.
• 다수의 동일 값 제거 시 효율적입니다.

---

2. splice + indexOf (원본 배열 직접 변경)

원본 배열에서 첫 번째 일치 값만 제거합니다.

const fruits = ["apple", "banana", "orange"];
const index = fruits.indexOf("banana");

if (index !== -1) fruits.splice(index, 1);

console.log(fruits); // ["apple", "orange"]

 

설명

• indexOf로 첫 일치 인덱스 찾기
• splice(index, 1)로 해당 요소 직접 삭제
• 원본 배열이 변경되니 주의!
• 단일 값 제거 시 빠르고 간단합니다.

---

3. 모든 일치 값 제거 (while + indexOf)

배열에 같은 값이 여러 개 있을 때 사용합니다.

const numbers = [1, 2, 2, 3, 4, 2];
while (numbers.indexOf(2) !== -1) {
  numbers.splice(numbers.indexOf(2), 1);
}

console.log(numbers); // [1, 3, 4]

 

설명

• while 루프를 사용해 모든 일치 값 제거
• 원본 배열이 변경됩니다.
• 같은 값이 많을 때 사용하지만 filter가 더 간단합니다.

---

4. 객체 배열에서 특정 값 삭제 (filter 사용)

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

// id가 2인 사용자 제거
const updatedUsers = users.filter(user => user.id !== 2);

console.log(updatedUsers);
// [{ id: 1, name: "Alice" }, { id: 3, name: "Charlie" }]

 

설명

• 객체 배열에서 조건을 사용해 삭제할 때 이상적입니다.
• 원본 배열 유지 + 새 배열 반환
• React 상태 업데이트 시 강력 추천!

---

5. 특정 인덱스 제거 (slice + concat)

특정 위치의 요소 제거 시 사용합니다.

const fruits = ["apple", "banana", "orange"];
const indexToRemove = 1;

const updatedFruits = [
  ...fruits.slice(0, indexToRemove),
  ...fruits.slice(indexToRemove + 1)
];

console.log(updatedFruits); // ["apple", "orange"]

 

설명

• 불변성 유지 + 새 배열 생성
• 배열 일부만 제거할 때 유용합니다.

---

비교 및 추천

방법	특징	사용 추천 시기
filter	새 배열 반환, 불변성 유지	다수 요소 삭제, React 상태 관리
indexOf + splice	첫 일치 값 삭제, 원본 변경	빠르게 단일 값 제거 시
while + indexOf	모든 일치 값 반복 제거, 원본 변경	중복 값이 많은 배열 처리 시
객체 배열 + filter	조건 기반 삭제, 새 배열 반환	객체 배열에서 특정 요소 제거 시
slice + concat	인덱스 기반 삭제, 불변성 유지	위치 기반 제거 + 원본 유지 시

---

React/Next.js 프로젝트에서는

• 불변성 유지가 중요하므로 filter 또는 slice + concat을 사용하세요!
• 배열 상태를 직접 변경하면 렌더링이 트리거되지 않을 수 있습니다.

 

 

 

 

 

 

#배열 #javascript #react #삭제 #조금씩배워가는프로그래밍