[ES5] 배열 메소드 : indexOf(), lastIndexOf()

이번 글에서는 ES5의 배열 메소드 (Array Method) 중, 배열 내의 특정 요소의 위치를 반환하는 indexOf와 lastIndexOf에 대해서 알아보겠습니다. 두 메소드는 다른 배열 메소드와 마찬가지로 for loop로 구성해야 하는 수고를 덜어줍니다.

 

1. Array.prototype.indexOf()

• IndexOf() 메소드는 배열에서 지정된 요소가 존재하는 인덱스를 반환합니다.
• 시작 인덱스부터 배열의 뒷부분으로 검색합니다. 
• 가장 처음 발견한 요소의 인덱스를 반환합니다. 
• 값을 찾을 수 없으면 -1을 반환합니다.

[문법]

arr.indexOf(item, startIndex)

 

Parameter	Description
item	(필수) 찾아야 할 엘리먼트
startIndex	(옵션) 검색을 시작할 Index. 기본 값: 0 Index 값이 음수이면 배열 끝에서부터의 오프셋 (arr.length + startIndex)값으로 계산합니다.

[예제]

찾으려는 배열 내 요소의 인덱스를 반환하는 예제입니다.

var arr = [1, 2, 3, 4, 3, 2, 1];

console.log(arr.indexOf(5)); // -1
console.log(arr.indexOf(3)); // 2
console.log(arr.indexOf(3, 3)); // 4
console.log(arr.indexOf(3, -2)); // -1
console.log(arr.indexOf(3, -3)); // 4

 

위의 결과만 보면 startIndex로 인하여 다소 혼란스러울 수 있습니다. 다음 그림을 보면 StartIndex에 의한 영향을 쉽게 이해할 수 있습니다.

 

 

[응용 예제]

아래는 중복된 이름을 갖는 배열에 대하여 unique 한 요소를 갖는 배열을 생성하는 예제입니다. 이 경우, filter 메소드와 함께 indexOf 메소드를 사용함으로써 간편하게 코드를 작성할 수 있습니다.

var arr = ['철수', '영희', '영희', '바둑이', '철수', '바둑이'];

var unique = arr.filter(function(name, index, array) {
  return index === array.indexOf(name); // 처음 나오는 값인지 판별
});

console.log(unique); // => ["철수", "영희", "바둑이"]

 

2. Array.prototype.lastIndexOf()

• lastIndexOf() 메소드는 기본적으로 indexOf와 동일한 동작을 수행합니다.
• 시작 인덱스부터 배열의 앞부분으로 거꾸로 검색합니다.(indexOf와의 차이)
• 가장 처음 발견한 요소의 인덱스를 반환합니다. 
• 값을 찾을 수 없으면 -1을 반환합니다.

[문법]

arr.lastIndexOf(item, startIndex)

 

Parameter	Description
item	(필수) 찾아야 할 엘리먼트
startIndex	(옵션) 검색을 시작할 Index. 기본 값: 배열의 마지막 Index ( arr.length - 1 ) Index 값이 음수이면 배열 끝에서부터의 오프셋 (arr.length + startIndex) 값으로 계산합니다.

[예제]

찾으려는 값의 배열 내의 index를 반환하는 예제입니다.

var arr = [1, 2, 3, 4, 3, 2, 1];

console.log(arr.lastIndexOf(5)); // -1
console.log(arr.lastIndexOf(3)); // 4
console.log(arr.lastIndexOf(3, 1)); // -1
console.log(arr.lastIndexOf(3, 2)); // 2
console.log(arr.lastIndexOf(3, -1)); // 4
console.log(arr.lastIndexOf(3, -4)); // 2

 

앞의 경우와 마찬가지로, lastIndexOf() 메소드에서 startIndex에 대한 영향은 다음 그림을 보면 쉽게 이해할 수 있습니다.

 

 

 

IndexOf와 lastIndexOf 메소는 startIndex만 이해하면 크게 어렵지 않은 편이므로 비교적 간단하게 정리해 봤습니다.