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

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

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

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

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

배열 filter 메서드 구문

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

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

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

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

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

  1. element: 현재 배열의 요소를 의미합니다.
  2. index: 현재 요소의 색인(index)을 의미합니다.
  3. 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}`);

결과값:

자바스크립트 filter 메서드 결과값

라인 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는 필수지만, indexarray는 사용하지 않을거라면, 다음처럼 “콜백 함수”를 정의하여도 됩니다.

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}`);

결과값:

자바스크립트 filter 메서드 this 결과값

이렇게 추가적으로 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); // 바다에 사는 생물 배열

결과값:

filter 메서드 예제 1 결과값

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); // 성인들만 있는 배열

결과값:

filter 메서드 예제 2 결과값

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

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

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

결과값:

filter 메서드 예제 3 결과값

위 세 예제들에서 볼 수 있듯이 “콜백 함수”는 첫 번째 예제처럼 무명함수일 수도, 두 번째 예제처럼 일급 함수일 수도, 아니면 세 번째 예제처럼 화살표 함수일 수도 있습니다.

답글 남기기