[JavaScript] 자바스크립트 filter

 

 

filter() 함수는

배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수입니다.
필터링된 배열을 반환합니다.

배열의 각 요소들 중에서 원하는 조건에 맞는 요소들만으로 필터링된 배열을 생성하기 위해 사용됩니다.

 

구문

arr.filter(callbackFn[, thisArg])

 

  arr은 filter() 함수를 적용할 배열입니다.

  callbackFn  
  배열의 각 요소를 처리하는 콜백 함수입니다. 
  콜백 함수는 배열의 요소를 전달 인자로 받고, 결과로 true 또는 false를 반환합니다. 
  true를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 
  포함되지 않습니다.

 

filter() 함수의 다양한 활용 사례

 

● 배열의 중복 제거

const numbers = [1, 2, 2, 3, 3, 4, 5];

const uniqueNum = numbers.filter((element, index, arr) => {
        return arr.indexOf(element) === index;
});
console.log(uniqueNum); 
//  [1, 2, 3, 4, 5]

 

위 예제에서는 numbers 배열에 중복된 요소가 있는지 확인하기 위해 indexOf() 함수를 사용했습니다.
indexOf() 함수는 배열에서 특정 값이 처음으로 나타나는 인덱스를 반환합니다.

 

arr.indexOf(element) === index 조건은 해당 값이 처음으로 나타나는 인덱스와 현재 인덱스가 동일하면
true 를 반환합니다.
filter() 함수는 콜백함수를 사용하여 배열의 요소를 하나씩 순회하며 조건에 맞는 요소만을 반환합니다.

 

 

● 다중 조건 필터링

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const filteredNum = numbers.filter(element => {
    // 다중 조건을 결합하여 필터링
    return element % 2 === 1 && element < 5;
});
console.log(filteredNum); 
// [1,3]

 

다중 조건을 사용하는 경우 filter() 함수 내의 콜백함수에서 여러 조건을 결합하면 됩니다.
예를 들어, 숫자 배열에서 홀수이면서 5보다 작은 조건을 사용한 예제입니다.

 

 

● 2차원 배열 필터링

const products = [
   ["Apple", 15 ],
   ["Orange", 21],
   ["Banana" : 10],
   ["Melon", 32]
] ;

// 20개 이상 남아있는 과일들만 필터링
const filteredProducts = products.filter(product => {
     return product[1] >= 20 ;
}};
console.log(filteredProducts) ;
// [["Orange", 21], ["Melon",32]]

 

위 예제에서는 filter() 함수를 사용하여 products 배열을 순회하고, 각 하위 배열에 대해 두번째 요소(개수)가 

20개 이상인 경우만 true 를 반환하여 필터링합니다.