본문 바로가기
STUDY/JavaScript

Javascript에서 배열을 필터링하는 filter메서드

by Y.Choi 2023. 11. 21.
728x90
반응형

filter 메서드는 배열의 각 요소를 평가하여 조건을 만족하는 요소들로 이루어진 새로운 배열을 반환하는 메서드이다.

주어진 조건에 따라 배열을 필터링하므로, 데이터의 조건부 추출이나 변형에 자주 활용된다.

 

const newArray = array.filter(callback(currentValue, index, array));

 

callback : 각 요소에 대해 실행할 함수로, 참/거짓을 반환하는 조건을 포함한다.
currentValue : 현재 배열의 요소.
index : 현재 배열의 인덱스.
array : 메서드가 호출된 배열.

 

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

// 짝수만 필터링
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // 출력: [2, 4]

 

 

 

filter 메서드 활용

 

1) 데이터 필터링

const products = [
  { name: 'Laptop', price: 1000, inStock: true },
  { name: 'Phone', price: 500, inStock: false },
  { name: 'Tablet', price: 300, inStock: true },
];

// 재고가 있는 상품만 필터링
const inStockProducts = products.filter((product) => product.inStock);
console.log(inStockProducts);

 

 

2) 검색 기능 구현

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' },
];

const searchTerm = 'Jane';

// 이름에 검색어가 포함된 사용자 필터링
const filteredUsers = users.filter((user) => user.name.includes(searchTerm));
console.log(filteredUsers);

 

 

3) 조건에 따른 데이터 변형

const scores = [85, 92, 78, 90, 88];

// 90점 이상인 점수만 필터링하여 등급 부여
const gradedScores = scores.filter((score) => score >= 90).map((score) => `${score} - A`);
console.log(gradedScores);

 

728x90
반응형