ie에서 indexOf() 해결 방안을 알아보자.

이번 글은 자바스크립트의 Native 메소드인 indexOf()에 대해서 알아보자.

누구나 한 번쯤은 썼을 것이다. 유용한 메소드이기 때문이다.

간략히 말하면 문자열의 위치를 알려주는 메소드이다.

간단한 예제를 보자.

var str = "자바스크립트 indexOf"
str.indexOf('indexOf') // 7

var arr = ['자바스크립트','indexOf']
arr.indexOf('indexOf') // 1

indexOf를 사용할 때 뭔가를 찾고 싶을 때 사용할 것이다.

여기서 내가 말하고자 하는 것은 indexOf 메소드는 하나의 메소드가 아니다.

무슨 말이냐하면.

indexOf 메소드는 String의 네이티브 메소드, Array의 네이티브 메소드 각각의 네이티브 메소드이다.

즉 기능은 같지만 엄연히 다른 메소드인 것이다.

사용할 때는 그냥 쓰면 안되고 정확히 타입을 알고 사용하여야 한다.

가장 큰 이유는 망할 놈의 ie7,8 때문이다.

아래 이미지를 보자.

보시다시피 String의 indexOf는 지원하고 있지만, Array의 indexOf는 지원하고 있지 않다.

그러므로 어떤 곳은 indexOf가 되고 어떤 곳은 안되는 현상에 혼란을 느끼지 말자.

그렇다면 ie7,8에서는 어떻게 indexOf를 사용해야할까?

indexOf를 prototype을 통해 만들어주면 된다.

if(!Array.indexOf){
	    Array.prototype.indexOf = function(obj){
	        for(var i=0; i<this.length; i++){
	            if(this[i]==obj){
	                return i;
	            }
	        }
	        return -1;
	    }
	}

또는 jQuery를 쓰고 있다면 inArray() 메소드를 사용하면 해결할 수 있다.

var arr = ['자바스크립트','indexOf']
jQuery.inArray('indexOf',arr) // 1

어떤 타입에서 indexOf 쓸 것인지 정확히 인지하고 사용하자.

jQuery - inArray

https://api.jquery.com/jQuery.inArray/

Javasciprt - String indexOf

https://msdn.microsoft.com/ko-kr/library/53xtt423(v=vs.94).aspx

Javasciprt - Array indexOf

https://msdn.microsoft.com/ko-kr/library/ff679977(v=vs.94).aspx