JavaScript Array.find() 메서드 소개
Array.find() 메서드는 배열에서 주어진 테스트 조건(콜백 함수)을 만족하는 첫 번째 요소의 값을 반환하는 데 사용됩니다. 만약 어떤 요소도 조건을 통과하지 못하면 undefined를 반환합니다.
이 메서드는 배열 전체를 순회하면서 각 요소를 콜백 함수에 전달하고, 조건이 참(true)이 되는 순간 검색을 중단하고 해당 값을 즉시 반환합니다. 따라서 대용량 배열에서도 효율적으로 원하는 값을 찾을 수 있습니다.
주요 특징
- 조건을 만족하는 첫 번째 요소의 값 자체를 반환합니다(인덱스가 필요하다면 findIndex()를 사용).
- 조건에 맞는 요소가 없으면
undefined를 반환합니다. - 원본 배열은 변경되지 않습니다.
Array.find() 동작 예제
다음 예제에서는 find() 메서드가 배열 내 가격(price) 요소들이 지정된 기준 가격(12000)보다 큰지 확인합니다. 조건을 처음으로 통과한 값이 결과로 출력되며, 통과하는 요소가 없다면 undefined가 출력됩니다.
예제 코드
<html>
<body>
<p id="price"></p>
<script>
var price = [3000, 21000, 28000, 20000, 15500];
function checkCost(cost) {
return cost >= 12000;
}
document.getElementById("price").innerHTML = price.find(checkCost);
</script>
</body>
</html>실행 결과
21000
결과 분석
배열의 첫 번째 요소인 3000은 조건(12000 이상)을 만족하지 못해 건너뛰고, 두 번째 요소인 21000이 조건을 최초로 통과했기 때문에 해당 값이 그대로 반환되어 화면에 출력됩니다.