자바스크립트 find() 함수 조건에 맞는 요소 찾기

find() 함수는 배열에서 주어진 콜백 함수의 조건을 만족하는 첫 번째 요소를 반환합니다. 콜백 함수가 true를 반환하는 요소를 찾으면 검색을 중지하고 해당 요소를 반환합니다. 만약 어떤 요소도 조건을 만족하지 않으면 undefined를 반환합니다.

 

 

 

◎ 1. 구문

 

array.find(callback(element[, index[, array]])[, thisArg])

l  callback: 배열의 각 요소에 대해 실행할 함수.

l  element: 현재 배열 요소.

l  index (선택 사항): 배열 요소의 인덱스.

l  array (선택 사항): callback이 호출된 배열.

l  thisArg (선택 사항): callback 함수 내에서 this로 사용할 값.

 

 

◎ 2. 숫자 배열에서 첫 번째 짝수 찾기

 

화살표 함수 element => element % 2 === 0는 각 요소가 짝수인지 확인하는 조건입니다. element % 2 === 0는 현재 요소가 2로 나누어 떨어지는지를 검사하는 조건이며, 짝수일 경우 true를 반환합니다. 결과적으로, firstEven 변수에는 배열 numbers에서 처음으로 발견된 짝수 값이 저장됩니다.

 

const numbers = [1, 3, 5, 8, 9, 10];
const firstEven = numbers.find(element => element % 2 === 0);


[출력]
8

 

 

◎ 3. 문자열 배열에서 요소 찾기

 

주어진 코드는 배열 fruits에서 특정 문자열("a")을 포함하는 첫 번째 요소를 찾는 find 메서드를 사용하는 JavaScript 코드입니다. find 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 콜백 함수가 true를 반환하는 첫 번째 요소를 찾습니다. 화살표 함수 element => element.includes("a")는 각 요소가 문자열 "a"를 포함하는지를 확인하는 조건입니다. 결과적으로, fruitWithLetterA 변수에는 배열 fruits에서 처음으로 발견된 "a"를 포함하는 과일 이름이 저장합니다.

 

const fruits = ["apple", "banana", "cherry", "date"];
const fruitWithLetterA = fruits.find(element => element.includes("a"));
 
[출력]
"apple"

 

 

◎ 4. 객체 배열에서 특정 조건을 만족하는 요소 찾기

 

find  메서드는 각 객체에서 age 변수의 값이 30 인 경우 해당 객체를 반환합니다.

 

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];
const person = people.find(element => element.age === 30);
 
[출력]
{ name: "Bob", age: 30 }

 

 

◎ 5. 조건을 만족하는 요소가 없는 경우

 

find() 함수를 사용하면 배열에서 조건을 만족하는 첫 번째 요소를 검색할 수 있으며, 조건을 만족하는 요소가 없는 경우 undefined가 반환됩니다.

 

const numbers = [11, 13, 15, 17, 19];
const firstEven = numbers.find(element => element % 2 === 0);
 
[출력]
undefined