JavaScript에서 filter
와 find
는 배열(Array) 객체의 메서드로, 배열 요소를 조건에 맞게 검색하거나 필터링하는 데 사용된다. 그러나 두 메서드는 목적과 동작 방식에서 차이가 있다.
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]
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" }
filter
: 조건을 만족하는 모든 요소를 새 배열로 반환한다.find
: 조건을 만족하는 첫 번째 요소를 반환하며, 해당하는 요소가 없으면 undefind
를 반환한다.filter
: 조건을 만족하는 모든 요소를 찾아 새 배열에 담는다.find
: 조건을 만족하는 첫 번째 요소만을 찾아 반환한다.filter
: 여러 개의 요소를 조건에 맞게 필터링하여 처리해야 할 때 유용하다.find
: 단 하나의 요소만 필요하며, 조건에 맞는 첫 번째 요소를 찾고자 할 때 사용한다.