배열 탐색은 JavaScript/TypeScript 개발에서 매우 자주 사용하는 기능입니다. 그중에서도 특정 조건에 맞는 첫 번째 요소를 반환하는 find()는 직관적이면서도 강력합니다.
이번 글에서는 find() 함수의 동작 방식, filter()와의 차이, 주의해야 할 점, 최적화 포인트까지 예제를 기반으로 완벽히 정리합니다.
✅ 1. find() 함수란? — 정의
Array.prototype.find()는 배열을 앞에서부터 순차적으로 탐색하며, 콜백 함수의 조건을 만족하는 첫 번째 요소를 반환합니다.
만약 조건을 만족하는 요소가 없다면 undefined를 반환합니다.
📌 기본 문법
arr.find((item, index, array) => {
return 조건;
});파라미터 설명
| item | 현재 탐색 중인 요소 |
| index | 현재 인덱스 |
| array | 전체 배열(거의 사용되지 않음) |
✅ 2. 예제로 이해하는 find()의 실행 과정
예제 코드를 통해 실제 탐색 과정이 어떻게 진행되는지 확인해봅시다.
const items = [
{name: "jon", age:20},
{name: "linda", age:22},
{name: "jon", age:40},
{name: "anna", age:30}
]
const jon = items.find((item, index) => {
console.log('index:', index);
return item.name === "jon"
})
console.log(jon);
// { name: "jon", age: 20 }
📌 실행 순서
index: 0 → name === "jon" → true → 즉시 반환
index: 1, index: 2 … 확인 안 함!👉 조건을 만족한 순간 탐색이 즉시 중단되므로 속도가 매우 빠릅니다.
✅ 3. find()와 filter()의 차이
filter()는 조건을 만족하는 요소를 모두 배열로 반환합니다.
const filterJon = items.filter((item, index) => {
console.log('index:', index);
return item.name === "jon"
});
console.log(filterJon);
// [ { name: 'jon', age: 20 }, { name: 'jon', age: 40 } ]📌 두 함수 비교
| 반환 | 첫 번째 일치 요소 | 모든 일치 요소(배열) |
| 탐색 중단 | 첫 요소 찾으면 중단 | 끝까지 탐색 |
| 성능 | 더 좋음 | 전체 탐색하므로 느릴 수 있음 |
| 사용 목적 | 단일 값 찾기 | 여러 값 찾기 |
👉 한 개만 필요하면 무조건 find()가 더 효율적입니다.
✅ 4. 원소가 숫자인 경우 find() 예제
const listItems = [1, 2, 3, 4, 5, 6, 1];
const foundItem = listItems.find((item, index) => {
console.log('index:', index);
return item === 4;
});
console.log(foundItem);
// 4
📌 탐색 로그
index 0 → 1
index 1 → 2
index 2 → 3
index 3 → 4 ✔ (조건 충족 → 반환 종료)⚠️ 5. find() 사용 시 주의할 점
1) 조건을 만족하지 않으면 undefined가 반환됨
const value = items.find(item => item.name === "nobody");
console.log(value); // undefined→ 이후 value.property 를 접근하면 에러 발생 가능
→ Optional chaining(?.) 또는 null 체크 필수
2) 엄격한 비교 사용
===를 사용하지 않으면 타입 변환이 발생할 수 있음.
3) 깊은 비교(Deep Comparison)는 지원하지 않음
객체의 내부 값이 같은지 비교하려면 직접 조건을 작성해야 합니다.
🚀 6. find() 최적화 팁
✔ 1) 배열이 매우 크다면?
find()는 O(n) 선형 탐색 → 데이터가 10만 개 이상이라면 속도 이슈 가능.
해결 방법
- 🔸 데이터를 Map 형태로 미리 인덱싱(key-value)
- 🔸 id로 접근하는 경우라면 Map이 압도적으로 빠름
const userMap = new Map(items.map(item => [item.name, item]));
console.log(userMap.get("jon"));
✔ 2) 고정된 배열이라면 검색 함수를 재사용
const isJon = (item) => item.name === "jon";
items.find(isJon);
items.filter(isJon);✔ 3) 타입스크립트에서는 제네릭을 활용해 타입 안정성 확보
const jon = items.find((item): item is {name: string; age: number} => {
return item.name === "jon";
});📝 7. 결론
| find()는 첫 번째 매칭 요소만 찾고 즉시 종료한다 | 성능 우수 |
| filter()는 모든 매칭 요소 반환 | 전체 탐색 |
| 조건 미충족 시 undefined 반환 | null 체크 필요 |
| 대용량 배열은 Map 구조로 개선 가능 | 최적화 포인트 |
find()는 간단하지만 매우 강력한 배열 탐색 도구입니다.
특히 Node.js 백엔드에서 DB 조회 결과 배열에서 특정 요소 찾기, TypeScript 환경에서 정확한 타입을 가진 데이터 검색 같은 상황에서 아주 유용하게 활용됩니다.
'개발 & IT > 자바스크립트' 카테고리의 다른 글
| Node.js 모듈 사용법 총정리 — CommonJS(CJS)와 ES Modules(ESM) 비교 (0) | 2025.10.23 |
|---|---|
| 자바스크립트 fallback 패턴 (1) | 2025.07.03 |
| JavaScript Math.ceil() 함수 사용법과 예시 (0) | 2025.07.03 |
| dayjs에서 .tz()와 dayjs.tz()의 차이, 쉽게 이해해보기 (1) | 2025.05.27 |
| TypeScript 전역 설치 vs 로컬 설치 – 무엇을 선택해야 할까? (0) | 2025.04.02 |