자바스크립트 filter() 함수 배열에서 특정 조건 만족하는 데이터 찾기

“filter()” 함수는 배열 요소 중 특정 조건을 만족하는 요소들로 새로운 배열을 생성해서 반환합니다. 함수는 주어진 조건 함수를 각 요소에 적용하고, 조건을 충족하는 요소만을 가져와서 배열로 만듭니다. 그래서 “filter()” 함수는 배열에서 조건을 만족하는 요소들을 손쉽게 추출할 수 있어서 데이터 처리와 필터링에 자주 사용합니다.

 

 

 

◎ 구문

 

filter() 메서드는 주어진 배열을 순회하면서 콜백 함수를 각 요소에 적용하고, 콜백 함수가 true를 반환하는 요소들로 이루어진 새로운 배열을 반환합니다.

 

const newArray = array.filter(callback(element[, index[, array]])[, thisArg])

 

• “callback”: 각 요소에 대해 실행할 함수.
• “element”: 배열의 각 요소.
• “index” (선택 사항): 배열 요소의 인덱스.
• “array” (선택 사항): “callback”이 호출된 배열.
• “thisArg” (선택 사함): “callback” 함수 내에서 “this”로 사용할 객체.

 

 

◎ 1. 숫자 배열에서 짝수만 필터링

 

필터 함수는 number ⇒ number % 2 === 0 입니다.  number % 2 는 파라미터인 number 를 2로 나누어서 몫을 반환합니다. 반환한 몫은 “===” 연산자로 “0” 인지 판단합니다. 필터 함수는 짝수는 true, 홀수면 false 를 반환하는데 true 인 경우 숫자를 배열에 추가합니다.

 

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
 
[출력]
[2, 4, 6]

 

 

◎ 2. 문자열 배열에서 길이가 5 이상인 단어 필터링

 

배열의 각 요소값인 word 에서 길이가 5 이상인 >= 5 인 경우 배열에 추가합니다. 

 

const words = ["apple", "banana", "cherry", "date", "fig"];
const longWords = words.filter(word => word.length >= 5);
 
[출력]
["banana", "cherry"]

 

 

◎ 3. 객체 배열에서 특정 속성 값으로 필터링

 

배열에서 제품 객체를 포함한 경우 필터링 방법입니다. products 배열에 포함된 객체들은 두 가지 속성을 가지고 있습니다. 그 중 price 의 값이 500 이하인 것만 추출해서 배열로 만드는 예제입니다.

 

const products = [
  { name: "Laptop", price: 1000 },
  { name: "Phone", price: 500 },
  { name: "Tablet", price: 300 },
];
const affordableProducts = products.filter(product => product.price <= 500);
 
[출력]
[
  { name: "Phone", price: 500 },
  { name: "Tablet", price: 300 }
]

 

 

◎ 4. 배열 함수 이용한 필터 적용

 

배열 함수인 ”includes()” 메서드를 사용하여 문자열에 "apple"이 포함되어 있는 경우 ”true”를 반환하고, 그렇지 않으면 ”false”를 반환합니다.

 

const fruits = ["banana", "apple", "cherry", "date", "grape"];
 
// "apple"을 포함하는 문자열만 필터링하는 콜백 함수
const includesApple = (fruit) => fruit.includes("apple");
const appleFruits = fruits.filter(includesApple);
 
console.log(appleFruits);
 
[출력]
["apple"]