JavaScript의 find() 메서드는 배열에서 콜백 함수가 정한 조건을 통과하는 첫 번째 요소의 값을 반환합니다. 만약 조건을 만족하는 요소가 하나도 없다면 undefined를 반환합니다. 이 메서드는 ES6(ECMAScript 2015)부터 도입되어 현대적인 배열 탐색에 널리 사용됩니다.
문법
array.find(function(val, index, arr), thisValue)
매개변수 설명
- function : 배열의 각 요소에 대해 실행할 테스트 함수입니다.
- val : 현재 처리 중인 요소의 값을 나타냅니다.
- index : 현재 요소의 배열 인덱스입니다. (선택 사항)
- arr : find()가 호출된 원본 배열입니다. (선택 사항)
- thisValue : 콜백 함수 내부에서 this로 사용할 값입니다. 생략하면
undefined가 전달됩니다.
find()는 조건을 만족하는 첫 번째 요소를 발견하는 즉시 검색을 중단합니다. 따라서 조건에 맞는 모든 요소를 새 배열로 반환하는 filter()와 달리, 단일 요소를 찾을 때는 더 적은 연산으로 효율적으로 동작합니다.
예제 1: 조건을 만족하는 요소가 있는 경우
다음 예제는 랭킹 포인트 배열에서 400보다 큰 첫 번째 점수를 찾아 화면에 출력합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<p>Get the points (first element) above 400...</p>
<button onclick="display()">Result</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400, 500, 600];
function pointsFunc(points) {
return points > 400;
}
function display() {
document.getElementById("demo").innerHTML = pointsArr.find(pointsFunc);
}
</script>
</body>
</html>
실행 결과
위 화면에서 “Result” 버튼을 클릭하면 다음과 같은 결과를 확인할 수 있습니다.
배열 [50, 100, 200, 300, 400, 500, 600] 중에서 400보다 큰 첫 번째 요소는 500이므로, find()는 해당 값을 그대로 반환합니다.
예제 2: 조건을 만족하는 요소가 없는 경우
이번에는 배열에 400보다 큰 요소가 없는 경우를 살펴보겠습니다. 이처럼 조건을 통과하는 요소가 없으면 find()는 undefined를 반환합니다.
<!DOCTYPE html>
<html>
<body>
<h2>Ranking Points</h2>
<p>Get the points (first element) above 400...</p>
<button onclick="display()">Result</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400];
function pointsFunc(points) {
return points > 400;
}
function display() {
document.getElementById("demo").innerHTML = pointsArr.find(pointsFunc);
}
</script>
</body>
</html>
실행 결과
이번에도 “Result” 버튼을 클릭해 보겠습니다.
배열의 최댓값이 400이므로 points > 400 조건을 만족하는 요소가 존재하지 않고, 결과적으로 undefined가 출력됩니다.
정리
- find()는 조건을 만족하는 첫 번째 요소의 값만 반환합니다.
- 조건에 맞는 요소가 없으면
undefined를 반환합니다. - 참고로 값 자체가 아니라 위치가 필요하다면 findIndex() 메서드를 사용하면 됩니다.