Array.prototype.indexOf()
사용법
자바스크립트 배열 indexOf()
함수는
배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수입니다.
인수로 전달된 요소를 찾을 수 없다면 -1
을 반환합니다.
이 함수는 배열에서 요소의 위치를 찾거나, 존재하는지 확인할 때 유용합니다.
문자열에서는 Srting.prototype.indexOf()
가 같은 역할을 합니다.
const colors = ["red", "green", "blue"];
/*
* 주의하세요!
* 배열에서 인덱스는 0부터 시작합니다.
* 첫 번째 요소의 인덱스는 0이고, 두 번째 요소의 인덱스는 1입니다.
*/
// 배열 colors에서 요소 "red"를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
const red = colors.indexOf("red");
console.log(red); // 출력: 0;
// 배열 colors에서 인수로 전달된 요소 "yellow"를 찾을 수 없으므로 -1을 반환합니다.
const yellow = colors.indexOf("yellow");
console.log(yellow); // 출력: -1;
const blue = colors.indexOf("blue", 1);
// 두 번째 인수는 검색을 시작할 인덱스입니다.
// 이 인수는 옵션으로, 생략하면 처음(0)부터 검색합니다.
// 인수의 값이 1이므로, 두 번째 요소부터 검색했을 때 요소 "blue"는 검색이 되고,
// 맨 왼쪽(인덱스 0)부터 검색된 요소 "blue"의 인덱스는 2입니다.
console.log(blue); // 출력: 2;
indexOf()
함수의 형식은 다음과 같습니다.
구문
arr.indexOf(searchElement[, fromIndex])
arr
: indexOf()
함수를 적용할 배열입니다.
매개변수
searchElement |
필수. 배열에서 찾을 요소입니다.
대소문자를 구분합니다. |
---|---|
fromIndex |
옵션. 검색을 시작할 0 기반의 인덱스입니다.
|
반환 값
배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
인수로 전달된 요소를 찾을 수 없다면 -1
을 반환합니다.
매개변수와 반환 값 예시
/*
* 인수로 전달된 요소가 배열에서 중복으로 있다면,
* 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
*/
const colors = ["red", "green", "green", "blue"];
// 배열 colors에서 요소 "green"를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
const green = colors.indexOf("green");
// 배열 colors에서 요소 "green"은 두 개가 있습니다.
// 인덱스 1과 2에 있습니다.
// 하지만, 첫 번째로 검색된 요소의 인덱스인 1을 반환합니다.
console.log(green); // 출력: 1;
/*
* arr.indexOf(searchElement[, fromIndex])
*
* 옵션(선택적)으로 사용하는 fromIndex가 음수 값일 경우
* 배열의 끝에서부터 역으로 카운트됩니다.
* 그러나, 여전히 왼쪽에서 오른쪽으로 검색합니다.
*/
const fruits = ["apple", "bannana", "orange", "mango"];
const index = fruits.indexOf("mango", -2);
console.log(index); // 출력: 3;
// fromIndex 값이 -2입니다.
// 배열의 끝에서부터 역으로 카운트되기 때문에
// 끝에서 두 번째 요소인 "orange"부터 검색합니다.
// 그러나 여전히 왼쪽에서 오른쪽으로 검색합니다.
// 찾고자 하는 요소인 "mango"는 "orange"의 오른쪽에 존재함으로,
// fruits 배열에서 "mango"의 인덱스인 3이 출력됩니다.
주의할 점
indexOf()
함수로 NaN
를 검색할 수 없습니다.
const arr = [1, 2, NaN, 4, 5];
console.log(arr.indexOf(NaN)); // 출력: -1
indexOf()
함수로 문자열을 검색할 때에는 대소문자를 구분합니다.
const colors = ["red", "green", "blue"];
const red = colors.indexOf("Red");
// 대문자 "R"과 소문자 "r"을 구분합니다.
console.log(red); // 출력: -1;
다양한 활용 사례
배열과 관련된 프로토타입 메서드(Array 인스턴스)인 indexOf()
함수에 관련된 다양한 활용 사례입니다.
배열에서 요소의 존재 여부 확인
const arr = [1, 2, 3, 4, 5];
const element = 3;
if (arr.indexOf(element) !== -1) {
console.log(`${element}는 배열에 존재합니다.`);
} else {
console.log(`${element}는 배열에 존재하지 않습니다.`);
}
// 출력: "3는 배열에 존재합니다."
배열의 중복 요소 제거하기
아래 예제는 indexOf()
함수와 forEach()
반복문을 사용하여 배열에서 중복된 요소를 제거하는 방법을 보여줍니다. 이 예제는 배열 arr
에서 중복 요소를 제거하여 새로운 배열 uniqueArr
를 생성합니다.
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [];
arr.forEach(element => {
if (uniqueArr.indexOf(element) === -1) {
uniqueArr.push(element);
}
});
console.log(uniqueArr); // 출력: [1, 2, 3, 4, 5]
이 코드는 forEach()
반복문을 사용하여 배열을 반복하면서 중복 요소를 uniqueArr
에 추가하기 전에 indexOf()
함수를 사용하여 중복을 확인하고, 중복이 아닌 경우에만 요소를 추가합니다. 이 코드는 배열의 중복을 제거하는 데 잘 작동할 것입니다.
만약 배열의 크기가 크지 않고 코드가 간단한 경우, 위의 코드로 충분하겠지만, 배열이 큰 경우에는 indexOf()
함수가 각 요소를 검색하기 때문에 성능상의 문제가 발생할 수 있습니다. 그런 경우에는 Set()
객체를 사용한 방법을 고려하는 것이 좋습니다. Set()
객체는 중복된 값을 허용하지 않고 중복이 자동으로 제거되므로 성능상 이점이 있습니다.
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // 출력: [1, 2, 3, 4, 5]
이 방법은 Set()
객체를 사용하여 중복 요소를 자동으로 제거하고, 다시 배열로 변환하여 중복이 제거된 새로운 배열을 반환합니다.
특정 범위에서 요소의 존재 여부 확인
const arr = [1, 2, 3, 4, 5];
const element = 3;
const startIndex = 1;
const endIndex = 3;
const subArray = arr.slice(startIndex, endIndex + 1);
if (subArray.indexOf(element) !== -1) {
console.log(`${element}은/는 주어진 범위 내에서 배열에 존재합니다.`);
} else {
console.log(`${element}은/는 주어진 범위 내에서 배열에 존재하지 않습니다.`);
}
// 출력: "3은/는 주어진 범위 내에서 배열에 존재합니다."
위의 코드에서 slice()
함수를 사용하여 주어진 startIndex
와 endIndex
를 기반으로 배열의 부분을 추출하고, 추출한 부분 배열에서 indexOf()
함수를 사용하여 요소의 존재 여부를 확인합니다.
브라우저 호환성
메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
indexOf()
|
1 | 12 | 1.5 | 3 |
명세서
명세서 사양 | |
---|---|
Array.prototype.indexOf()
|
ECMAScript Language Specification #sec-array.prototype.indexof |