배경
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 메서드를 사용하는 것이 효율적인 연산과 성능에 도움이 될 것 같다.
참고자료
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.