자바스크립트 - 배열의 특정 요소를 찾아 그 요소의 인덱스 반환하기 (findIndex() 함수)

findIndex() 함수는 find() 함수와 동일하게 배열의 특정 요소를 찾을 때 사용하는 함수다.

 

두 함수의 차이점은

find() 함수는 가장 첫 번째로 찾은 특정 요소를 반환한다.

findIndex() 함수는 가장 첫 번째로 찾은 특정 요소의 인덱스를 반환한다.

 

 

주의점: findIndex() 함수 실행 시, 함수 형태의 인수가 반드시 필요하다.

const nums = [100, 200, 300, 400];

const res = nums.findIndex(); // TypeError: undefined is not a function

인수 없이 함수 실행 시, find() 함수처럼 에러가 난다.

 

 

 

예제: 배열 속, 200 이상의 요소를 찾고 그 요소의 인덱스 반환하기.

const nums = [100, 200, 300, 400];

const res = nums.findIndex(num => num > 200);

console.log(res); // 2

배열 속, 200 이상의 요소들 중, 300을 가장 먼저 찾으므로 300의 인덱스인 2를 반환.

 

 

 

예제: 배열 속, 찾으려는 요소가 존재하지 않을 경우, 어떤 값을 반환하는가

const nums = [100, 200, 300, 400];

const isOver500 = num => num > 500;

const res = nums.findIndex(isOver500);

console.log(res); // -1

findIndex() 함수는 찾는 요소가 배열에 존재하지 않을 시, -1을 반환한다.

본 예제는 500 이상의 요소를 찾는 예제이다, 결과는 배열 속엔 500 이상의 요소가 없기 때문에 -1을 반환한다.

 

 

 

예제: findIndex() 실행 중, 현재 요소, 현재 요소의 인덱스, 배열 전체 접근하기.

const nums = [100, 200, 300, 400];

const res = nums.findIndex((num, idx, arr) => {
	console.log(num, idx, arr);

	// 100 0 [ 100, 200, 300, 400 ]
	// 200 1 [ 100, 200, 300, 400 ]
	// 300 2 [ 100, 200, 300, 400 ]
	// 400 3 [ 100, 200, 300, 400 ]
});

find() 함수와 동일하게, 현재 요소, 현재 요소의 인덱스, 배열 전체를 접근한 모습.