[JavaScript]배열에서 특정 값 제거하는 방법

배열에서 특정 값 제거하는 방법

이번 포스팅은 JavaScript의 배열에서 특정 값 또는 특정 조건을 만족하는 요소를 제거할 수 있는 몇 가지 방법을 소개합니다.

---

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

첫 번째 방법으로 배열에서 제공하는 indexOf() 메서드와 splice() 메서드를 사용하여 특정 값을 제거할 수 있습니다.

 

[특정 값 제거 방법]

순서 1. indexOf() 메서드를 호출하여 특정 값의 위치(인덱스)를 찾습니다.

순서 2. indexOf() 메서드의 반환 결과가 -1 보다 큰 경우(특정 값을 찾은 경우) splice() 메서드를 호출합니다.

순서 3. splice() 메서드를 호출하여 첫 번째 매개변수로 indexOf() 메서드의 반환 결과(특정 값의 위치)를 전달하고 두 번째 매개변수로 1을 전달합니다. 특정 값의 위치부터 1개의 요소가 제거됩니다.

 

다음 예제는 문자열 타입의 배열에서 문자열 "Three"를 제거합니다.

const strArray = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five'];

// 문자열 "Three"의 위치를 찾습니다.
const findIndex = strArray.indexOf('Three');

// 문자열 "Three"의 위치를 찾은 경우 해당 요소를 제거합니다.
if(findIndex > -1) {
  strArray.splice(findIndex, 1);
}

console.log(strArray);

[실행 결과]

['Zero', 'One', 'Two', 'Four', 'Five']

 

indexOf() 메서드와 splice() 메서드를 사용하는 방법의 단점은 중복된 요소를 제거할 수 없다는 것입니다.

 

indexOf() 메서드는 배열의 시작 위치(0번째 인덱스)부터 특정 값을 찾으며, 시작 위치와 가장 가까운 값의 위치를 반환합니다. 따라서, 중복된 요소를 제거할 수 없습니다.

 

다음 예제는 indexOf() 메서드와 splice() 메서드의 단점을 보여줍니다.

const strArray = ['One', 'One', 'One'];

// 문자열 "One"의 위치를 찾습니다.
const findIndex = strArray.indexOf('One');

// 문자열 "One"의 위치를 찾은 경우 해당 요소를 제거합니다.
if(findIndex > -1) {
  strArray.splice(findIndex, 1);
}

console.log(strArray);

[실행 결과]

['One', 'One']

---

방법 2. findIndex 메서드와 splice 메서드

indexOf() 메서드 대신 findIndex() 메서드를 사용하면, 배열의 특정 값의 위치뿐만 아니라 특정 조건을 만족하는 값의 위치를 구할 수 있습니다.

 

[특정 값 제거 방법]

순서 1. findIndex() 메서드의 매개변수로 특정 조건에 대한 결과를 Boolean 값으로 반환하는 콜백 함수를 전달합니다.

순서 2. findIndex() 메서드의 반환 결과가 -1 보다 큰 경우(특정 값을 찾은 경우) splice() 메서드를 호출합니다.

순서 3. splice() 메서드를 호출하여 첫 번째 매개변수로 indexOf() 메서드의 반환 결과(특정 값의 위치)를 전달하고 두 번째 매개변수로 1을 전달합니다. 특정 값의 위치부터 1개의 요소가 제거됩니다.

 

다음 예제는 숫자 타입의 배열에서 10보다 큰 요소를 제거합니다.

const intArray = [0, 5, 20, 3, 7, 30];

// 10보다 큰 요소의 위치를 찾습니다.
const findIndex = intArray.findIndex((item) => item > 10);

// 10보다 큰 요소의 위치를 찾은 경우 해당 요소를 제거합니다.
if(findIndex > -1) {
  intArray.splice(findIndex, 1);
}

console.log(intArray);

[실행 결과]

[0, 5, 3, 7, 30]

findIndex() 메서드의 단점은 indexOf() 메서드와 마찬가지로 중복된 요소 또는 특정 조건을 만족하는 여러 개의 요소를 제거할 수 없다는 것입니다.

 

findIndex() 메서드는 배열의 시작 위치(0번째 인덱스)부터 특정 조건을 만족하는 값의 위치를 찾으며, 시작 위치와 가장 가까운 값의 위치를 반환합니다. 따라서, 특정 조건을 만족하는 모든 요소를 제거하는 방법으로 부적절합니다.

---

방법 3. 반복문

고전적인 방법으로 반복문을 사용하여 배열에서 특정 값 또는 특정 조건을 만족하는 값을 제거할 수 있습니다. 실제로 배열의 요소가 제거되는 것은 아니지만, 새로운 배열을 생성하여 특정 값 또는 특정 조건을 만족하지 않는 모든 요소를 추가하여 특정 값 또는 특정 조건을 만족하는 값이 제거된 것처럼 보여줍니다.

 

[특정 값 제거 방법]

순서 1. 빈 값으로 초기화된 새로운 배열을 생성합니다.

순서 2. 반복문을 사용하여 특정 값 또는 특정 조건을 만족하지 않는 요소를 push() 메서드를 사용하여 새로운 배열에 추가합니다.

 

다음 예제는 문자열 배열에서 첫 번째 문자가 "T"로 시작하고 문자열의 길이가 3보다 큰 요소를 제거합니다.

const strArray = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];
const newArray = [];

for(index = 0; index < strArray.length; index++) {
  if(strArray[index].length < 4 && !strArray[index].startsWith('T')) {
    newArray.push(strArray[index]);
  }
}

console.log(newArray);

[실행 결과]

['One', 'Six']

---

방법 4. filter 메서드

배열에서 제공하는 filter() 메서드를 사용하면, 반복문에서 설명한 소스 코드를 간결하게 구현할 수 있습니다.

 

filter() 메서드의 매개변수로 특정 조건에 대한 결과를 Boolean 값으로 반환하는 콜백 함수를 전달하면, 특정 조건을 만족하는 요소로 구성된 새로운 배열을 반환합니다.

 

다음 예제는 filter() 메서드를 사용하여 반복문에서 보여준 소스 코드를 더 간결하게 작성하였습니다.

const strArray = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven'];
const newArray = strArray.filter((item) => (item.length < 4 && !item.startsWith('T')));

console.log(newArray);

[실행 결과]

['One', 'Six']