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

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

자바스크립트 배열 indexOf() 함수는
배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환하는 함수입니다.
인수로 전달된 요소를 찾을 수 없다면 -1을 반환합니다. 이 함수는 배열에서 요소의 위치를 찾거나, 존재하는지 확인할 때 유용합니다.

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

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;

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

구문

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

매개변수

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

자바스크립트 length 속성의 이해와 사용 방법

반환 값

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

다양한 활용 사례

배열과 관련된 프로토타입 메서드(Array 인스턴스)인 indexOf() 함수에 관련된 다양한 활용 사례입니다.

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

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() 반복문을 사용하여 배열을 반복하면서 중복 요소를 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() 함수를 사용하여 주어진 startIndex와 endIndex를 기반으로 배열의 부분을 추출하고, 추출한 부분 배열에서 indexOf() 함수를 사용하여 요소의 존재 여부를 확인합니다.