[ 자바스크립트 ] Filter() 함수: 배열에서 조건을 만족하는 요소를 추출하는 방법

JavaScript에서 배열을 다룰 때, 특정 조건을 만족하는 요소들만 추출하고 싶을 때가 있습니다. 이때 유용하게 사용되는 메서드가 바로 filter()입니다.

 

filter()

---

filter()은 배열에 사용하며, 주어진 함수의 조건을 만족하는 모든 요소를 모아 새로운 배열로 반환합니다. 이 메서드는 원본 배열을 변경하지 않으며, 콜백 함수에서 true를 반환하는 요소들만 새로운 배열에 포함됩니다.

 

 

구문

---

arr.filter(callback(element[, index[, array]])[, thisArg])

 

 

매개변수

---

filter 함수의 매개변수는 callbackFunction과 thisArg입니다.

callbackFunction에는 3개의 매개변수를 사용할 수 있습니다.

• callback(element, index, array): filter() 메서드에 전달되는 콜백 함수입니다. 이 함수는 배열의 각 요소에 대해 호출되며, 주어진 조건을 만족하는지 여부를 평가합니다.
  • element: 현재 처리 중인 배열 요소의 값입니다.
  • index (Optional): 현재 처리 중인 배열 요소의 인덱스입니다.
  • array (Optional): filter() 메서드가 호출된 원본 배열입니다.
• thisArg (Optional): 콜백 함수 내에서 this로 사용할 값을 지정할 수 있습니다.

 

예제 #1 - 특정 조건에 맞는 요소 추출하기

---

아래 코드에 array라는 배열에서 10 미만인 값을 추출해보겠습니다.

이를 위해 우선 결과값들을 담아둘 result 변수를 만들고,  filter()에 필터 조건을 넣어 주면 됩니다.

let array = [1,12,3,'string'];

let result = array.filter((value) => value < 10)

console.log(result);

// 결과: [1,3]

 

이 코드에서는 array 배열에서 10 미만의 값만 새로운 배열 result에 포함시켰습니다. filter() 메서드는 숫자 1과 3만 반환하며, 문자열 'string'과 10 이상인 숫자 12는 제외됩니다.

 

 

예제 #2 - 배열에서 특정 값 삭제하기

---

이번에는 filter() 메서드를 활용해 배열에서 특정 값을 삭제하는 방법을 살펴보겠습니다. 예를 들어, 주어진 배열에서 문자 'b'를 모두 삭제해보겠습니다.

let arr = ['a', 'b', 'b', 'c'];

// 원소 'b' 삭제
let filtered = arr.filter((element) => element !== 'b');

console.log(filtered); // ['a', 'c']

 

위 코드에서는 filter() 메서드를 사용해 'b'를 제외한 모든 요소를 새로운 배열로 반환했습니다. 이처럼 filter()는 특정 값을 삭제하는 데도 유용하게 활용될 수 있습니다.

 

 

요약

---

filter() 메서드는 배열의 모든 요소를 순회하며, 주어진 조건을 만족하는 요소들만 새로운 배열로 반환합니다. 이를 통해 조건에 맞는 요소를 손쉽게 추출하거나 특정 값을 제거할 수 있습니다. 또한, 원본 배열을 변경하지 않기 때문에 안전하게 사용할 수 있다는 장점이 있습니다.

 

 

참고 

---

 

Array.prototype.filter() - JavaScript | MDN