자바스크립트로 코딩을 하다보면 적지않게 배열 안에서 원하는 특정 값의 위치를 찾고 싶은 경우가 많습니다.
색인(index)은 찾고 있는 요소가 배열 안에서 몇 번째에 위치하는지를 의미하는데요.
따라서 배열 메서드 중 indexOf 와 lastIndexOf 라는 함수들을 사용해서 원하는 값의 배열 안 위치를 찾을 수 있습니다.
본 포스팅에서는 배열 메서드 indexOf, lastIndexOf 사용 방법과 예제를 다루어보겠습니다.
indexOf 구문
다음과 같은 방법으로 indexOf를 호출할 수 있습니다.
배열.indexOf(searchElement)
배열.indexOf(searchElement, fromIndex)
매개변수
(필수) searchElement: 배열에서 위치를 찾고 싶은 요소입니다.
(선택) fromIndex: 검색을 시작할 위치를 의미합니다.
fromIndex 주의사항
- 음수인 경우 뒤에서부터 세서 시작할 위치를 찾습니다. 예로, -2이고 배열의 길이가 5면, 5 – 2 = 3 부터 배열 마지막까지 위치를 검색합니다.
- 하지만, 음수의 절대값이 배열의 길이보다 크면, 0 으로 간주되며 그냥 처음부터 끝까지 배열을 검색합니다.
- 양수인 경우, 배열의 길이보다 같거나 크면, -1을 반환하며 배열을 검색하지 않습니다.
반환값
searchElement의 값과 일치하는 배열 요소중 첫번째의 위치(index)입니다. 일치하는게 없으면 -1을 반환합니다.
lastIndexOf 구문
lastIndexOf는 다음 구문에서 볼 수 있듯이 indexOf 메서드와 거의 동일하게 작동합니다.
배열.lastIndexOf(searchElement)
배열.lastIndexOf(searchElement, fromIndex)
매개변수
(필수) searchElement: 배열에서 위치를 찾고 싶은 요소입니다.
(선택) fromIndex: 역순으로 검색을 시작할 위치를 의미합니다.
fromIndex 주의사항
- 음수인 경우 뒤에서부터 세서 시작할 위치를 찾습니다. 예로, -2이고 배열의 길이가 5면, 5 – 2 = 3 부터 배열 맨 앞까지 역순으로 위치를 찾아갑니다.
- 하지만, 음수의 절대값이 배열의 길이보다 크면, -1을 반환하고 배열을 검색하지 않습니다.
- 양수인 경우, 배열의 길이보다 같거나 크면, (배열의 길이 – 1)로 간주되며 그냥 배열 맨 뒤에서부터 맨 앞까지 역순으로 검색합니다.
반환값
searchElement의 값과 일치하는 배열 요소중 마지막의 위치(index)입니다. 일치하는게 없으면 -1을 반환합니다.
배열 특정 값 찾기 indexOf, lastIndexOf 예제
// indexOf 사용
const fruits = ["Banana", "Orange", "Apple", "Mango", "Apple"];
let index1 = fruits.indexOf("Apple");
console.log(`index1: ${index1}`);
let index2 = fruits.indexOf("Apple", 3);
console.log(`index2: ${index2}`);
let index3 = fruits.indexOf("Apple", -2);
console.log(`index3: ${index3}`);
let index4 = fruits.indexOf("Apple", -7);
console.log(`index4: ${index4}`);
let index5 = fruits.indexOf("Apple", 8);
console.log(`index5: ${index5}`);
결과값:
index1: index 0부터 “Apple”을 검색하며 가장 먼저 나오는 위치를 반환합니다. 배열 3번째에 위치하고 있으니 index 2를 반환합니다.
index2: index 3인 “Mango” 부터 검색하기 때문에 배열 마지막 5번째에 위치하고 있는 “Apple”을 찾아 4를 반환합니다.
index3: 뒤에서 2번째부터 검색합니다. 4번째인 “Mango”부터 배열 끝까지 검색하며 마지막 “Apple”을 찾고 index 4를 반환합니다.
index4: index 0 부터 검색을 시작합니다. ( -7의 절대값이 배열의 길이: 5 보다 크기 때문) 따라서, index 2 위치에 있는 “Apple”을 찾고 2를 반환합니다.
index5: 8은 배열의 길이보다 크기 때문에 검색하지않고 – 1을 반환합니다.
//lastIndexOf 사용
const numbers = ["12", 4, "4", 73, 4];
let index1 = numbers.lastIndexOf(4);
console.log(`index1: ${index1}`);
let index2 = numbers.lastIndexOf(4, 3);
console.log(`index2: ${index2}`);
let index3 = numbers.lastIndexOf(4, -2);
console.log(`index3: ${index3}`);
let index4 = numbers.lastIndexOf(4, -7);
console.log(`index4: ${index4}`);
let index5 = numbers.lastIndexOf(4, 8);
console.log(`index5: ${index5}`);
결과값:
index1: 배열 안 4의 위치를 배열 맨 뒤에서부터 역순으로 검색하며 찾습니다. index 4를 반환합니다.
index2: index 3부터 역순으로 검색합니다. 배열에서 두번째 위치한 4의 index인 1을 반환합니다.
index3: 뒤에서 두번째인 index 3부터 역순으로 검색합니다. 배열에서 두번째 위치한 4의 index인 1을 반환합니다.
index4: 뒤에서 7번째부터 배열을 역순으로 검색은 불가능하기에 -1을 반환합니다. (-7의 절대값이 배열의 길이: 5 보다 크기 때문)
index5: 배열 맨 뒤에서부터 역순으로 검색해서 index 4를 반환합니다. (8이 배열의 길이: 5 보다 크기 때문)