[Javascript] .indexOf() .findIndex()

---

목차 

 

1. indexOf()

2. findIndex()

3. 차이점

---

 

 

1. indexOf()

---

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. -MDN

 

indexOf() 함수는 문자열에서 특정 문자의 위치를 찾기 위해서 사용한다. array와 string 둘다 사용 가능한 메소드이며 찾고자 하는 값이 문자열 혹은 배열에서 몇 번째에 오는지를 알려준다.

 

검색의 기본 시작점은 0번째이며, 왼쪽에서 오른쪽 방향으로 검색한다. 또 배열에서 해당값을 찾을 수 없는 경우 -1 값을 반환한다.

 

 

 

구문은 다음과 같다.

string.indexOf(searchvalue, position)

 

- searchvalue : 필수 입력값, 찾을 문자열

- position : optional, 기본값은 0, string에서 searchvalue를 찾기 시작할 위치

 

 

 

 

 

예제

---

const str = "abab";

document.writeln(str.indexOf('ab')); // 0
document.writeln(str.indexOf('ba')); // 1
document.writeln(str.indexOf('abc')); // -1
document.writeln(str.indexOf('AB')); // -1

 

예제 1) 문자열 'abab'에서 'ab'가 처음으로 나타나는 위치의 인덱스 값을 리턴한다.

예제 2) 문자열 'abab'에서 'ba'가 처음으로 나타나는 위치의 인덱스 값을 리턴한다.

예제 3) 문자열 'abab'에는 'abc'라는 문자열이 없으므로 숫자 -1을 리턴한다.

예제 4) indexOf 함수는 대소문자를 구분한다. 문자열 'abab'에는 대문자 'AB'는 없으므로 숫자 -1을 리턴한다.

 

 

 

 

 

2. findIndex()

---

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다. -MDN

 

찾고자 하는 값이 boolean, 정수, 문자열 등 이면 위와 같이 indexOf 함수를 사용해서 찾을 수 있다. 하지만 배열 안에 있는 값이 객체이거나, 특정 값으로 찾는 것이 아니라 특정 조건으로 찾는다면  indexOf으로 찾을 수 없다. 

 

이러한 경우에 사용하는 함수가 findIndex() 함수이다.

 

findIndex() 함수는 파라미터로 함수를 입력받아, 특정 조건을 확인해서 조건을 만족하면 만족하는 원소가 몇 번째인지 알려주는 함수이다. 따라서 배열 안의 값들이 객체이거나, 특정 조건을 만족하는 원소의 index를 알아내야 하는 경우 findIndex 함수를 사용하면 된다.

 

 

 

구문은 다음과 같다.

arr.findIndex(callback(element[, index[, array]])[, thisArg])

 

 

 

 

예제

---

const todos = [
	{
		id : 1,
		text : '자바스크립트 입문',
		done : true
	},
	{
		id : 2,
		text : '함수 배우기',
		done : true
	},	
	{
		id : 3,
		text : '객체와 배열 배우기',
		done : true
	},
	{
		id : 4,
		text : '배열 내장함수 배우기',
		done : false
	}
];

 

 

 

 

만약 위의 경우에서 id 값이 3인 객체를 찾고싶다면 위에서 사용한 indexOf를 사용할 수 없다. 이러한 경우 findIndex 함수를 이용하여 값을 찾을 수 있다.

const index = todos.findIndex(todo => todo.id === 3);
console.log(index); // 2

 

 

 

 

정리

---

1. indexOf : 특정 값과 일치하는 것을  찾을 때 사용

2. findIndex : findIndex 내부에 함수를 넣어준 뒤 특정 값의 조건으로 찾아서 찾고자 하는 값이 몇 번째 인지 알고싶을 때 사용