For DEVELOPER/JAVASCRIPT

[JAVASCRIPT] 배열 또는 문자열에 IndexOf() :: JAVASCRIPT

오니기리석 2019. 12. 18. 09:22
728x90
반응형

자바스크립트에서 원하는 문자열을 찾거나 배열의 값을 찾는 강단한 방법으로 indexOf() 함수가 사용됩니다.

아래에서 더 자세하게 알아보겠습니다.



# 자바스크립트 indexOf() 알아보기내장함수 indexOf() 함수는 문자열에서 원하는 문자열을 검색하여 찾거나 아니면 배열에서 원하는 특정 배열값의 존재여부 등을 확인할 수 있습니다. 배열의 경우 위치값을 index로 반환하는 함수입니다.

그럼 indexOf()는 어떻게 사용할까요? 사용 방법은 매우 간단하며 아래와 같이 함수의 매개변수로 원하는 값, 찾을 문자열을 넘겨줍니다. 아래의 방법을 보세요.

"문자열".indexOf("찾을 문자")

특징이라면 문자타입(String) 뿐만 아니라 배열(Array)에서도 사용가능하다는 점입니다. 매우 유용하죠. 또한 만약 그 값이 존재하는 경우 해당 위치를 알려준다는 점입니다. 그럼 아래 예제를 참고하세요.



! indexOf() 예제소스 코드보기
 아래는 간단한 indexOf() 예제입니다. 문자열 중에서 찾는 값이 있으면 "Find it"이라고 화면에 출력하며 없는 경우 "Not Found"를 출력합니다.

var text = "456789";
var findStr = "123"; // 123이 있는지 찾아보기

if (text.indexOf(findStr) != -1) {
  alert("Find!");
}
else {
  alert("Not Found!!");
}


해당 문자열에 123이 없기 때문에 Not Found!!를 출력합니다. 위 예제소스를 보면 if 조건문에서 -1의 값을 가지는가의 여부를 확인합니다. indexOf()는 값을 찾고 그 결과로 숫자를 반환하는데 없는 경우 -1을 반환합니다. 하지만 있는 경우(존재하는 경우)에는 그 결과값으로 문자열의 시작위치에 해당하는 index를 반환하여 줍니다.

let str = 'Brave new world';

console.log('The index of the first w from the beginning is ' + str.indexOf('w'));
// output>  8
console.log('The index of the first w from the end is ' + str.lastIndexOf('w')); 
// output>  10
console.log('The index of "new" from the beginning is ' + str.indexOf('new'));
// output>  6
console.log('The index of "new" from the end is ' + str.lastIndexOf('new'));
// output>  6
let myStr = 'hello wide world!'; // length: 17
let myCapStr = 'Hello Wide world!'; // length: 17

console.log(myStr.indexOf("W"));
// output>  -1
console.log(myStr.indexOf("w"));
// output>  6
console.log(myCapStr.indexOf("w"));
// output>  11
const str = 'To be, or not to be, that is the question.';
let searchValue = 'e'
let count = 0;
let fromIndex = str.indexOf(searchValue);

while (fromIndex !== -1) {
  count++;
  fromIndex = str.indexOf(searchValue, fromIndex + 1);
}

console.log(count); 
// output>  4



이 함수의 장점이라면 매우 간단하게 해당 값을 가지고 있는지의 확인해서 위치를 반환하기 때문에 코드가 간결하다는 점입니다.


! -1이 의미하는 것여기서는 -1을 확인값으로 사용하였는데 그 이유는 만약에 특정 문자열이 해당하는 텍스트 안에서 찾았다면 if 문에서 절대 -1이 될 수 없는 0 이상의 양수 값이기 때문입니다. 그래서 -1은 값이 없음을 의미하게됩니다...

반응형