배열 메소드 filter 알아보기

filter()란?

filter라는 이름에서 알 수 있듯이 배열 속에서 필요한 것들만 남길 수 있게 해줍니다. 물론 이런 상황은 for문을 통해서 처리될 수 있습니다. 

const len3 = [];
const arr = ["lemon", "candy", "hot", "pie"];

for(let i=0; i<arr.length; i++) {
  if (arr[i].length === 3) len3.push(arr[i]);
};

//len3 = ["hot", "pie"];

arr이라는 배열 안에는 랜덤단어가 들어있습니다. 그 안에서 3글자로 이뤄진 단어만 len3에 넣어야 한다고 할 때 for문을 통해서 조건에 맞는 값을 넣을 수 있습니다. 하지만 이 식이 filter 메소드를 만나면 훨씬 간단해질 수 있습니다. 

const arr = ["lemon", "candy", "hot", "pie"];
const len3 = arr.filter(x => x.length === 3);
//len3 = ["hot", "pie"];

맨 처음 코드와 동일한 배열을 만들어 냅니다. 이처럼 filter 메소드를 통해서 아주 간단히 배열에서 필요한 부분만 골라내 새로운 배열을 만들어낼 수 있습니다.

const beverage = [
  {name: "아메리카노", price: 3700},
  {name: "카페라떼", price: 4200},
  {name: "쟈스민", price: 3000},
  {name: "프라푸치노", price: 5100},
  {name: "카페모카", price: 4400}
];

음료에 대한 정보가 담긴 배열입니다. 이 배열을 예시로 filter 메소드를 사용해보겠습니다. 제 카드 잔액이 4300원이라면 프라푸치노는 먹지 못하겠죠? 제가 먹을 수 있는 음료수를 골라내볼까요?

const canDrink = beverage.filter(x => x.price < 4300);

canDrink 배열에는 아메리카노와 카페라떼, 쟈스민이 들어있는 것을 확인할 수 있습니다. filter의 콜백함수에는 현재의 값만 들어올 수 있을까요? 

콜백함수의 매개변수에는 현재의 값, 인덱스, 배열 전체를 받습니다.

이런 부분들은 저번 포스팅에서 다뤘던 map 메소드와 매우 유사합니다. 함께 알아두면 좋습니다. 포스팅으로 바로 이동은 아래 링크를 클릭해주세요.

배열 메소드 map 알아보기 

공감은 제작자에게 큰 힘이 됩니다.