[Javascript] Array filter 맛깔나게 써보기

가장 많이 사용하는 자료형 중에 하나인 Array의 메소드 중에 존엄 filter에 대해서 알아보자.

📖MDN부터 살펴보기

Array.prototype.filter() - JavaScript | MDN

"filter 메소드는 조건을 통과(참)하는 모든 요소를 모아서 새로운 배열로 반환한다"

 

배열 데이터에서 원하는 조건의 요소들만 쏙쏙 뽑아서 반환할 수 있는 킹갓제네럴 메소드라고 할 수 있다.

filter 워딩 그대로 배열을 필터링해주는 메소드이다.

 

filter를 사용하지 않고 똑같은 기능을 하게 만드려면

새로운 배열을 선언해서 각각 for문에 if문을 사용해서

조건을 통과하는 요소를 새로운 배열에 push해주는 작업이 필요한데

 

filter를 사용하면 가독성도 높아지고 코드길이도 줄여줄 수 있다.

Syntax

arr.filter(callback(element[, index[, array]])[, thisArg])

callback 파라미터로 element, index, array 세가지를 받는다.

index, array는 optional이라서 필요에 따라 사용하면 된다.

 

사용법에 따라 예시 몇 개를 살펴보자.

filter 예시 살펴보기

let filtered = [12, 5, 8, 130, 44].filter(value => value >= 10);
// filtered [12, 130, 44]

10보다 크거나 같은 요소만 뽑아서 filtered 배열을 반환했다.

 

let numbers = [123, 34, 5654, 2342, 143, 675]
let filtered = numbers.filter((_, idx) => idx > 3)
filtered
// (2) [143, 675]

 

두번째 parameter인 index를 이용해서도 사용할 수 있다.

 

세번째 parameter인 array는 정확히 어떤 역할을 하는지도 살펴보자

let numbers = [123, 34, 5654, 2342, 143, 675]

let filtered = numbers.filter((num, _, arr) => {
    console.log(arr);
    return num > 1000
})

// [123, 34, 5654, 2342, 143, 675]
// [123, 34, 5654, 2342, 143, 675]
// [123, 34, 5654, 2342, 143, 675]
// [123, 34, 5654, 2342, 143, 675]
// [123, 34, 5654, 2342, 143, 675]
// [123, 34, 5654, 2342, 143, 675]

세번째 parameter를 콘솔창에 찍어보면 numbers가 출력된다.

arr을 통해서 numbers에 접근할 수 있다.

 

예시를 통해서 다시 한번 살펴보자.

let words = ['spray', 'limit', 'exuberant', 'destruction', 'elite', 'present'];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += ' extra';
  return word.length < 6;
});

console.log(modifiedWords);
// ['spray']
console.log(words);
// ['spray', 'limit extra', 'exuberant extra', 'destruction extra', 'elite extra', 'present extra', 'undefined extra']

필터링을 하는 동시에 객체에 접근해서 for문의 역할도 같이 할 수 있다.

 

👀백문이 불여일견

프로그래머스 | 나누어 떨어지는 숫자 배열

프로그래머스

※ for문을 사용하지 말고 filter메소드를 이용해서 풀어보자.

풀이

function solution(arr, divisor) {
    let answer = arr.filter(num => !(num % divisor));
    if(!answer.length){
      answer.push(-1)
    } else{
      answer.sort((a,b) => a-b)    
    }
    return answer;
}

 

filter를 안쓰고 풀었을 때는 이렇게 풀 수 있다.

function solution(arr, divisor) {
    let answer = [];
    arr.forEach((num) => {
        if(num % divisor === 0) {
            answer.push(num);
        }
    })
    if(!answer.length){
        answer.push(-1)
    }else{
        answer.sort((a,b) => a-b)
    }
    return answer;
}

어우.. 웬만하면 filter 써야겠죠?