[JavaScript] filter()

 

filter()

자바스크립트의 filter 메서드는 주어진 함수의 조건을 만족하는 요소들만을 모아 새로운 배열로 반환합니다.

원래 배열을 변경하지 않으며, 특정 조건에 맞는 요소들만 걸러내 새로운 배열을 반환합니다.

 

filter 메서드는 콜백 함수를 인자로 받습니다.

이 콜백 함수는 배열의 각 요소에 대해 호출되며,

요소가 조건을 만족하면 true를,

만족하지 않으면 false를 반환합니다.

const newArray = oldArray.filter((element, index, array) => {
  // 조건을 만족하면 true 반환
});

 

• element: 현재 처리 중인 배열의 요소
• index(선택): 현재 처리 중인 배열 요소의 인덱스
• array(선택): filter 메서드를 호출한 배열 자체

 

예제 1: 짝수만 필터링하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

filter 메서드를 사용하여 짝수(number % 2 === 0)인 요소들만을 새로운 배열 evenNumbers로 반환합니다.

 

 

예제 2: 특정 문자열을 포함하는 요소 필터링하기

const fruits = ['Apple', 'Banana', 'Grapes', 'Orange', 'Pineapple'];

const fruitsWithA = fruits.filter(fruit => fruit.includes('p') || fruit.includes('P'));

console.log(fruitsWithA); // (3) ['Apple', 'Grapes', 'Pineapple']

 

filter 메서드를 사용하여 문자열 'p' 또는 'P'를 포함하는 과일들만을 새로운 배열 fruitsWithA로 반환합니다.

 

 

예제 3: 객체 배열에서 특정 조건을 만족하는 객체 필터링하기

const people = [
  { name: 'Alice', age: 22 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 27 }
];

const adults = people.filter(person => person.age >= 25);

console.log(adults); 
// [{ name: 'Bob', age: 25 }, { name: 'Charlie', age: 27 }]

filter 메서드를 사용하여 나이가 25 이상인 사람들만을 새로운 배열 adults로 반환합니다.

 

 

Recap

• filter 메서드는 항상 새로운 배열을 반환하므로 원래 배열은 변경되지 않습니다.
• 대량의 데이터를 다룰 때는 filter 메서드를 사용할 경우 성능에 유의해야 합니다.
  조건이 복잡하거나 데이터가 많을수록 실행 시간이 길어질 수 있습니다.
• filter 메서드를 사용하는 동안 콜백 함수 내에서 부수 효과(side effects)를 일으키지 않도록 주의해야 합니다.
  부수 효과가 있는 경우 예기치 않은 동작이 발생할 수 있습니다.

 

부수 효과를 피하기 위한 권장 사항

1. 함수 내에서 전역 변수 사용을 피하세요.
2. 함수 내에서 외부 변수의 값을 변경하지 마세요.
3. 데이터베이스나 파일 시스템에 직접 접근하지 마세요.
4. 네트워크 요청을 함수 내부에서 하지 마세요.
5. 가능한 한 함수가 입력값만을 사용하여 결과를 반환하도록 작성하세요.