본문 바로가기
기초다지기/Javascript

javaScript indexOf() 정리

by 김빵그 2025. 2. 28.

 

 

String.prototype.indexOf() - JavaScript | MDN

indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.

developer.mozilla.org

 

 

Array.prototype.indexOf() - JavaScript | MDN

Array 인스턴스의 indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.

developer.mozilla.org

 

✅  indexOf()?

- indexOf()는 배열 또는 문자열에서 특정 요소의 <<첫번째 위치>> 인덱스를 반환하는 메서드로 없으면 -1을 반환한다 

 

✅ 배열에서의 사용법 

arr.indexOf(searchElement, fromIndex)
arr.indexOf(찾고싶은 요소, 검색을 시작할 인덱스 기본값 0)
const arr = [10, 20, 30, 40, 20];

console.log(arr.indexOf(20));      // 1 (처음 등장하는 20의 위치)
console.log(arr.indexOf(20, 2));   // 4 (인덱스 2부터 찾으면 두 번째 20의 위치)
console.log(arr.indexOf(50));      // -1 (배열에 50이 없으므로 -1)
// 음수를 넣으면 배열의 뒤에서부터가 아니라 arr.length + fromIndex 위치부터 검색 
const arr = [10, 20, 30, 40, 50];

console.log(arr.indexOf(30, -2)); // -1 (인덱스 3부터 탐색, 30 없음)
console.log(arr.indexOf(30, -3)); // 2  (인덱스 2부터 탐색, 30 발견)

 

 

✅  문자열에서의 사용법 

const str = "hello world";

console.log(str.indexOf("o"));      // 4 ('o'가 처음 등장한 위치)
console.log(str.indexOf("o", 5));   // 7 (인덱스 5 이후의 'o')
console.log(str.indexOf("z"));      // -1 ('z'는 없으므로 -1)

 

 

✅  indexOf() vs findIndex()

const arr = [10, 20, 30, 40];

// indexOf는 값이 정확히 일치해야 함
console.log(arr.indexOf(20)); // 1

// findIndex는 조건을 만족하는 첫 번째 요소의 인덱스 반환
console.log(arr.findIndex(num => num > 25)); // 2 (30이 처음으로 25보다 큼)