Javascript filter()란?

Javascript filter()란?

 

 

자바스크립트에서 `filter()` 메서드는 배열 내의 요소를 필터링하여 새로운 배열을 만드는 데 사용됩니다. 이 메서드는 각 요소에 대해 주어진 함수를 호출하고, 그 함수가 `true`를 반환하는 요소만 모아서 새로운 배열을 반환합니다. `filter()` 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환하므로 함수형 프로그래밍에서 유용하게 사용됩니다.

`filter()` 메서드는 일반적으로 콜백 함수를 사용하여 배열 요소를 평가합니다. 이 콜백 함수는 세 가지 매개변수를 받습니다. 첫 번째 매개변수는 현재 요소의 값, 두 번째 매개변수는 현재 요소의 인덱스, 세 번째 매개변수는 배열 전체입니다.

간단한 예시로 시작해보겠습니다. 다음은 숫자로 이루어진 배열에서 짝수만 필터링하는 예제입니다.

 

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

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // 출력: [2, 4, 6]
```

위의 코드에서 `filter()` 메서드는 배열 `numbers`의 각 요소를 순회하며 콜백 함수를 호출합니다. 콜백 함수에서는 각 요소를 2로 나눈 나머지가 0인지를 확인하여 짝수인지를 판별하고, 그 결과가 `true`인 요소만 새로운 배열 `evenNumbers`에 포함시킵니다.

더 복잡한 예시를 살펴보겠습니다. 다음은 객체로 이루어진 배열에서 특정 조건을 만족하는 요소만 필터링하는 예제입니다.

```javascript
const products = [
  { name: '스마트폰', price: 800 },
  { name: '노트북', price: 1200 },
  { name: '테블릿', price: 500 },
  { name: '이어폰', price: 100 }
];

const affordableProducts = products.filter(function(product) {
  return product.price <= 1000;
});

console.log(affordableProducts);
// 출력: [{ name: '스마트폰', price: 800 }, { name: '테블릿', price: 500 }, { name: '이어폰', price: 100 }]
```

반응형

위의 코드에서는 `filter()` 메서드를 사용하여 `products` 배열에서 가격이 1000 이하인 상품만 필터링합니다. 콜백 함수는 각 상품 객체를 받아 해당 상품의 가격이 1000 이하인지를 확인하고, 그 결과가 `true`인 상품만 `affordableProducts` 배열에 담습니다.

`filter()` 메서드는 화살표 함수를 사용하여 더 간결하게 표현할 수도 있습니다.

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

화살표 함수를 사용하면 코드가 더 간결해지고 가독성이 향상됩니다.

또한, `filter()` 메서드는 체인으로 연결하여 사용할 수 있습니다. 이를 통해 여러 필터 조건을 한 번에 적용할 수 있습니다.

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

const filteredNumbers = numbers
  .filter(number => number % 2 === 0) // 짝수 필터링
  .filter(number => number > 2); // 2보다 큰 숫자 필터링

console.log(filteredNumbers); // 출력: [4, 6]
```

위의 코드에서는 먼저 짝수를 필터링하고, 그 결과에서 2보다 큰 숫자만 필터링하여 최종 결과를 얻습니다.

`filter()` 메서드를 사용하면 배열을 효율적으로 필터링할 수 있으며, 함수형 프로그래밍의 개념을 적용하여 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다.