[자바스크립트] filter() 사용법

filter() 함수는 JavaScript의 배열 객체에 내장된 함수로, 주어진 함수의 테스트를 통과하는 모든 요소를 포함하는 새로운 배열을 생성합니다.

1. 기본 문법

 

array.filter(function(currentValue, index, array){
    // 조건을 만족하는 요소만 추출하여 새 배열을 만들어 반환
}, thisArg);

 

• currentValue : 현재 처리되고 있는 요소 값
• index : 현재 처리되고 있는 요소의 인덱스 값
• array : filter() 메서드가 적용된 배열
• thisArg : 선택 항목으로서, 함수 실행 시 this로 사용될 객체를 지정

 

filter() 함수는 주어진 함수를 사용하여 각 요소를 검사하며, 조건을 만족하는 요소만 추출하여 새로운 배열을 만듭니다. 반환된 새로운 배열은 원래 배열과 동일한 순서를 유지합니다.

2. 예제 코드

 

예를 들어, 다음과 같은 배열이 있다고 가정해 봅시다.

 

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

이 배열에서 짝수만 추출하여 새로운 배열을 만드는 경우, 다음과 같이 filter() 함수를 사용할 수 있습니다.

 

const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6, 8]

위 코드에서, filter() 함수는 주어진 함수(function(number) { return number % 2 === 0; })를 사용하여 각 요소를 검사합니다. 이 함수는 각 숫자를 2로 나눈 나머지가 0인지 확인하여, 짝수인지를 판별합니다. filter() 함수는 이 함수의 결과가 true인 요소만 추출하여 새로운 배열(evenNumbers)을 반환합니다.

따라서, evenNumbers 배열에는 numbers 배열에서 짝수에 해당하는 값만 저장됩니다.

 

const words = ['apple', 'banana', 'cherry', 'orange', 'pineapple'];

const filteredWords = words.filter(function(word) {
  return word.length > 5 && word.includes('a');
});

console.log(filteredWords); // ['banana', 'orange', 'pineapple']

 

이 예시에서는 words 배열에서 길이가 5보다 크고, 'a'를 포함하는 단어만 추출하여 새로운 배열을 만들어 반환합니다.

filter() 함수를 호출할 때, 인자로 전달된 함수는 매개변수 word를 받아서 word.length > 5 && word.includes('a') 라는 조건식을 평가합니다. 이 조건식이 true를 반환하면, filter() 함수는 해당 요소(word)를 반환할 배열에 추가합니다.

따라서, filteredWords 배열에는 words 배열에서 조건을 만족하는 'banana', 'orange', 'pineapple'이 저장됩니다.

3. 주의 사항

 

filter() 함수를 사용할 때 주의할 점은 두 가지입니다.

첫 번째는 filter() 함수는 새로운 배열을 반환한다는 것입니다. 따라서, 기존 배열의 요소를 수정하거나 삭제하지 않습니다. 이는 함수형 프로그래밍에서 중요한 개념 중 하나이며, 원본 데이터를 보존하고 새로운 데이터를 생성하는 것이 좋습니다.

두 번째는 콜백 함수의 반환 값이 반드시 true 또는 false가 아니라, 'truthy'와 'falsy'한 값 중 하나라는 것입니다. 따라서, 콜백 함수에서 명시적으로 true 또는 false를 반환하지 않아도 됩니다.

예를 들어, 다음과 같은 예시에서는 콜백 함수에서 직접 true를 반환하는 대신 문자열 'hello'를 반환하고 있습니다.

 

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

const filteredNumbers = numbers.filter(function(number) {
  return number % 2; // 짝수면 0, 홀수면 1을 반환
});

console.log(filteredNumbers); // [1, 3, 5, 7, 9]

이 예시에서는 콜백 함수에서 number % 2 연산 결과가 0이면 false로 간주되고, 0이 아니면 true로 간주됩니다. 따라서, 홀수를 추출할 수 있습니다.