filter & find

이 두 메소드도 forEach와 map 메소드처럼 배열에 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드이다.

filter

filter라는 메소드를 사용하면 우리가 원하는 조건에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있다.

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

const apples = devices.filter((el) => el.brand === 'Apple');

console.log(apples);

filter 메소드와 map 메소드는 아규먼트가 되는 콜백 함수의 구조가 map 메소드와 비슷하다. 한 가지 차이점은 리턴문으로 어떤 값을 전달하는 게 아니라 true 혹은 false로 평가되는 조건식을 리턴해준다. 그러면 이 메소드를 호출한 배열을 반복하면서 콜백함수가 리턴하는 조건식이 true가 되는 요소만 모아서 새로운 배열을 리턴해주는 것이다. 이 코드를 실행해보면 brand가 "Apple"인 요소만 담겨 있는 것을 확인할 수 있다.
메소드 이름 그대로 어떤 조건에 따라 필터링된 새로운 배열을 얻고자 할 때 유용하게 활용할 수 있다. 그런데 이 filter 메소드는 항상 리턴값이 배열이기 때문에 name 프로퍼티 같이 고유한 값을 활용해서 하나만 있는 요소를 필터링 하더라도 코드를 실행해보면 결국에는 하나의 요소를 가진 배열을 리턴해주게 된다. 때로는 지금처럼 여러 값들 중에서 하나의 값만 찾고 싶을 수 있다. 이런 상황에서 find 메소드를 사용하는 것이다.

find

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

const apples = devices.filter((el) => el.brand === 'Apple');

console.log(apples);

const myLaptop = devices.find((el) => el.name === 'Gram');

console.log(myLaptop);

filter와 find가 동작하는 방식은 서로 비슷하다. 그래도 명확한 차이점은 두 가지가 있다.

1. filter는 리턴값이 배열이고 find는 값이다.
2. 같은 배열에서 메소드를 호출하더라도 반복하는 횟수에 차이가 있을 수 있다.
   find의 경우 조건을 만족하는 하나의 값만 찾기 때문에 그 값을 찾는 순간 반복이 종료된다. find 메소드로 배열 안에 brand가 똑같이 "Apple"인 요소를 찾는다면 이 중에서 인덱스의 위치가 좀 더 앞에 있는 요소를 찾고 반복을 종료하는 것이다.

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

하지만 상황에 따라서 우리가 존재하지 않는 요소를 찾는다거나 혹은 가장 마지막 위치에 있는 요소를 찾는다면 결국 filter 메소드와 반복 횟수가 같아지기는 한다. 반복 횟수가 달라질 수도 있다라는 부분은 프로그램의 효율 측면에서도 중요한 내용이다. 존재하지 않는 값을 find 메소드로 찾으려고 하면 undefined 값이 나온다.