#33 자바스크립트(JavaScript) - indexOf

안녕하세요 여러분! 에이블디입니다!

 

이번 시간에는 배열이나 문자열에서 특정 배열 값이나 문자열과 일치하는 값이있는 첫 주소값(인덱스)을 찾아주는 indexOf에 대해 배워보려 합니다!

 

indedOf는 배열이나 문자열에서 특정 배열값이나 문자열을 (serchValue) 찾고 검색된 일치하는 값이 있는 첫 번째 주소 값을 반환합니다.

두 가지 방법으로 사용할 수 있는데, 첫째로 indexOf 인수에 찾고자 하는 배열 값이나 문자열은 필수로 입력하셔야 합니다.

두 번째로 포지션 값을 함께 입력할 수 있는데 이 값은 옵션 값으로써 인수에 포지션 값을 입력하지 않으면 기본값은 0이 되는데요 포지션 값은 찾고자 하는 배열 값이나 문자열을 찾기 시작할 위치를 나타내게 됩니다.

 

indexOf에서는 찾고자 하는 배열이나 문자열이 없으면 -1을 반환하며 데이터를 찾을 때 대소문자를 구분합니다.

 

그럼 코드를 직접 작성하며 indexOf에 대해 알아볼게요!

 

이번 시간에도 여김 없이 hyundai 배열을 사용해 보도록 하겠습니다!

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90"];

여기서 두 가지 방법으로 sonata를 찾아볼 텐데요, 첫 번째는 포지션 값을 인수에 주지 않고 sonata를찾는 방법과 두번째는 포지션값을 입력하여 sonata를 찾는 방법입니다.

hyundai.indexOf('sonata');
hyundai.indexOf('sonata', 2);

위의 코드에서 두번째 코드를 보시면 포지션 값을 2로 주었는데요, sonata의 주소값이 1인데 포지션값을 2로 주게되면 어떻게 값을 반환하는지 살펴보도록 하겠습니다!

 

위의 코드를 실행해 보면

 

 

첫 번째 코드에서는 'sonata'의 값이 들어있는 배열의 주소 1을 반환하였고, 두번째 코드에서는 indexOf가 hyundai 배열의 주소값 2부터 'sonata' 데이터를 찾기 때문에 주소값 2 이후의 데이터에 'sonata' 데이터가 없으므로 -1을 반환하는 것을 볼 수 있습니다!

 

그런데 indexOf는 찾고자 하는 데이터의 첫번째 주소 값을 반환한다고 하였는데요, 'sonata' 데이터를 hyundai 데이터의 가장 끝에 추가해 보고 다시 한번 idexOf를 사용하여 'sonata' 데이터를 찾아보도록 하겠습니다.

var hyundai = ["avante", "sonata", "grandeur", "g70", "g80", "g90", "sonata"];

console.log(hyundai.indexOf('sonata'));
console.log(hyundai.indexOf('sonata', 2));

위와 같이 hyundai 배열의 맨 끝에 'sonata' 데이터만 추가한 상태로 코드를 실행해 보겠습니다.

 

 

위의 배열에서 'sonata' 데이터는 주소 값 1과 6에 있는데요, 첫번째 코드에서는 'sonata' 데이터의 첫번째 주소값인 1을 반환하였고, 두번째 코드에서는 주소값 2에서 부터 데이터를 찾기 때문에 주소값 2 이후의 첫번째 'sonata'데이터가 있는 주소값 6을 반환하는 것을 볼 수 있습니다!

 

이번에는 문자열에서 indexOf를 사용해 볼까요?

간단하게 alphabet 변수에 문자열 "ababcdefg" 값을 넣어 선언해 주세요.

var alphabet = "ababcdefg";

그다음, indexOf로 'ab', 'ba', 'AB' 값을 찾아보고, 'ab' 값에 포지션 값 1을 넣어 실행시켜 보겠습니다.

alphabet.indexOf('ab');
alphabet.indexOf('ba');
alphabet.indexOf('AB');
alphabet.indexOf('ab', 1);

코드를 실행해 보면

 

 

여러분이 예상한 대로 값이 반환되었나요? 특이점을 보면 indexOf는 대소문자를 구분한다고 이 글의 초반에 말씀드렸었죠? 대문자 'AB'의 값은 alphabet 문자열에 없기 때문에 -1을 반환하는 것을 볼 수 있네요!

 

이번 시간에는 indexOf에 대해 알아보았습니다! 다음 시간에 또 다른 함수에 대해 알아보도록 할게요!