자바스크립트 배열 indexOf() 함수 – 배열에서 요소의 위치 찾기

`Array.prototype.indexOf()` 사용법

자바스크립트 배열 indexOf() 함수는
배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수입니다.
인수로 전달된 요소를 찾을 수 없다면 -1을 반환합니다.

이 함수는 배열에서 요소의 위치를 찾거나, 존재하는지 확인할 때 유용합니다.

JavaScript

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;

문자열에서는 Srting.prototype.indexOf()가 같은 역할을 합니다.

indexOf() 함수의 형식은 다음과 같습니다.

구문

arr은 indexOf() 함수를 적용할 배열입니다.

매개변수

배열 indexOf() 함수의 매개변수 설명
`searchElement`	필수. 배열에서 찾을 요소입니다. 대소문자를 구분합니다.
`fromIndex`	옵션. 검색을 시작할 `0` 기반의 인덱스입니다. 생략하면 기본값으로 `0`이 사용됩니다. 음수 값을 사용할 수 있으며, 이 경우 배열의 끝에서부터 역으로 카운트됩니다. 그러나, 여전히 왼쪽에서 오른쪽으로 검색합니다. 배열의 길이(`arr.length`)보다 크거나 같으면 `-1`을 반환합니다.

반환 값

배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
인수로 전달된 요소를 찾을 수 없다면 -1을 반환합니다.

매개변수와 반환 값 예시

JavaScript

/*
 * 인수로 전달된 요소가 배열에서 중복으로 있다면,
 * 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.
*/
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를 검색할 수 없습니다.

indexOf() 함수로 문자열을 검색할 때에는 대소문자를 구분합니다.

JavaScript

const colors = ["red", "green", "blue"];
const red = colors.indexOf("Red");

// 대문자 "R"과 소문자 "r"을 구분합니다.
console.log(red); // 출력: -1;

다양한 활용 사례

indexOf() 함수에 관련된 다양한 활용 사례입니다.

배열에서 요소의 존재 여부 확인

배열에서 특정 요소가 포함하는지 확인할 때에는 주로 includes() 함수를 사용하지만, indexOf() 함수도 배열에서 요소의 존재 여부를 확인하는데 유용하게 사용됩니다. 인수로 전달된 요소를 찾을 수 없다면 -1을 반환하기 때문입니다.

JavaScript

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를 생성합니다.

JavaScript

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() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

이 코드는 forEach() 반복문을 사용하여 배열을 반복하면서 중복 요소를 uniqueArr에 추가하기 전에 indexOf() 함수를 사용하여 중복을 확인하고, 중복이 아닌 경우에만 요소를 추가합니다. 이 코드는 배열의 중복을 제거하는 데 잘 작동할 것입니다.

만약 배열의 크기가 크지 않고 코드가 간단한 경우, 위의 코드로 충분하겠지만, 배열이 큰 경우에는 indexOf() 함수가 각 요소를 검색하기 때문에 성능상의 문제가 발생할 수 있습니다. 그런 경우에는 Set() 객체를 사용한 방법을 고려하는 것이 좋습니다. Set() 객체는 중복된 값을 허용하지 않고 중복이 자동으로 제거되므로 성능상 이점이 있습니다.

이 방법은 Set() 객체를 사용하여 중복 요소를 자동으로 제거하고, 다시 배열로 변환하여 중복이 제거된 새로운 배열을 반환합니다.

특정 범위에서 요소의 존재 여부 확인

JavaScript

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() 함수는 배열의 특정 범위의 요소를 잘라내어(slice) 추출한 결과를 새로운 배열로 반환합니다.

위의 코드에서 slice() 함수를 사용하여 주어진 startIndex와 endIndex를 기반으로 배열의 부분을 추출하고, 추출한 부분 배열에서 indexOf() 함수를 사용하여 요소의 존재 여부를 확인합니다.