본문 바로가기
Language/JavaScript

[JavaScript] indexOf() - 문자열 및 배열에서 특정 값의 위치(인덱스) 찾기 (ft. include() 대체 메서드)

by 썸머워즈 2020. 12. 14.
반응형

문자열 또는 배열에서 특정 값의 위치를 파악해야하여 사용하는 경우가 많은데

찾고자하는 특정 값의 인덱스(위치)값을 알려주는 indexOf() 메서드에  대해 알아보고자 한다.

 

제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며

각각 String.prototype.indexOf() 와 Array.prototype.indexOf()를 의미한다.

 

▷ 구문

.indexOf( searchElement[, fromIndex] )

 

첫번째 매개변수에는 찾고자 하는 값/요소 를 입력하고 (문자열의 경우 대소문자 구분)

두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다.

 

예제를 통해 알아보자.


▷ 예제1) String.prototype.indexOf()

var str = 'it is mine-it-record tistory blog';

console.log(str.indexOf('it'));
// 0

console.log(str.indexOf('it', 3));
// 11

console.log(str.indexOf('IT'));
// -1

indexOf() 메서드는 인덱스를 반환해주기 때문에 찾고자 하는 문자열이 첫번째로 발견되는 곳의 인덱스를 반환한다.

예제에 있는 'it'의 경우 두곳이 존재하는데 0을 반환하는 이유가 그것이다.

그리고 구문 설명에서 했던것처럼 대소문자 역시 구분한다.

 

▷ 예제2) Array.prototype.indexOf()

var cars = ['Avante', 'Volvo', 'Tesla', 'Sonata', 'Grandeur'];

console.log(cars.indexOf('Tesla'));
// 2

console.log(cars.indexOf('sonata'));
// -1

console.log(cars.indexOf('Grandeur', -1));
// 4

String.prototype.indexOf()와 기능자체는 동일하다 단지 배열에서도 사용 된다는것뿐.


여담으로 indexOf()메서드의 경우 includes() 메서드의 대체 함수로 많이 사용되고는 한다.

IE에서는 작동을 안하는 includes() 메서드와 달리 indexOf() 메서드는 여러곳에서 사용이 자유롭기 때문이다.

 

includes() 함수에 대해 궁금하면 아래 링크로 확인하자.

https://mine-it-record.tistory.com/370

 

[ES6] includes() - 문자열 및 배열에 특정 요소를 포함하고 있는지 판별/확인 하기

스크립트를 사용하는 중에 배열 또는 문자열에서 어떠한 특정 값이 존재하는지 확인해야하는 경우가 생기는데 ES6에서 추가된 includes() 메서드에 대해 알아보고자 한다. 제목과 마찬가지로 배열

mine-it-record.tistory.com

반응형


댓글

TOP