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
반응형
'STUDY > JavaScript' 카테고리의 다른 글
JavaScript에서의 비동기 처리 - async/await (0) | 2023.11.25 |
---|---|
Javascript 배열 순회 forEach 메서드 (0) | 2023.11.21 |
Javascript에서 배열 합성과 가공을 하는 reduce 메서드 (0) | 2023.11.21 |
Javascript 배열 처리를 위한 메서드들 (0) | 2023.11.20 |
JavaScript에서 배열 변형과 데이터 가공을 위한 map메서드 (0) | 2023.11.17 |