자바스크립트 배열에서 요소를 검색하는 다양한 방법

자바스크립트는 배열에서 원하는 요소를 찾을 수 있도록 다양한 내장 함수를 제공합니다. 이번 글에서는 가장 기본적인 함수부터 시작해, 조건에 맞는 객체를 검색하는 고급 메서드까지 차근차근 살펴보겠습니다.

1. indexOf() – 가장 기본적인 검색 방법

indexOf() 함수는 배열 전체를 순회하면서 찾고자 하는 요소가 있으면 해당 요소의 인덱스를 반환하고, 찾지 못하면 -1을 반환합니다.

예제

let people = ["Harry", "Martha", "John", "Sam"];
console.log(people.indexOf("John"))
console.log(people.indexOf("Jim"))

출력 결과

2
-1

"John"은 인덱스 2에 위치하고 있으므로 2가 출력되고, 배열에 존재하지 않는 "Jim"은 -1이 반환됩니다.

2. find() – 조건에 맞는 첫 번째 객체 찾기

좀 더 복잡하지만 강력한 검색을 원한다면 find() 메서드를 사용할 수 있습니다. find()는 콜백(callback)으로 전달된 조건을 만족하는 첫 번째 요소 자체를 반환합니다. 특히 객체로 이루어진 배열에서 유용하게 활용됩니다.

예제

let people = [{
    name: 'Agnes',
    age: 25
}, {
    name: 'Richard',
    age: 21
}, {
    name: 'Zoe',
    age: 35
}];
let personNameStartsWithR = people.find(person => person.name[0] === 'R');
console.log(personNameStartsWithR)

출력 결과

{ name: 'Richard', age: 21 }

위 예제에서는 이름이 'R'로 시작하는 첫 번째 사람의 객체가 그대로 반환되었습니다.

3. findIndex() – 조건에 맞는 요소의 위치 찾기

find()는 조건에 맞는 객체를 반환하지만, 때로는 그 객체가 배열의 어느 위치에 있는지 알아야 할 필요가 있습니다. 이럴 때 findIndex() 함수를 사용하면 조건을 만족하는 첫 번째 요소의 인덱스를 얻을 수 있습니다.

예제

let people = [{
    name: 'Agnes',
    age: 25
}, {
    name: 'Richard',
    age: 21
}, {
    name: 'Zoe',
    age: 35
}];
let personNameStartsWithR = people.findIndex(person => person.name[0] === 'R');
console.log(personNameStartsWithR)

출력 결과

1

조건을 만족하는 'Richard' 객체는 배열에서 인덱스 1에 위치하므로 1이 출력됩니다. 만약 조건에 맞는 요소가 없다면 findIndex() 역시 -1을 반환합니다.

4. 콜백 함수와 fromIndex 옵션

find()와 findIndex()는 모두 콜백 함수를 인수로 받으며, 이 콜백은 element(요소), index(인덱스), array(배열) 세 가지 인수를 전달받습니다. 또한 두 함수 모두 조건을 만족하는 첫 번째 등장 요소만 반환한다는 점에 유의해야 합니다.

한편, indexOf()는 추가적인 매개변수인 fromIndex를 지원합니다. 이 값을 지정하면 해당 인덱스부터 검색을 계속할 수 있어, 중복된 요소를 여러 개 찾아야 할 때 유용합니다.

예제

let people = ["Harry", "Martha", "John", "Sam", "Martha"];
console.log(people.indexOf("Martha"));
console.log(people.indexOf("Martha", 3))

출력 결과

1
4

첫 번째 호출은 배열 앞쪽부터 검색하여 인덱스 1의 "Martha"를 찾았고, 두 번째 호출은 fromIndex를 3으로 지정했기 때문에 인덱스 4에 있는 두 번째 "Martha"를 찾아냈습니다.

정리

간단히 정리하면 다음과 같습니다.

indexOf() – 값으로 검색하여 인덱스를 반환하며, fromIndex로 검색 시작 위치를 지정할 수 있습니다.
find() – 콜백 조건을 만족하는 첫 번째 요소(객체)를 반환합니다.
findIndex() – 콜백 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다.

상황에 맞는 함수를 선택하면 배열 검색 로직을 훨씬 깔끔하고 효율적으로 작성할 수 있습니다.