[Javascript] Array filter

배열에 쓰이는 filter 함수는 콜백함수의 조건을 만족하는 요소들만 통과시켜 새로운 배열을 반환한다.

정의

Array.prototype.filter ( callbackFunction(element, index, array), thisArg ] )

매개변수 값으로 callback 함수가 오며, 이 callback 함수의 테스트를 통해 true인 값만 모아 새로운 배열을 반환하게 된다.
이 때, callback 함수는 배열에 0번째 index부터 순차적으로 접근한다.
callback 함수에는 element, index, array의 매개변수가 포함된다.

let numbers = [10, 4, 32, 17, 5, 2];

// 첫번째 방법 (밖에서 함수를 선언하고 filter()인자에서 callback하는 방법) 
function isBiggerThanTen (value) {
    return value > 10;
}

let result = numbers.filter(isBiggerThanTen);

console.log(result);      // [ 32, 17 ]

위 예제에서 filter 함수를 통해 numbers 배열의 값들 중 10보다 큰 값만 모아 새로운 배열을 만들었다.
매커니즘을 살펴보면 callback 함수에 index 0부터 5까지 순차적으로 callback 함수에 호출된다. 즉, 매개변수로 쓰인 value에 10, 4, 32, 17, 5, 2가 각각 순차적으로 대입되어 callback 함수의 조건(value > 10)에서 true 값만 모아 새로운 배열을 만든다.

// 두번째 방법 (filter()의 인자에서 바로 함수를 써주는 방법) 
let result = numbers.filter((value)=> value > 10);

console.log(result);      // [ 32, 17 ]

두 번째 예제는 첫 번쨰 예제와 같은 결과를 반환하지만 callback 함수를 미리 선언하지 않고 매개변수에서 바로 함수를 써서 간결하게 작성한 방법이다.
value는 단지 매개변수이기 때문에 value 대신 어떤 값을 넣어도 똑같이 실행된다.

실전예제

예제를 통해 filter 함수의 사용법에 대해서 구체적으로 접근해보자.
fruit이라는 배열에 다양한 과일이 string 형식으로 주어져있는데, 과일 중 'ap'를 포함한 과일만 추출해서 새로운 배열을 만들어야 한다.

// Assignment 1 

let fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

function filtered () {

  let result = fruits.filter(fruit => fruit.includes('ap'))
                 
  return result;
  
}

filter 매개변수안에 fruit이란 매개변수를 가진 callback 함수가 호출되고 매개변수 fruit안에는 배열 fruits의 각 값들이 호출되며, 'ap'를 포함한 값이면 true를 반환하게 된다.

이 때, .includes()는 문자열이 특정 문자열을 포함하는지 확인하는 메서드이다.
string뿐만 아니라 array에서도 사용이 가능하다고 한다.