[JavaScript] Array 배열에서 특정 값 삭제하기 다양한방법

1. splice() 메서드 사용하기

splice() 메서드는 배열의 원본을 직접 수정하여 특정 인덱스의 요소를 삭제할 수 있습니다. 이때 요소가 위치한 인덱스를 알아야 합니다.

let arr = [1, 2, 3, 4, 5];
const index = arr.indexOf(3); // 3의 인덱스를 찾음

if (index > -1) { // 인덱스가 존재할 경우
    arr.splice(index, 1); // 해당 인덱스의 요소 삭제
}

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

 

위 코드에서는 indexOf()를 사용해 3이 위치한 인덱스를 찾고, 그 인덱스에서 splice()를 통해 값을 삭제했습니다.

---

2. filter() 메서드 사용하기

filter() 메서드는 특정 조건에 맞지 않는 요소들만으로 새 배열을 만들어 반환합니다. 원본 배열은 수정되지 않습니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(value => value !== 3); // 3을 제외한 새로운 배열 생성

console.log(newArr); // [1, 2, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (원본은 유지됨)

 

이 방법은 원본 배열을 유지해야 하거나, 여러 번 사용할 경우 유용합니다.

---

3. findIndex()와 splice() 결합하기

findIndex()를 사용하면 특정 조건에 따라 배열 요소의 인덱스를 찾을 수 있습니다. 이후 splice()로 해당 인덱스의 요소를 삭제합니다.

let arr = [{ id: 1 }, { id: 2 }, { id: 3 }];
const index = arr.findIndex(item => item.id === 2);

if (index > -1) {
    arr.splice(index, 1);
}

console.log(arr); // [{ id: 1 }, { id: 3 }]

 

이 방법은 객체 배열에서 특정 키 값으로 요소를 찾고자 할 때 유용합니다.

---

4. pop() 또는 shift() 메서드로 삭제하기

pop()은 배열의 마지막 요소를, shift()는 배열의 첫 번째 요소를 제거합니다.

let arr = [1, 2, 3, 4, 5];
arr.pop(); // 마지막 요소 삭제
console.log(arr); // [1, 2, 3, 4]

arr.shift(); // 첫 번째 요소 삭제
console.log(arr); // [2, 3, 4]

 

이 방법은 마지막 또는 첫 번째 요소만 삭제할 경우 간단히 사용할 수 있습니다.

---

5. slice()로 특정 요소 제거된 새 배열 만들기

slice()는 배열의 일부를 잘라내어 새로운 배열을 반환하며, 원본 배열은 변경되지 않습니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(0, 2).concat(arr.slice(3)); // 인덱스 2의 요소(3)를 제거

console.log(newArr); // [1, 2, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5] (원본은 유지됨)

 

이 방법은 원본 배열을 수정하지 않고, 특정 위치의 요소를 제거한 새 배열을 얻고자 할 때 유용합니다.

---

6. delete 연산자 사용하기

delete 연산자를 사용하면 배열에서 요소를 삭제할 수 있지만, 그 자리는 undefined로 남게 됩니다.

let arr = [1, 2, 3, 4, 5];
delete arr[2]; // 인덱스 2의 요소를 삭제

console.log(arr); // [1, 2, undefined, 4, 5]
console.log(arr.length); // 5 (배열 길이는 그대로)

 

이 방법은 특정 요소를 제거하면서 배열 길이를 유지해야 할 때만 유용합니다.

---

7. reduce()로 특정 요소 제외한 새 배열 만들기

reduce()를 사용해 조건에 따라 요소를 추가하면서 특정 값을 제외한 새 배열을 만들 수 있습니다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.reduce((acc, value) => {
    if (value !== 3) { // 3 제외
        acc.push(value);
    }
    return acc;
}, []);

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

 

이 방법은 특정 조건을 사용하여 배열에서 여러 값을 필터링하거나, 보다 복잡한 조건을 적용할 때 유용합니다.

---

요약

JavaScript 배열에서 특정 값을 삭제하는 다양한 방법을 알아보았습니다. 각 방법은 특정 상황에 따라 적합하게 사용될 수 있습니다.

1. splice(): 원본 배열 수정, 인덱스를 아는 경우
2. filter(): 조건에 맞는 값 제외, 원본 배열 유지
3. findIndex() + splice(): 특정 조건을 만족하는 인덱스 삭제
4. pop()/shift(): 마지막 또는 첫 번째 요소 삭제
5. slice(): 새 배열 생성, 원본 배열 유지
6. delete: 요소를 삭제하되 undefined로 남김
7. reduce(): 조건에 따라 새로운 배열 생성