1. filter

filter method를 활용하면, 원하는 족너에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있다.

argument가 되는 콜백 함수의 구조는 map method와 비슷하지만, 리턴문으로 값을 전달하는 것이 아니라, true 혹은 false로 평가되는 조건식을 리턴해준다는 점에서 차이가 존재한다.

filter는 method를 호출한 배열을 반복하면서, 콜백 함수라 리턴하는 조건식이 true가 되는 요소들만 모아서 새로운 배열을 리턴해준다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'iPad', brand: 'Apple'},
  {name: 'GalaxyWatch', brand: 'Samsung'}
];

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

console.log(apples);
.
.
.
>>> [
      { name: 'MacbookPro', brand: 'Apple' },
      { name: 'iPad', brand: 'Apple' }
    ]

filter method의 리턴값은 항상 배열이기 때문에, name 프로퍼티와 같은 고유한 값을 활용해서 하나만 있는 요소를 필터링 하는 경우에도 배열을 리턴한다.

때문에, spread 등을 활용해서 배열을 벗겨내는 작업이 추가적으로 필요하다.

만약, 하나의 값만 찾고 싶다면, filter가 아닌 find를 활용하는 것이 좋다.

2. find

위의 코드에서 filter를 find로 바꿔주기만 하면 될 정도로, 동작하는 방식은 비슷하다.

const devices = [
  {name: 'GalaxyNote', brand: 'Samsung'},
  {name: 'MacbookPro', brand: 'Apple'},
  {name: 'iPad', brand: 'Apple'},
  {name: 'GalaxyWatch', brand: 'Samsung'}
];

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

console.log(apples);
.
.
.
>>> { name: 'MacbookPro', brand: 'Apple' }

다만, filter는 리턴값이 배열이지만, find의 리턴값은 값이다.

또한, 같은 배열에서 method를 호출하더라도 반복하는 횟수에 차이가 있을 수 있다.

find의 경우, 조건을 만족하는 하나의 값만 찾기 때문에, 그 값을 찾는 순간 반복이 종료되기 때문이다.

즉, 중복되는 값이 있더라도, 제일 앞에 있는 값만 찾고 종료한다.

만약, 존재하지 않는 값을 find method로 찾으려고 하면, undefined가 출력된다.