[JavaScript] indexOf() 메서드 설명 및 예제

728x90

목 차

• 1. indexOf() 메서드 정의
• 2. indexOf() 메서드 문법
• 2-1. 배열에서의 문법
• 2-2. 문자열에서의 문법
• 3. 주요 특징
• 4. 사용 예제
• 4-1. 배열에서의 indexOf() 사용
• 4-2. 문자열에서의 indexOf() 사용
• 4-3. 특정 값 모든 위치 찾아내는 예제

 

1. indexOf() 메서드 정의

• JavaScript의 indexOf() 메서드는 배열 또는 문자열에서 특정 요소나 문자열이 처음으로 나타나는 인덱스를 반환하는 메서드입니다.
• 찾고자 하는 값이 없을 경우 -1을 반환합니다.

 

2. indexOf() 메서드 문법

2-1. 배열에서의 문법

• searchElement: 찾고자 하는 요소입니다.
• fromIndex (선택적): 탐색을 시작할 인덱스입니다. 기본값은 0이며, 음수를 사용할 경우 배열 끝에서부터의 상대적인 위치로 계산됩니다.

array.indexOf(searchElement, fromIndex)

 

2-2. 문자열에서의 문법

• searchString: 찾고자 하는 문자열입니다.
• fromIndex (선택적): 탐색을 시작할 인덱스입니다. 기본값은 0입니다.

string.indexOf(searchString, fromIndex)

 

3. 주요 특징

• 처음 발견된 위치: indexOf()는 처음으로 일치하는 인덱스만 반환하며, 이후의 요소는 탐색하지 않습니다.
• 대소문자 구분: 문자열에서 사용할 경우, 대소문자를 구분하여 탐색합니다.
• 존재하지 않을 때 -1 반환: 배열이나 문자열에 searchElement나 searchString이 없는 경우 -1을 반환합니다.
• 배열의 NaN 탐색: indexOf()는 NaN을 찾지 못합니다. 이는 NaN이 자기 자신과도 동등하지 않은 값이기 때문입니다.

 

4. 사용 예제

4-1. 배열에서의 indexOf() 사용

// 배열에서의 indexOf() 사용
let fruits = ["apple", "banana", "cherry", "apple"];

console.log(fruits.indexOf("apple")); // 0 (첫 번째 "apple"의 인덱스)
console.log(fruits.indexOf("banana")); // 1
console.log(fruits.indexOf("grape")); // -1 ("grape"는 배열에 없음)

// 시작 인덱스 지정
console.log(fruits.indexOf("apple", 1)); // 3 (1번 인덱스 이후에 처음 나타나는 "apple")

// 음수 인덱스 지정
console.log(fruits.indexOf("apple", -2)); // 3 (끝에서 두 번째 요소부터 검색 시작)

 

 

4-2. 문자열에서의 indexOf() 사용

// 문자열에서의 indexOf() 사용 예제
let str = "Hello, World!";

console.log(str.indexOf("World")); // 7 ("World"가 시작되는 위치)
console.log(str.indexOf("o")); // 4 (첫 번째 "o"의 인덱스)
console.log(str.indexOf("world")); // -1 (대소문자 구분으로 인해 찾지 못함)

// 시작 인덱스 지정
console.log(str.indexOf("o", 5)); // 8 (5번 인덱스 이후의 첫 번째 "o")

 

 

4-3. 특정 값 모든 위치 찾아내는 예제

// 모든 인덱스 위치 찾아내는 예제
let text = "The quick brown fox jumps over the lazy dog";
let searchTerm = "o";
let index = text.indexOf(searchTerm);

while (index !== -1) {
  console.log(`Found "${searchTerm}" at index ${index}`);
  index = text.indexOf(searchTerm, index + 1); // 다음 위치에서 탐색 계속
}

// Found "o" at index 12
// Found "o" at index 17
// Found "o" at index 26
// Found "o" at index 43