// 배열을 만듭니다.
const colors = ["red", "green", "blue"];

// 개발자가 직접 작성한 콜백 함수
function findGreen(color) {
    return color === "green"; // 배열 요소가 "green"과 같은지 확인합니다.
};

// 배열에서 조건을 만족하는 첫 번째 요소를 찾습니다.
const green = colors.find(findGreen);

// 결과를 출력합니다.
console.log(green); // 출력: "green"
arr.find(callbackFn[, thisArg])
// 화살표 함수
find((element) => { /* … */ })
find((element[, index]) => { /* … */ })
find((element[, index[, array]]) => { /* … */ })

// 콜백 함수
find(callbackFn)
find(callbackFn[, thisArg])

// 인라인 콜백 함수
find(function (element) { /* … */ })
find(function (element[, index]) { /* … */ })
find(function (element[, index[, array]]) { /* … */ })
find(function (element[, index[, array]]) { /* … */ }[, thisArg])
callbackFn(element[, index[, array]])
/**
 * 콜백 함수
 *
 * @param {*} element 배열의 각 요소
 * @param {number} index 배열의 인덱스 (선택적)
 * @param {Array} array 원본 배열 (선택적)
 * @return {boolean} 필터링 조건을 충족하면 true, 그렇지 않으면 false 반환
 *
 * 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
 * (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
 */

/* 콜백 함수를 기명 함수를 사용할 경우 */
function callbackFn(element[, index[, array]]) { // 기명 함수 정의
	// return 문을 사용하여 조건을 정의합니다.
}

arr.find(callbackFn); // 정의한 기명 함수명을 매개변수에 직접 전달

/* 콜백 함수를 익명 함수로 사용할 경우 */
arr.find(function (element[, index[, array]]) {
    // return 문을 사용하여 조건을 정의합니다.
});
const numbers = [1, 2, 3, 4, 5];
const target = 3;
const found = numbers.find(element => element === target);

console.log(found); // 출력: 3
const people = [
    {name: "Alice", age: 30},
    {name: "Bob", age: 25},
    {name: "Charlie", age: 35}
];

const targetName = "Bob";
const person = people.find(obj => obj.name === targetName);

console.log(person); // 출력: {name: "Bob", age: 25}
const products = [
    {name: "Laptop", price: 1000},
    {name: "Phone", price: 500},
    {name: "Tablet", price: 300}
];

const customCondition = product => product.price < 600;
const affordableProduct = products.find(customCondition);

console.log(affordableProduct); // 출력: {name: "Phone", price: 500}

caniuse.com에서 더 자세한 정보를 확인해 보세요.