배열 메소드 Ⅱ (filter, find)

filter 메소드

filter 메소드는 배열의 요소를 하나씩 살펴보면서 콜백함수가 리턴하는 조건과 일치하는 요소만 모아서 새로운 배열을 리턴하는 메소드이다. (이름 그대로 어떤 조건에 따라 필터링된 새로운 배열을 얻고자 할 때 활용할 수 있다.)

//filter
const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

//map메소드와 비슷해보인다, 아규먼트가 되는 콜백함수 구조도 비슷하다.
const apples = devices.filter((element, index, array) => {
  return element.brand === 'Apple';
});

console.log(apples); // (2) [{name: "MacbookPro", brand: "Apple"}, {name: "MacbookAir", brand: "Apple"}]

 

filter가 map과 다른점: 리턴문으로 어떤 값을 전달하는게 아니라 true 혹은 false로 평가되는 조건식을 리턴해준다.
그러면 이 메소드를 호출한 배열을 반복하면서 콜백함수가 리턴하는 조건식이 true가 되는 요소만 모아서 새로운 배열을 리턴해준다.

그런데, filter 메소드는 항상 리턴값이 배열이기 때문에 아래 코드처럼 name 프로퍼티 값이 고유한 값을 활용해서 하나만 있는 요소를 필터링하더라도 결국에는 하나의 요소를 가진 배열을 리턴해준다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.filter((element, index, array) => {
  return element.name === 'Gram';
});

console.log(myLaptop);
//출력되는 값
[{...}]

//그래서 spread 구문을 이용해서 배열을 벗겨내는 작업을 해야한다.
console.log(...myLaptop);
//출력되는 값
{name: "Gram", brand: "LG"}

find 메소드

find 메소드는 filter 메소드와 비슷하게 동작하지만, 배열의 요소들을 반복하는 중에 콜백함수가 리턴하는 조건과 일치하는 가장 첫번째 요소를 리턴하고 반복을 종료하는 메소드이다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const myLaptop = devices.find((element, index, array) => {
  console.log(index); // 콘솔에는 0, 1, 2까지만 출력됨.
  return element.name === 'Gram';
});

console.log(myLaptop); // {name: "Gram", brand: "LG"}

 

filter 와 find의 차이점

1. filter는 리턴값이 배열이고, find는 값이다.
2. 같은 배열에서 메소드를 호출하더라도 반복하는 횟수의 차이가 있을 수 있다. (프로그램의 효율 측면에서 중요! find의 경우 조건을 만족하는 하나의 값만 찾기 때문에 그 값을 찾는 순간 반복이 종료된다.)

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'Gram', brand: 'LG'},
  {name: 'SurfacePro', brand: 'Microsoft'},
  {name: 'ZenBook', brand: 'Asus'},
  {name: 'MacbookAir', brand: 'Apple'},
];

const apples = devices.filter((el, i) => {
  console.log(i);
  return el.brand === 'Apple';
});

console.log(apples);
//출력되는 값
0
1
2
3
4
5
(2) {...}, {...}

const myLaptop = devices.find((el, i) => {
  console.log(i); 
  return element.name === 'Apple';
});

console.log(myLaptop);
//출력되는 값
0
1
{name: "MacbookPro", brand: "Apple"}

filter 메소드는 조건을 만족하는 모든 값을 모아야 하기 때문에 배열의 모든 인덱스가 콘솔에 다 출력되었고, find 메소드는 조건을 만족하는 하나의 요소만 찾으면 되니까 단 두번의 인덱스만 콘솔에 출력되면서 콜백함수가 두번만 실행되고 종료되었다는걸 확인 할 수 있다.

+ 상황에 따라서 존재하지 않는 요소를 찾는다거나 가장 마지막에 위치해 있는 요소를 찾는다면 결국엔 filter 메소드와 반복횟수가 같아질 수 있다. 존재하지 않는요소를 찾으면 처음부터 마지막 인덱스까지 돈 후 undefined 값이 출력된다.