자바스크립트(JavaScript) Array.prototype.indexOf, Array.prototype.lastIndexOf 폴리필(polyfill)

안녕하세요. 루미오입니다.

JavaScript Array 함수 중에 indexOf()와 lastIndexOf()는 IE 9 이상에서만 지원합니다. IE 8 이하에서 사용하기 위해서는 폴리필(polyfill)을 적용해야 합니다. 오늘은 indexOf()와 lastIndexOf()의 폴리필(polyfill)을 소개하겠습니다.

순서
● Array.prototype.indexOf 폴리필(polyfill)
● Array.prototype.lastIndexOf 폴리필(polyfill)

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

 

Array.prototype.indexOf 폴리필(polyfill)

[Array.prototype.indexOf 폴리필]

/* Array.prototype.indexOf polyfill */
if(!Array.prototype.indexOf) {
	Array.prototype.indexOf = function(search, fromIndex) {
		if(this.length === 0)
			return -1;

		fromIndex = typeof fromIndex === 'boolean' ? (fromIndex ? 1 : 0) : fromIndex;
		fromIndex = typeof fromIndex === 'number' ? (fromIndex < 0 ? this.length + fromIndex : fromIndex) : 0;

		for(var i = (fromIndex || 0); i < this.length; i++) {
			if(this[i] === search)
				return i;
		}
		return -1;
	}
}

→ 코드 확인 및 테스트

IE 9이상에서 test하려면 2 Line, 16 Line을 주석처리 하세요.

[Array.prototype.indexOf 예제]

/* Array.prototype.indexOf 예제 */
var result = -1;
var arr = ['A', 'B', 'C', 'D', 'E', 'A', 'B'];	// arr.length : [7]

result = arr.indexOf('F');		// -1
result = arr.indexOf('B');		// 1
result = arr.indexOf('B', 2);	// 6
result = arr.indexOf('B', -1);	// 6
result = arr.indexOf('B', -5);	// 6
result = arr.indexOf('B', -6);	// 1

→ 코드 확인 및 테스트

JavaScript Array의 index는 0부터 시작합니다. 5 Line은 아무지 찾아도 없습니다. 이럴 땐 -1을 return 합니다. 6 Line은 Array에서 ‘B’를 처음(0 index)부터 찾아서 index를 return 합니다. 7 Line은 2 index부터 ‘B’를 찾기 때문에 6을 return 합니다. 8 Line은 arr.length(7) + (-1) = 6 index부터 찾기 때문에 제일 뒤에서부터 찾게 됩니다. 9 Line은 arr.length(7) + (-5) = 2 index부터 찾습니다. 그러니 6을 return 합니다. 10 Line은 1 index부터 찾기 때문에 1을 return 합니다.

 

Array.prototype.lastIndexOf 폴리필(polyfill)

[Array.prototype.lastIndexOf 폴리필]

/* Array.prototype.lastIndexOf polyfill */
if(!Array.prototype.lastIndexOf) {
	Array.prototype.lastIndexOf = function(search, fromIndex) {
		if(this.length === 0)
			return -1;

		fromIndex = arguments.length === 1 ? this.length - 1 : fromIndex;
		fromIndex = (fromIndex === undefined || fromIndex === null) ? 0 : fromIndex;
		fromIndex = typeof fromIndex === 'boolean' ? (fromIndex ? 1 : 0) : fromIndex;
		fromIndex = typeof fromIndex === 'number' ? (fromIndex < 0 ? this.length + fromIndex : fromIndex) : 0;

		for(var i = fromIndex; i > -1; i--) {
			if(i <= fromIndex && this[i] === search)
				return i;
		}
		return -1;
	}
}

→ 코드 확인 및 테스트

IE 9이상에서 test하려면 2 Line, 18 Line을 주석처리 하세요.

[Array.prototype.lastIndexOf 예제]

/* Array.prototype.indexOf 예제 */
var result = -1;
var arr = ['A', 'B', 'C', 'D', 'E', 'A', 'B'];	// arr.length : [7]

result = arr.lastIndexOf('F');		// -1
result = arr.lastIndexOf('B');		// 6
result = arr.lastIndexOf('B', 5);	// 1
result = arr.lastIndexOf('B', -1);	// 6
result = arr.lastIndexOf('B', -2);	// 1

→ 코드 확인 및 테스트

5 Line은 ‘F’가 없으므로 -1을 return 합니다. 6 Line은 Array에서 ‘B’를 뒤(6 index)에서부터 앞으로 찾아서 index를 return 합니다. 7 Line은 5 index부터 앞으로 ‘B’를 찾기 때문에 1을 return 합니다. 8 Line은 arr.length(7) + (-1) = 6index부터 앞으로 찾습니다. 9 Line은 arr.length(7) + (-2) = 5index 부터 앞으로 찾습니다.

 

감사합니다.

- 루미오 . LOOMIO -