[JS] 자바스크립트 배열 메서드 비교 및 활용 - findIndex, includes

자바스크립트에서 배열을 다룰 때 자주 사용되는 findIndex()와 includes() 이둘은 비슷해 보이지만 엄연히 다릅니다.

이번 글에서는 이 두 메서드의 동작원리와 함께 차이점을 알아보도록 하겠습니다.

 

📂 목차

 

 

---

❓ findIndex vs includes 차이점은?

구분	findIndex()	includes()
목적	조건에 맞는 요소의 인덱스를 반환	배열이나 문자열에 해당 값이 있는지 여부를 반환
반환값	인덱스(0, 1, 2, ...) 또는 -1	true 또는 false
사용대상	배열	배열 또는 문자열
콜백사용	✅ 가능	❌ 불가능(값만체크)

 

💡 findIndex란?

• findIndex는 조건에 맞는 첫 번째 요소의 인덱스를 반환합니다.
• 조건을 만족하는 요소가 없다면 -1을 반환합니다.
• 배열을 순회하면서 콜백 함수의 조건이 참(true)이 되는 순간, 해당 요소의 인덱스를 바로 반환하고 종료합니다.

 

💡 includes란?

includes는 배열 또는 문자열 안에 특정 값이 포함되어 있는지를 확인하는 메서드입니다.

•  조건이 참이면 true, 포함되어 있지않으면 false를 반환합니다.
• findIndex 처럼 복잡한 조건을 검사하는 콜백 함수는 사용할 수 없습니다.
• 배열이나 문자열이 대상입니다.

 

🧪 예제 코드 비교

 

1. findIndex 예제

const usims = [{value: 'KT-USIM'}, {value: 'LG-USIM'}, {value: 'SK-USIM'}];
const searchCategory = "LG";

const idex = usims.findIndex((item) => item.value.includes(searchCategory));


console.log(idex); // 출력 깂: 1

 

2. includes 예제 (단순 값 확인)

const carriers = ['KT', 'LG', 'SK'];

const inExist = carriers.includes('LG'); 

console.log(inExist);// 출력 값: true

 

 

 

💡 정리 포인트

 

• findIndex()는 콜백을 통해 복잡한 조건 검사를 하며, 해당 조건의 인덱스를 반환함
• includes()는 배열이나 문자열 안에 특정 값이 존재하는지만 확인하는 용도

실무에서는 데이터 위치를 알고 싶으면 findIndex, 존재 여부만 확인하고 싶다면 includes를 선택하면됩니다.