[TIL] find()와 filter() 메서드의 차이

배경

udemy nextjs 수강 과정중, 배열 형태 데이터의 요소를 필터링 하는 부분에서
나는 너무나 자연스럽게 filter() 메서드를 사용했는데
강의에서는 find() 메서드를 사용하는 부분을 보고 궁금증이 생겼다.

해당코드

export async function getStaticProps(context) {
  // getStaticProps 함수 안에서 context 매개변수를 통해 동적 경로 세그먼트에 접근하여 id 추출
  const { params } = context;
  const productId = params.pid;

  // 로컬에 있는 데이터에 접근
  const filePath = path.join(process.cwd(), "data", "dummy-backend.json");
  const jsonData = await fs.readFile(filePath);
  const data = JSON.parse(jsonData);

  // 추출한 id로 접근한 데이터인 product에 대해 필터링!! (궁금증이 생긴 지점)
  const product = data.products.filter(product => product.id === productId)
}

핵심차이

• filter() 메서드는 콜백 함수의 조건을 만족하는 모든 요소를 걸러서 새로운 배열로 반환
  만족하는 요소가 없다면 빈배열을 반환
• find() 메서드는 콜백 함수의 조건을 만족하는 첫 번째 요소의 값을 반환
  만족하는 요소가 없다면 undefined를 반환

확인

let arr = [1, 2, 3, 4, 5]

resultFilter = arr.filter(el => el > 3)
resultFind = arr.find(el => el > 3)

console.log(resultFilter) // [4, 5]
console.log(resultFind) // 4

// 만족하는 값이 없는 경우
resultFilterExcept = arr.filter(el => el > 6)
resultFindExcept = arr.find(el => el > 6)

console.log(resultFilterExcept) // []
console.log(resultFindExcept) // undefined

회고

배열내 요소 필터링이라고 하면 거의 반사적으로 filter() 메서드만 사용했던 걸 벗어나 find 메서드와의 차이를 이해하고 사용할 수 있을 것 같다.
개인적인 생각으로는 조건을 만족하는 하나의 요소만 찾을 때는 find 메서드를 사용하는 것이 효율적인 연산과 성능에 도움이 될 것 같다.

참고자료

• MDN - arr.find()
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• MDN - arr.filter()
  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• 참고 블로그
  https://velog.io/@yunsungyang-omc/JavaScript-filter-find