[find()] 조건에 맞는 첫 번째 값을 찾는 방법

728x90

find() 

배열에서 어떤 조건을 만족하는 값을 찾고 싶을 때, 모든 값을 반복하며 수동으로 검사하는 대신 사용할 수 있는 강력한 도구가 있습니다. 바로 find() 메서드입니다. find() 는 조건을 만족하는 첫 번째 요소 하나만 반환하기 때문에, 값을 "찾는" 데 특화된 메서드입니다. 특히 객체 배열에서 특정 키값을 기준으로 찾을 때 자주 사용됩니다.

 

---

1.  find()란?

find() 는 주어진 판별 함수를 만족하는 첫 번째 요소를 반환하는 자바스크립트 배열 메서드입니다. 해당 조건을 만족하는 요소가 없으면 undefined 를 반환합니다.

문법

arr.find(callback(currentValue[, index[, array]])[, thisArg])

• callback : 조건을 판별하는 함수
  • currentValue : 현재 처리 중인 요소
  • index (선택) : 현재 요소의 인덱스
  • array (선택) : find()가 호출된 배열
• thisArg (선택) : 콜백 실행 시 사용할 this

기본 예제

const numbers = [10, 20, 30, 40, 50];

const result = numbers.find(num => num > 25);
console.log(result); // 30

• 30은 조건(num > 25)을 만족하는 첫 번째 값입니다.
• 이후 값들은 검사하지 않습니다.

언제 쓰면 좋을까?

• 고유한 ID나 키 값으로 특정 항목을 찾을 때
• 조건을 만족하는 첫 번째 값만 필요할 때
• 성능상 첫 번째 조건만 검사하고 종료하고 싶을 때

 

---

2.  실전 예제

a.  객체 배열에서 특정 사용자 찾기

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const user = users.find(u => u.name === "Bob");
console.log(user); // { id: 2, name: 'Bob' }

b.  조건이 없는 경우

const result = [1, 2, 3].find(n => n > 5);
console.log(result); // undefined

• 조건을 만족하는 요소가 없으면 반환값은 undefined 입니다.

 

---

3.  find()와 자주 헷갈리는 메서드들

메서드	반환값	용도	조건 만족 후 동작
find()	첫 번째 값	조건에 맞는 요소 찾기	조건 만족 시 중단
filter()	조건에 맞는 배열	여러 요소를 걸러내기	끝까지 순회함
findIndex()	인덱스 번호	조건을 만족하는 인덱스 찾기	조건 만족 시 중단
some()	불리언 (true/false)	조건 만족 여부만 검사	조건 만족 시 중단

 

---

4.  자주 하는 실수와 팁

a.  반환값이 객체인 경우 속성 접근 시 undefined 체크 필수

const users = [{ name: "Jane" }];
const user = users.find(u => u.name === "John");
console.log(user.name); // ❌ TypeError: Cannot read property 'name' of undefined

해결 방법 :

if (user) {
  console.log(user.name);
} else {
  console.log("사용자를 찾을 수 없습니다.");
}

또는 optional chaining 사용 :

console.log(user?.name ?? "사용자 없음");

b.  find()는 첫 번째 하나만 반환 - 여러 개를 찾으려면 filter()

const result = [1, 2, 3, 4, 5].find(n => n % 2 === 1);
console.log(result); // 1 (홀수 중 첫 번째 값)

여러 개가 필요한 경우 filter() 사용 :

 

---

5.  마무리

• find() 는 배열에서 조건을 만족하는 첫 번째 요소를 반환합니다.
• 조건을 만족하지 않으면 undefined 를 반환합니다.
• 객체 배열 탐색, 특정 조건 체크 등에서 자주 활용됩니다.
• filter(), findIndex(), some()과 혼동하지 않도록 주의하세요.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Array.prototype.find()

 

---

반응형