[JavaScript] 자바스크립트 배열 filter 함수 사용 방법 예제모음

저번에는 많이 쓰이는 자바스크립트 배열 메서드 중 하나인 forEach 함수에 대해 다루어 보았습니다.

[JavaScript] forEach 함수 예제, 사용법

이번 포스팅에서는 마찬가지로 많이 쓰이는 배열 메서드 중 하나인 filter 함수에 대해 다루어 보겠습니다.

배열 관련 작업을 할 때 배열에서 특정 조건에 부합하는 요소들로 하여금 새로운 배열을 만들어 내고 싶었던 경우가 있을겁니다. 그 때 유용하게 사용할 수 있는 메서드가 filter 메서드인데요.

함수명에서부터 유추할 수 있듯이 배열에서 특정 요소들만 남게 filter를 씌워준다~라는 느낌으로 이해하시면 될 거 같습니다.

배열 filter 메서드 구문

배열.filter(“콜백 함수”)

기본적으로 filter 메서드는 다음과 같이 사용할 수 있습니다.

배열.filter("콜백 함수")

매개변수로 “콜백 함수”를 받는데, 이 함수는 배열에서 어떤 요소들을 유지할지 또는 어떤 요소들을 필터로 걸러낼지를 정해주며, 각 요소에 대해 실행됩니다.

“콜백 함수”는 세가지의 인자를 filter 메서드를 통해 활용할 수 있습니다.

element: 현재 배열의 요소를 의미합니다.
index: 현재 요소의 색인(index)을 의미합니다.
array: filter 메서드를 호출한 배열을 의미합니다.

“콜백 함수”는 유지하고 싶은 요소들에게는 true를, 걸러내고 싶은 요소들에게는 false를 반환해야 합니다. ( filter 메서드는 이후 true가 반환된 요소들로만 하여금 새로운 배열을 생성하여 반환합니다.)

다음 사용예제를 통해 위 설명을 종합해 보겠습니다.

아래 예제에서는 filter 메서드를 통하여 1~5까지의 숫자가 들어있는 배열에서 짝수 요소들만 유지하여 새 배열을 생성하려 합니다.

const A = [1, 2, 3, 4, 5]; // 배열 A

function evenOrOdd(number, idx, arr) {

  console.log(`element:${number}`); // element 출력
  console.log(`index:${idx}`); // index 출력
  console.log(`array:${arr}`); // arr 출력
  console.log(""); // 빈 줄 출력

  if (number % 2 == 0) { 
    return true; // 2로 나누었을때 나머지가 0이면 짝수, return true
  } else {
    return false; // 나머지가 0이 아니면 홀수, return false
  }
}

const B = A.filter(evenOrOdd);

console.log(`반환된 새 배열:${B}`);

결과값:

라인 17에서 filter 메서드가 배열 A에 대해 호출되었고, 매개변수로 “콜백 함수” evenOrOdd가 라인 3부터 15 사이에 정의 됐습니다. number, idx, arr라는 인자들을 받고, 이는 순서대로 element, index, array 입니다. ( 즉, “콜백 함수”의 매개변수는 이름이 아닌 순서로 정의된다는 것을 알 수 있습니다. 첫번째 매개변수가 항상 element, 두번째가 index, 세번째가 array입니다. )

결과값에서도 볼 수 있듯이 “콜백 함수”는 각 요소마다 호출되기 때문에 배열 A의 총 요소 개수(5)만큼 호출되었고, 라인 5에서 8에 있는 콘솔 로그에 따라 각 element, index, array의 값들을 출력한 모습입니다.

마지막으로 filter 메서드는 짝수(2,4)만 가지고 있는 배열을 반환합니다. (배열 A의 요소 중 true가 반환된 요소들)

element는 필수지만, index와 array는 사용하지 않을거라면, 다음처럼 “콜백 함수”를 정의하여도 됩니다.

function evenOrOdd(number) {

  if (number % 2 == 0) { 
    return true; // 2로 나누었을때 나머지가 0이면 짝수, return true
  } else {
    return false; // 나머지가 0이 아니면 홀수, return false
  }
}

배열.filter(“콜백 함수”, “this”)

추가적으로 “this”라는 매개변수를 “콜백 함수”와 같이 정의할 수 있는데요. 이는 단순히 “콜백 함수” 안에서 사용될 this의 값을 정의해주는 역할입니다. 기본 값은 undefined입니다.

필수 매개변수는 아니며, 필요하지 않다면 단순히 “콜백 함수”만 매개변수로 사용해도 됩니다.

const A = [1, 2, 3, 4, 5]; // 배열 A

function evenOrOdd(number) {

  console.log(`this값:${this}`);
  
  if (number % 2 == 0) { 
    return true; // 2로 나누었을때 나머지가 0이면 짝수, return true
  } else {
    return false; // 나머지가 0이 아니면 홀수, return false
  }
}

const B = A.filter(evenOrOdd, 10);

console.log(`반환된 새 배열:${B}`);

결과값:

이렇게 추가적으로 10이라는 값을 filter 메서드 호출때 매개변수로 넣어주면, “콜백 함수” 안에서 this의 값이 10으로 정의됩니다.

배열 filter 메서드 예제모음

const creatures = [
  {name: "상어", habitat: "바다"},
  {name: "고래", habitat: "바다"},
  {name: "사자", habitat: "사바나"},
  {name: "원숭이", habitat: "정글"}
]; // 생물들의 이름과 사는 곳이 담긴 객체들의 배열

const aquaticCreatures =  creatures.filter(function(creature) {
  return creature.habitat == "Ocean"; // 바다에 사는 생물들만 true 반환
});

console.log(aquaticCreatures); // 바다에 사는 생물 배열

결과값:

const people = [
  { name: "상철", age: 32 },
  { name: "현우", age: 15 },
  { name: "진명", age: 27 },
  { name: "원희", age: 48 },
  { name: "혁우", age: 17 },
]; // 사람들의 이름과 나이가 담긴 객체들의 배열

const adults = people.filter(checkAdult);

function checkAdult(person) { // "콜백 함수" 나이가 19세 이상이면 true 반환 미만이면 false 반환
  return person.age >= 19;
}

console.log(adults); // 성인들만 있는 배열

결과값:

const prices = [1800, 2400, NaN, 3060, 5000, "6천", 1200, "abc"]; // 배열

const newPrices = prices.filter(/*콜백 함수: 숫자가 아닌 요소는 false 숫자들은 true 반환 */(price) => !isNaN(price)); 

console.log(newPrices); // 숫자만 포함된 배열