Array.prototype.findIndex()
사용법
findIndex()
함수는
배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수입니다.
배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾습니다.
findIndex()
함수는 배열에서 특정 요소의 인덱스를 찾는 데 유용합니다.
findIndex()
함수의 형식은 다음과 같습니다.
구문
arr
은 findIndex()
함수를 적용할 배열입니다.
매개변수
callbackFn |
배열의 각 요소를 처리하는 콜백 함수입니다. 콜백 함수는 배열의 각 요소에 대해 실행됩니다. 콜백 함수는 주어진 요소에 대해 실행되고, 콜백 함수 내에서 정의한 조건을 확인합니다. 조건은 return 문을 사용하여 정의되며, 조건이 true 로 평가되면 해당 요소를 찾은 것으로 간주됩니다. findIndex() 함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환합니다. 그러면 코드 실행이 멈춥니다.
콜백 함수의 매개변수: callbackFn(element[, index[, array]])
|
---|---|
thisArg |
옵션. callbackFn 함수 내부에서 사용할 this 값으로 사용할 값입니다. |
첫 번째 매개변수인 콜백 함수(callbackFn
)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.
반환 값
콜백 함수가 찾아낸 첫 번째 조건을 만족하는 배열 요소의 인덱스입니다.
만약 조건을 만족하는 요소를 찾지 못했다면 -1
을 반환합니다.
콜백 함수의 작동 원리
findIndex()
함수는 주어진 배열의 요소를 개발자가 직접 작성한 콜백 함수를 사용하여 원하는 조건에 따라 찾고, 조건을 충족하는 첫 번째 요소의 인덱스를 반환하는 함수입니다.
findIndex()
함수의 콜백 함수는 배열의 요소들 중에서 콜백 함수 내에서 정의한 조건을 확인합니다.
조건은 return
문을 사용하여 정의되며, 조건이 true
로 평가되면 해당 요소를 찾은 것으로 간주됩니다. findIndex()
함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환합니다. 그러면 코드 실행이 멈춥니다.
다양한 활용 사례
findIndex()
함수는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 찾는데 사용되며, 다양한 활용 사례가 있습니다. 특히 특정 값 위치 찾기에 유용합니다. 몇 가지 예시를 살펴보겠습니다.
일반적인 특정 값 위치 찾기 이해
findIndex()
함수는 배열에서 특정 값과 위치를 찾는 데 사용됩니다. 예를 들어, 특정 숫자, 문자열 또는 객체를 찾을 수 있습니다.
특정 키워드를 포함하는 첫 번째 문서를 찾기
findIndex()
함수를 사용하여 문서 목록에서 특정 키워드를 포함하는 첫 번째 문서를 찾고 해당 문서의 위치를 반환합니다. 이러한 방식으로 문서 검색 시 특정 조건을 충족하는 첫 번째 문서를 찾을 수 있습니다.
코드 부연설명
문자열의 includes()
함수는 문자열에 특정 문자열이 포함하는지 확인하는 함수입니다. 주어진 문자열이 포함되어 있으면 true
를 그렇지 않으면 false
를 반환합니다.
실시간 알림 시스템에서 특정 사용자에게 첫 번째 알림 찾기
findIndex()
함수를 사용하여 실시간 알림 시스템에서 특정 조건을 만족하는 첫 번째 이벤트를 찾아 사용자에게 알림을 전달하는 예제를 만들어보겠습니다. 아래는 이 작업을 시뮬레이션한 간단한 코드입니다.
이 코드는 실시간 알림 이벤트 목록에서 특정 사용자에게 전달해야 하는 첫 번째 알림을 찾고 해당 알림의 내용을 출력합니다. 알림을 전달하는 로직은 이 예제에 포함되어 있지 않지만, 여기에서 해당 로직을 추가하여 실제 알림 시스템에 적용할 수 있습니다.
실시간 알림 시스템에서 특정 조건을 만족하는 첫 번째 이벤트를 찾아 사용자에게 알림을 전달하는 경우, find()
함수가 실질적으로 더 유용할 수 있습니다. find()
함수는 조건을 만족하는 첫 번째 요소 자체를 반환하므로 해당 요소의 내용을 쉽게 추출할 수 있습니다. 아래는 find()
함수를 활용한 예제입니다.
코드 부연설명
배열의 find()
함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환합니다.
코드를 작성할 때 어떤 함수나 방법을 선택하는 것은 상황과 작업의 성격에 따라 달라집니다. 자바스크립트에는 다양한 배열 메서드와 도구가 있으며, 그 중에서도 find()
와 findIndex()
함수는 유사한 목표를 가지고 있지만 사용하는 상황에 따라 어떤 것을 선택하는지가 중요합니다.
findIndex()
함수를 사용하면 배열에서 조건에 맞는 첫 번째 요소를 효과적으로 찾을 수 있으므로, 다양한 상황에서 유용하게 활용할 수 있습니다.
브라우저 호환성
findIndex()
함수는 ECMAScript 2015 (ES6)부터 도입되었습니다.
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
findIndex()
|
48 | 12 | 25 | 8 |
명세서
명세서 사양 | |
---|---|
findIndex()
|
ECMAScript Language Specification #sec-array.prototype.findindex |
같이 보기
- 자바스크립트 find() 함수 – 개념 정리 및 사용 예제
- 자바스크립트 map() 함수 – 개념 정리 및 사용 예제
- 자바스크립트 forEach() 함수 – 개념 정리 및 사용 예제
- 자바스크립트 filter() 함수 – 개념 정리 및 사용 예제
- 자바스크립트 reduce() 함수 – 개념 정리 및 사용 예제
- 자바스크립트 slice() 함수 – 배열 자르기
- 자바스크립트 배열 indexOf() 함수 - 배열에서 요소의 위치 찾기
- 자바스크립트 문자열에 특정 문자 포함 여부 확인 - includes() 함수
- 자바스크립트 배열에 특정 요소 포함 여부 확인 - includes() 함수