헷갈리는 자바스크립트 메소드 indexOf() 개념 잡기

indexOf()는 array와 string 둘다 사용 가능한 메소드다. 찾고자 하는 값이 문자열 혹은 배열에서 몇번째에 오는지를 알려준다. 또 찾는 값이 문자열 혹은 배열에 있는지 없는지 확인하는 함수를 짤 때 많이 이용한다.

 

 

우선 기본적인 개념을 살펴보자. (배열로 보자)

indexOf('찾고자 하는 값', '시작점(생략가능)')

array = ['min', 'hope', 'jin', 'kok', 'hope'];

array.indexOf('hope')  // 1

array.indexOf('suga');  // -1

 

배열의 순서는 0부터 시작하므로 'hope'의 순서는 1번째다.

그리고 만일 ('hope'처럼) 배열에 동일한 값이 2개 이상있을 경우엔 무조건 제일 앞에 위치한 값을 반환한다. (검색의 기본 시작점은 0번째이며, 왼쪽에서 오른쪽 방향으로 검색한다.)

또 배열에서 해당값을 찾을 수 없을 경우 ('suga'처럼) 값은 무조건 -1을 반환한다.

 

array.indexOf('jin', 1);  // 2

array.indexOf('hope', 3);  // 4

 

두번째 인자도 넣을 수 있는데, 요거는 시작점을 말한다. (기본 시작점은 0) 여기에 1을 넣게되면 배열 1번째부터 값을 검색한다.

배열 1번째는 'hope' -> 여기서부터 'jin'을 찾는다. >> 'jin'은 바로 옆에 있었다! 'jin'의 전체 인덱스값은 2이므로 2가 반환.

 

array.indexOf('hope', 3); 에선 'hope'의 인덱스값을 반환해야하는데, 'hope'은 배열에서 2개나 들어있지.

근데 시작점이 3이니까 3번째인 'kok'부터 검색.

그러므로 1번째 'hope'이 아닌 3번째 ('kok') 다음에 위치한 4번째 'hope'의 인덱스 값이 반환된다.  

 

 

여기까진 이해가 잘 됐다.. 근데 시작점에 음수를 넣으면서 점점 어려워짐...

 

array.indexOf('jin', -1);  // -1;

array.indexOf('jin', -2);  // -1;

 

먼저 알아둬야할 것은 시작점이 검색해야할 값보다 클 경우, (예를 들면 'min'(0번째)을 검색해야하는데 시작점을 2로 설정하면..) 검색이 안되므로 무조건 -1을 반환한다.

 

그렇다면 시작점에 음수가 오면 어떻게 계산할까? 배열 가장 끝 값을 시작점 -1로 잡고, 왼쪽으로 갈수록 시작점도 점점 작아진다. 

아래 음수는 시작점을 말함

 

주의해야할 점은 시작점이 음수가 됐다고 해서 검색방향(왼쪽에서 오른쪽)이나 배열의 인덱스 값이 바뀌거나 하진 않는다.(배열의 인덱스는 변하지 않는 고유의 값이다)

 

예제를 다시 보면, 'jin'의 인덱스를 구하고 있고 -1이 시작점이므로 'hope'에서 'jin'을 검색한다. 그런데 검색은 왼쪽에서 오른쪽 방향으로 훑으므로. 'hope' 다음에는 'jin'은 찾을 수 없다.. 따라서 값은 -1이 반환된다.

-2가 시작점으로 와도 동일하다. -2는 'kok'인데 'kok' 다음에는 'jin'이 검색되지 않으므로 -1이 반환된다.

 

-3부터가 아주 웃긴데. -3부터 그 이하의 값들은 시작점에 상관없이 무조건 'jin'의 원래 인덱스값을 반환한다.

 

array.indexOf('jin', -3);  // 2;

array.indexOf('jin', -4);  // 2;

array.indexOf('jin', -5);  // 2;

array.indexOf('jin', -6);  // 2;

array.indexOf('jin', -7);  // 2;

 

시작점이 인덱스값보다 커지면 -1를 반환하는데, 음수이기 때문에 커지지 않고 계속 작아짐. 그래서 시작점 -(자신의 인덱스값) 부터는 무한대로 자신의 인덱스 값을 반환한다.

이상하긴 한데, 뭐 indexOf를 이런 식으로 이용하진 않으므로 (자주 쓰이는 방식은 아니므로) 그냥 이해하고 넘어간다.

 

 

저는 주로 요렇게 씁니다. indexOf --

 

function myfunction(){

  if(arr.indexOf('bts') != -1){

    console.log('리스트에 bts가 있습니다.');

  }else{

    console.log('리스트에 bts가 없습니다.');

  }

}