[JavaScript] 자바스크립트 filter 메서드 이해하기

Filter 메서드란?

filter 메서드는 이름에서도 유추할 수 있듯 특정 조건을 만족하는 요소들을 걸러내는 배열(Array)의 메서드다.

숫자들만 모인 배열에서 특정 값 이상의 숫자들만 모은다거나, 여러 객체들이 모여있는 배열에서 특정 프로퍼티를 가진 값들만 모으는 경우에 유용하게 활용할 수 있다.

문법은 forEach, map과 거의 비슷하게 첫 번째 파라미터가 콜백 함수를 전달받으며, map과 같이 새로운 배열을 리턴한다.

 

문법

const number = [1, 2, 3, 4, 5];

const newNumber = number.filter((currentElement, index, currentArray) => {
  console.log(`요소: ${currentElement}`);
  console.log(`index: ${index}`);
  console.log(currentArray);
    
  return currentElement > 3;
});

console.log('newNumber'); // newNumber
console.log(newNumber); // [4, 5]

앞서 설명한 것처럼 문법은 forEach나 map과 비슷하다. 콜백 함수의 파라미터는 요소(currentElement), 요소의 인덱스(index) 그리고 현재 filter메서드를 호출한 배열(currentArray)이다.

그리고 filter메서드는 여기서 map 메서드와 마찬가지로 새로운 배열을 리턴하기 때문에 콜백 함수의 리턴 값이 중요하다. 

 

map 메서드의 경우에는 콜백 함수가 리턴하는 값이 새로운 배열에 하나씩 바로바로 추가되는 반면, filter 메서드의 경우에는 이 콜백 함수가 리턴한 값이 boolean 타입으로 평가되는데, 이 평가에 따라 최종적으로 filter 메서드가 리턴할 새로운 배열의 요소가 결정된다.

즉, 콜백함수의 리턴 값이 truthy하면 새로운 배열에 추가, falsy하면 버림받는 식으로 Filter 라는 메서드 이름처럼 요소들이 걸러지는 것이다.

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있다.

결국, 콜백함수의 리턴을 조건부로 잘 활용하는 것이 filter 메서드의 핵심이라고 할 수 있겠다.

const palindrome = ['스위스', 'kayak', '기러기', 'racecar', '토마토', '역삼역', 'level', '우영우'];

const threeWords = palindrome.filter(word => word.length === 3);

console.log(threeWords); // ['스위스', '기러기', '토마토', '역삼역', '우영우']

위 코드처럼 화살표 함수의 다양한 표현방식을 활용해서 더 간결하게 작성할 수도 있다.

참고

앞서 설명했든 filter 메서드에서 활용하는 콜백 함수는 boolean 타입으로 평가한다.

그럼 다음과 코드는 어떤 결과를 도출할까?

const values = [false, true, 0, 1, '', 'string', undefined, null, {}, []];

const returnValues = values.filter(value => value);

console.log(returnValues); // ?

총 10가지 종류의 값들을 그대로 filter 메서드로 걸러보면,

falsy 한 false, 0, ''(빈문자열), undefined, null 은 제외되고 truthy 한 결과만 출력되는 모습을 볼 수 있다.