💡 arr.find()

: 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환, 그런 요소가 없다면 undefined 를 반환

💜 구문

arr.find(callback[, thisArg])

• 매개변수

1. callback
   : 배열의 각 값에 대해 실행할 함수, 아래의 세 인자를 받음
   • element
     : 콜백함수에서 처리할 현재 요소
   • index
     : optional
     : 콜백함수에서 처리할 현재 요소의 인덱스
   • array
     : optional
     : find 함수를 호출한 배열
2. thisArg
   : optional
   : 콜백이 호출될 때 this로 사용할 객체

• Return 값
  : 주어진 판별 함수를 만족하는 첫 번째 요소의 값
  : 그 외에는 undefined

💜 특성

• callback 함수가 참을 반환 할 때까지 해당 배열의 각 요소에 대해서 callback 함수를 실행
• 만약 특정 요소를 찾았다면 find 메서드는 해당 요소의 값을 즉시 반환하고, 그렇지 않다면 undefined를 반환
• callback은 배열의 모든 인덱스에 대해 호출되며, 값이 지정되지 않은 요소도 포함
• callback 은 다음의 세 인수와 함께 호출
  • 요소 값
  • 요소 인덱스
  • 순회의 대상이 되는 배열
• find()는 호출의 대상이 된 배열을 변경하지 않음
• find()가 처리할 배열 요소의 범위는 첫 callback이 호출되기 전에 먼저 결정
  • 따라서 find 메소드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않음
  • 아직 callback 이 호출되지 않은 배열 요소가 callback 에 의해서 변경된 경우, find() 가 해당 요소의 인덱스를 방문할 때의 값으로 callback 함수에 전달
  • 삭제된 요소에도 callback 호출

💜 예시

• 예시 1. 속성 중 하나를 사용하여 배열에서 객체 찾기

const fruits = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const cherries = fruits.find(fruit => fruit.name === 'cherries')

console.log(cherries);
// {name: "cherries", quantity: 5}

• 예시 2. 배열에서 소수 찾기

function isPrime(el, idx, arr) {
  let start = 2;
  while (start <= Math.sqrt(el)) {
    if (el % start++ < 1) {
      return false;
    }
  }
  return el > 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined
console.log([4, 5, 8, 12].find(isPrime)); // 5

• 예시 3. 탐색 중 삭제된 배열 요소

let arr = [0, 1, , , , 5, 6];

arr.find((val, idx) => console.log('value: ' + val  + ' ' + 'index: ' + idx));
// value: 0 index: 0
// value: 1 index: 1
// value: undefined index: 2
// value: undefined index: 3
// value: undefined index: 4
// value: 5 index: 5
// value: 6 index: 6