본문 바로가기
Javascript/배경 & 실무 지식

[JavaScript] Filter()

by BeomBe 2024. 2. 22.
반응형

Filter()

- 자바스크립트의 filter() 함수는 배열에서 특정한 조건을 만족하는 요소들로 이루어진 새로운 배열을 생성하는 메서드입니다. filter() 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수의 반환값이 true인 요소들로 새로운 배열을 구성합니다.

 

Filter() 함수의 기본구문

const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);
  • array: 필터링을 수행할 배열입니다.
  • callback: 각 요소를 평가하는 함수로, 아래의 매개변수를 가집니다.
    • element: 배열 내 현재 처리 중인 요소.
    • index (선택사항): 배열 내 현재 처리 중인 요소의 인덱스.
    • array (선택사항): filter()를 호출한 배열.
  • thisArg (선택사항): 콜백 함수 내에서 this로 사용할 값.

 

Filter() 를 통해 필터링하는 예시를 보여드리겠습니다.

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

// 조건: 값이 3보다 큰 요소들로만 이루어진 배열 생성
const filteredNumbers = numbers.filter(function(number) {
  return number > 3;
});

console.log(filteredNumbers); // [4, 5, 6]

 

numbers 배열에서 filter() 함수를 사용하여 값이 3보다 큰 요소들로만 이루어진 filteredNumbers 배열을 생성했고, 콜백 함수는 각 요소를 평가하고, number > 3 조건에 맞는 요소들만 true로 반환하여 새로운 배열을 생성합니다.

 

추가적으로 예시를 하나 더 들면,

const products = [
  { name: 'Apple', price: 1000 },
  { name: 'Banana', price: 500 },
  { name: 'Orange', price: 1500 },
  { name: 'Grapes', price: 2000 },
];

// 조건: 가격이 1000보다 크고 2000보다 작은 상품들로만 이루어진 배열 생성
const filteredProducts = products.filter(function(product) {
  return product.price > 1000 && product.price < 2000;
});

console.log(filteredProducts);
// [{ name: 'Orange', price: 1500 }]

Products배열에서 filter()함수를 통해 1000보다 크고 2000보다 작은 상품을 필터링하도록 했습니다.

콜백 함수는 해당 조건에 맞는 요소만 true로 반환해 새로운 배열인 filterProducts를 생성합니다.

 

아래 예시에서는 길이가 7이상이면서 첫글자가 S인 요소를 구분하는 예시입니다.

const words = ['Sunday', 'Monday', 'Tuseday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// 조건: 길이가 7 이상이면서 첫 글자가 'S'로 시작하는 요소들로만 이루어진 배열 생성
const filteredWords = words.filter(function(word) {
  return word.length >= 7 && word.charAt(0) === 'S';
});

console.log(filteredWords);
// ['Saturday']

 

이처럼 filter()함수를 사용하면 다양한 조건을 적용하여 배열을 필러팅 할 수 있고, 필요에 따라 콜백 함수를 작성하여 원하는 결과를 얻을 수 있습니다.

 

코딩테스트에서도 활용도가 높으니 알아두시면 편리합니다.

반응형