자바스크립트 findIndex() 함수 – 개념 정리 및 사용 예제

`Array.prototype.findIndex()` 사용법

findIndex() 함수는
배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소의 인덱스를 반환하는 함수입니다.
배열의 각 요소에 대해 콜백 함수를 사용하여 원하는 조건의 요소를 찾습니다.

findIndex() 함수는 배열에서 특정 요소의 인덱스를 찾는 데 유용합니다.

JavaScript 배열에서 findIndex() 함수로 "green"의 인덱스 찾기

/*
 * 주의하세요!
 * 배열에서 인덱스는 0부터 시작합니다.
 * 첫 번째 요소의 인덱스는 0이고, 두 번째 요소의 인덱스는 1입니다.
*/

// 배열을 만듭니다.
const colors = ["red", "green", "blue"];

const green = colors.findIndex(function(color) {
    return color === "green"; // 배열 요소가 "green"과 같은지 확인합니다.
});

// 결과를 출력합니다.
console.log(green); // 출력: 1

findIndex() 함수의 형식은 다음과 같습니다.

구문

arr은 findIndex() 함수를 적용할 배열입니다.

매개변수

findIndex() 함수의 매개변수 설명
`callbackFn`	배열의 각 요소를 처리하는 콜백 함수입니다. 콜백 함수는 배열의 각 요소에 대해 실행됩니다. 콜백 함수는 주어진 요소에 대해 실행되고, 콜백 함수 내에서 정의한 조건을 확인합니다. 조건은 `return` 문을 사용하여 정의되며, 조건이 `true`로 평가되면 해당 요소를 찾은 것으로 간주됩니다. `findIndex()` 함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환합니다. 그러면 코드 실행이 멈춥니다. 콜백 함수의 매개변수: `callbackFn(element[, index[, array]])` `element`: 현재 처리 중인 배열 요소 `index`: 옵션. 현재 처리 중인 배열 요소의 인덱스 `array`: 옵션. `findIndex()`를 호출한 배열 자체
`thisArg`	옵션. `callbackFn` 함수 내부에서 사용할 `this` 값으로 사용할 값입니다.

첫 번째 매개변수인 콜백 함수(callbackFn)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.

JavaScript

// 화살표 함수
findIndex((element) => { /* … */ })
findIndex((element[, index]) => { /* … */ })
findIndex((element[, index[, array]]) => { /* … */ })

// 콜백 함수
findIndex(callbackFn)
findIndex(callbackFn[, thisArg])

// 인라인 콜백 함수
findIndex(function (element) { /* … */ })
findIndex(function (element[, index]) { /* … */ })
findIndex(function (element[, index[, array]]) { /* … */ })
findIndex(function (element[, index[, array]]) { /* … */ }[, thisArg])

반환 값

콜백 함수가 찾아낸 첫 번째 조건을 만족하는 배열 요소의 인덱스입니다.
만약 조건을 만족하는 요소를 찾지 못했다면 -1을 반환합니다.

콜백 함수의 작동 원리

findIndex() 함수는 주어진 배열의 요소를 개발자가 직접 작성한 콜백 함수를 사용하여 원하는 조건에 따라 찾고, 조건을 충족하는 첫 번째 요소의 인덱스를 반환하는 함수입니다.

findIndex() 함수의 콜백 함수는 배열의 요소들 중에서 콜백 함수 내에서 정의한 조건을 확인합니다. 조건은 return 문을 사용하여 정의되며, 조건이 true로 평가되면 해당 요소를 찾은 것으로 간주됩니다. findIndex() 함수는 조건을 만족하는 첫 번째 요소를 찾으면 배열 순회를 중단하고 해당 요소의 인덱스를 반환합니다. 그러면 코드 실행이 멈춥니다.

JavaScript findIndex() 함수에서 사용하는 콜백 함수의 구조

/**
 * 콜백 함수
 *
 * @param {*} element 배열의 각 요소
 * @param {number} index 배열의 인덱스 (선택적)
 * @param {Array} array 원본 배열 (선택적)
 * @return {boolean} 필터링 조건을 충족하면 true, 그렇지 않으면 false 반환
 *
 * 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
 * (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
 */

/* 콜백 함수를 기명 함수를 사용할 경우 */
function callbackFn(element[, index[, array]]) { // 기명 함수 정의
	// return 문을 사용하여 조건을 정의합니다.
}

arr.findIndex(callbackFn); // 정의한 기명 함수명을 매개변수에 직접 전달

/* 콜백 함수를 익명 함수로 사용할 경우 */
arr.findIndex(function (element[, index[, array]]) {
    // return 문을 사용하여 조건을 정의합니다.
});

다양한 활용 사례

findIndex() 함수는 배열에서 특정 조건을 만족하는 첫 번째 요소의 인덱스를 찾는데 사용되며, 다양한 활용 사례가 있습니다. 특히 특정 값 위치 찾기에 유용합니다. 몇 가지 예시를 살펴보겠습니다.

일반적인 특정 값 위치 찾기 이해

findIndex() 함수는 배열에서 특정 값과 위치를 찾는 데 사용됩니다. 예를 들어, 특정 숫자, 문자열 또는 객체를 찾을 수 있습니다.

JavaScript

// 특정 값 위치 찾기
// 배열에서 특정 값을 찾아 해당 값의 위치를 확인합니다.

const numbers = [1, 2, 3, 4, 5];
const target = 3;

// findIndex() 함수를 사용하여 특정 값의 위치를 찾기
const index = numbers.findIndex(num => num === target);

if (index !== -1) {
  console.log(`값 ${target}의 위치는 ${index + 1} 번째입니다.`);
} else {
  console.log(`값 ${target}을 찾을 수 없습니다.`);
}

// 출력: '값 3의 위치는 3 번째입니다.'

특정 키워드를 포함하는 첫 번째 문서를 찾기

findIndex() 함수를 사용하여 문서 목록에서 특정 키워드를 포함하는 첫 번째 문서를 찾고 해당 문서의 위치를 반환합니다. 이러한 방식으로 문서 검색 시 특정 조건을 충족하는 첫 번째 문서를 찾을 수 있습니다.

JavaScript

// 문서 목록
const documents = [
    "JavaScript는 웹 프로그래밍 언어입니다.",
    "Node.js를 사용하여 서버를 구축할 수 있습니다.",
    "React는 인기 있는 프론트엔드 라이브러리입니다.",
    "Python은 범용 프로그래밍 언어입니다."
];
  
// 찾고자 하는 키워드
const targetKeyword = "Node.js";

// findIndex() 함수를 사용하여 첫 번째로 특정 키워드를 포함하는 문서를 찾습니다.
const index = documents.findIndex(document => document.includes(targetKeyword));

if (index !== -1) {
    console.log(`"${targetKeyword}"를 포함하는 첫 번째 문서의 위치: ${index + 1}`);
} else {
    console.log(`"${targetKeyword}"를 포함하는 문서를 찾을 수 없습니다.`);
}

// 출력 '"Node.js"를 포함하는 첫 번째 문서의 위치: 2'

코드 부연설명
문자열의 includes() 함수는 문자열에 특정 문자열이 포함하는지 확인하는 함수입니다. 주어진 문자열이 포함되어 있으면 true를 그렇지 않으면 false를 반환합니다.

실시간 알림 시스템에서 특정 사용자에게 첫 번째 알림 찾기

findIndex() 함수를 사용하여 실시간 알림 시스템에서 특정 조건을 만족하는 첫 번째 이벤트를 찾아 사용자에게 알림을 전달하는 예제를 만들어보겠습니다. 아래는 이 작업을 시뮬레이션한 간단한 코드입니다.

JavaScript

// 실시간 알림 이벤트 목록
const notificationEvents = [
    {id: 1, message: "새 메시지 도착", recipient: "Alice"},
    {id: 2, message: "주문 완료", recipient: "Bob"},
    {id: 3, message: "미팅 시작", recipient: "Charlie"},
    {id: 4, message: "할일 알림", recipient: "Alice"}
];

// 특정 사용자에게 전달해야 하는 알림 대상
const targetRecipient = "Alice";

// findIndex() 함수를 사용하여 첫 번째로 특정 사용자에게 전달해야 하는 알림을 찾습니다.
const index = notificationEvents.findIndex(event => event.recipient === targetRecipient);

if (index !== -1) {
    const firstNotification = notificationEvents[index];
    console.log(`"${targetRecipient}"에게 전달해야 하는 첫 번째 알림: ${firstNotification.message}`);
    // 여기에서 알림을 사용자에게 전달하는 로직을 추가할 수 있습니다.
} else {
    console.log(`"${targetRecipient}"에게 전달해야 하는 알림을 찾을 수 없습니다.`);
}

// 출력: '"Alice"에게 전달해야 하는 첫 번째 알림: 새 메시지 도착'

이 코드는 실시간 알림 이벤트 목록에서 특정 사용자에게 전달해야 하는 첫 번째 알림을 찾고 해당 알림의 내용을 출력합니다. 알림을 전달하는 로직은 이 예제에 포함되어 있지 않지만, 여기에서 해당 로직을 추가하여 실제 알림 시스템에 적용할 수 있습니다.

실시간 알림 시스템에서 특정 조건을 만족하는 첫 번째 이벤트를 찾아 사용자에게 알림을 전달하는 경우, find() 함수가 실질적으로 더 유용할 수 있습니다. find() 함수는 조건을 만족하는 첫 번째 요소 자체를 반환하므로 해당 요소의 내용을 쉽게 추출할 수 있습니다. 아래는 find() 함수를 활용한 예제입니다.

JavaScript

// 실시간 알림 이벤트 목록
const notificationEvents = [
    {id: 1, message: "새 메시지 도착", recipient: "Alice"},
    {id: 2, message: "주문 완료", recipient: "Bob"},
    {id: 3, message: "미팅 시작", recipient: "Charlie"},
    {id: 4, message: "할일 알림", recipient: "Alice"}
];

// 특정 사용자에게 전달해야 하는 알림 대상
const targetRecipient = "Alice";

// find() 함수를 사용하여 첫 번째로 특정 사용자에게 전달해야 하는 알림을 찾습니다.
const firstNotification = notificationEvents.find(event => event.recipient === targetRecipient);

if (firstNotification) {
    console.log(`"${targetRecipient}"에게 전달해야 하는 첫 번째 알림: ${firstNotification.message}`);
    // 여기에서 알림을 사용자에게 전달하는 로직을 추가할 수 있습니다.
} else {
    console.log(`"${targetRecipient}"에게 전달해야 하는 알림을 찾을 수 없습니다.`);
}

// 출력: '"Alice"에게 전달해야 하는 첫 번째 알림: 새 메시지 도착'

코드 부연설명
배열의 find() 함수는 배열에서 특정 조건을 만족하는 요소를 찾아 첫 번째 요소를 반환합니다.

코드를 작성할 때 어떤 함수나 방법을 선택하는 것은 상황과 작업의 성격에 따라 달라집니다. 자바스크립트에는 다양한 배열 메서드와 도구가 있으며, 그 중에서도 find()와 findIndex() 함수는 유사한 목표를 가지고 있지만 사용하는 상황에 따라 어떤 것을 선택하는지가 중요합니다.

findIndex() 함수를 사용하면 배열에서 조건에 맞는 첫 번째 요소를 효과적으로 찾을 수 있으므로, 다양한 상황에서 유용하게 활용할 수 있습니다.

브라우저 호환성

findIndex() 함수는 ECMAScript 2015 (ES6)부터 도입되었습니다.

findIndex() 함수에 대한 브라우저 호환성
메서드	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`findIndex()`	48	12	25	8

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

findIndex() 함수에 대한 명세서 사양
명세서 사양
`findIndex()`	ECMAScript Language Specification #sec-array.prototype.findindex

자바스크립트 findIndex() 함수 – 개념 정리 및 사용 예제

`Array.prototype.findIndex()` 사용법

구문

매개변수

반환 값

콜백 함수의 작동 원리

다양한 활용 사례

일반적인 특정 값 위치 찾기 이해

특정 키워드를 포함하는 첫 번째 문서를 찾기

실시간 알림 시스템에서 특정 사용자에게 첫 번째 알림 찾기

브라우저 호환성

명세서

참고문헌

같이 보기

Array.prototype.findIndex() 사용법

구문

매개변수

반환 값

콜백 함수의 작동 원리

다양한 활용 사례

일반적인 특정 값 위치 찾기 이해

특정 키워드를 포함하는 첫 번째 문서를 찾기

실시간 알림 시스템에서 특정 사용자에게 첫 번째 알림 찾기

브라우저 호환성

명세서

참고문헌

같이 보기

`Array.prototype.findIndex()` 사용법