[JS] 배열 메소드 filter, find 설명 그리고 차이점!

스머리·2023년 8월 15일
0

JavaScript

목록 보기
17/23

JavaScript에서 filterfind는 배열(Array) 객체의 메서드로, 배열 요소를 조건에 맞게 검색하거나 필터링하는 데 사용된다. 그러나 두 메서드는 목적과 동작 방식에서 차이가 있다.

1. filter 메서드

filter 메서드는 배열 내의 모든 요소를 순회하면서 주어진 조건 함수를 만족하는 요소들을 모아 새로운 배열을 반환한다. 즉, 조건에 맞는 여러 개의 요소를 추출하여 새로운 배열로 반환한다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(number => number % 2 === 0);
// 결과: [2, 4, 6, 8, 10]



2. find 메서드

find 메서드는 배열 내의 요소를 순회하면서 주어진 조건 함수를 만족하는 첫 번째 요소를 반환한다. 즉, 조건에 맞는 첫 번째 요소를 찾아 반환하며, 이후의 요소는 검사하지 않는다.

const fruits = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "grape", color: "purple" },
];

const yellowFruit = fruits.find(fruit => fruit.color === "yellow");
// 결과: { name: "banana", color: "yellow" }



3. 차이점

  1. 반환값:
  • filter: 조건을 만족하는 모든 요소를 새 배열로 반환한다.
  • find: 조건을 만족하는 첫 번째 요소를 반환하며, 해당하는 요소가 없으면 undefind를 반환한다.
  1. 동작:
  • filter: 조건을 만족하는 모든 요소를 찾아 새 배열에 담는다.
  • find: 조건을 만족하는 첫 번째 요소만을 찾아 반환한다.
  1. 사용 예시:
  • filter: 여러 개의 요소를 조건에 맞게 필터링하여 처리해야 할 때 유용하다.
  • find: 단 하나의 요소만 필요하며, 조건에 맞는 첫 번째 요소를 찾고자 할 때 사용한다.
profile
꾸준히 나아가는 프론트엔드 개발자

0개의 댓글