[JavaScript] includes vs. indexOf

이 팀에 '사나'라는 분 있나요?

 

이런 질문을 받으면 우리는 다음과 같은 사고과정을 거쳐 대답하게 된다. 첫째, 팀 멤버 리스트를 확인한다. 둘째, 리스트 안에 '사나'라는 팀원이 있는지 빠르게 확인한다. 확인 결과에 따라 우리는 사나가 우리 팀에 있는지 없는지 여부를 대답해낸다. 

코드를 짜다 보면 이와 유사한 상황이 자주 벌어진다. 말하자면 배열(회계팀) 내에 특정 요소(사나)가 담겨있는지 확인해야 하는 것이다. 이를 배열로 나타내면 다음과 같이 나타낼 수 있다. 배열은 먼저 팀에 들어온 순서대로 정렬되어 있다. 

 

let accounting = ['나연', '정연', '모모', '사나', '지효', '미나']; // 회계팀
let hr = ['다현', '채영', '쯔위']; //인사팀

 

1. .includes() 

includes는 배열에 특정 요소가 있는지 여부를 true/false 로 간단히 보여주는 기능이다. 위 상항을 코드로 나타내면 아래와 같다. 

let accounting = ['나연', '정연', '모모', '사나', '지효', '미나']; // 회계팀
let hr = ['다현', '채영', '쯔위']; //인사팀

accounting.includes('사나') // true
hr.includes('사나') // false

회계팀 배열에 includes 를 적용하면 true 를, 인사팀 배열에 적용하면 false 를 나타낸다. 즉, 사나는 회계팀에 소속되어 있음을 includes를 통해 판별해낼 수 있다. 

 

2. indexOf()

그런데 가끔은 단순히 사나가 이 팀에 소속되어 있는지 여부 뿐만 아니라, 그 팀에 몇 번째로 들어온 사람인지가 궁금할 수 있다. includes의 경우, 단순히 포함 여부만을 보여주기 때문에 이 경우에 사용하기에는 부족하다.

 

이때 사용하는 것이 바로 indexOf이다. indexOf는 배열 내 특정 요소가 포함되어있는지 여부 뿐만 아니라, 배열 내 해당 요소의 index가 무엇인지를 알려준다. 해당 요소가 배열 내 있다면 요소의 index 값을 리턴하고, 해당 요소가 배열에 없다면 -1 을 리턴한다. 위 예시를 코드로 나타내면 아래와 같다.

 

let accounting = ['나연', '정연', '모모', '사나', '지효', '미나']; // 회계팀
let hr = ['다현', '채영', '쯔위']; //인사팀

accounting.indexOf('사나') // 3
hr.indexOf('사나') // -1

 

회계팀 배열에 indexOf를 사용하면 결과값이 3이 리턴된다. 우리는 사나가 회계팀에 소속되어있다는 사실 뿐만 아니라, 팀에 네 번째(index :3)로 입사한 팀원임을 알 수 있다. 이를 인사팀 배열에 적용하면 리턴값은 -1, 즉 사나가 이 팀에 소속되어 있지 않다는 사실을 알 수 있다.

정리하자면 단순히 배열 내 특정 요소 포함 여부를 알고 싶다면 includes를 사용해도 무방하지만, indexOf 를 사용하면 해당 요소의 인덱스값까지 파악할 수 있으므로 더 많은 정보를 알 수 있음을 알 수 있다.