[JavaScript] find() 사용법 알아보기 [JS기초 함수] - 띵코딩 on Code

find()란?

배열의 각 요소에 대해 주어진 콜백 함수(reducer)를 실행하면서 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.

 

Array.find() 구문

Array.find( callback( element, index, array ) => {
		return 참이되는 첫 번째 값
	}

• element : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : find를 호출한 배열 (위 예시에서는 Array)

Array.find() 설명

find() 메소드는 각 요소에 대해 callback 함수를 실행하여 참을 반환하는 첫 번째 값을 즉시 반환합니다. 만약 어느 요소도 그렇지 않았다면 undefined를 반환합니다.
find() 메소드는 호출의 대상이 된 배열을 변경하지 않습니다. find() 메소드는 호출되기 이전에 삭제된 요소에 대해서도 callback 함수가 호출됩니다.

var arr = ["apple", "banana", "tomato"]

console.log(arr.find((n) => n=="apple")); // "apple"

var arr1 = [1, 5, 10, 15]

console.log(arr1.find((n) => n > 10)); // 15

 

Array.find() 작동 방식, 예제

var inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];

function findCherries(fruit) {
  return fruit.name === "cherries";
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

inventory배열에서 name이 cherries인 객체를 찾아 반환하고 있다.

 

정리

find()함수는 callback함수에서 true값인 첫 번째 요소를 반환해준다. 그러므로 이것을 이용해 배열에서 소수를 찾는 문제나 특정한 하나의 요소를 찾는 것에 유용하고 인덱스 또한 추출이 가능하다. 특정 요소값이 없을때는 undefined를 반환해주니 이것 또한 유용하게 사용할 수 있을 것 같다.

 

Array.prototype.find() - JavaScript | MDN (mozilla.org)

Array.prototype.find() - JavaScript | MDN