[includes()] 배열에 특정값이 존재하는지 확인하는 방법

728x90

includes() 

배열에 어떤 값이 포함되어 있는지 확인하고 싶을 때, 굳이 반복문을 쓰지 않아도 됩니다. 자바스크립트에서는 이를 간단하고 직관적으로 처리할 수 있는 메서드인 includes() 를 제공합니다. includes() 는 조건이 아닌 정확한 값의 포함 여부를 확인하는 데 특화되어 있으며, 사용법이 매우 간단하면서도 실제 실무에서 자주 사용됩니다.

이번 글에서는 includes()의 기본 개념부터 다양한 활용 예시, 주의할 점까지 자세히 알아보겠습니다.

 

---

1.  includes()란?

includes() 는 배열(Array)이나 문자열(String)에 특정 값이 존재하는지 여부를 boolean(true 또는 false)로 반환하는 메서드입니다. === 연산을 기준으로 검사하며, 엄격한 일치가 필요합니다.

문법

arr.includes(valueToFind[, fromIndex])

• valueToFind : 찾으려는 값
• fromIndex (선택) : 검색을 시작할 인덱스 (기본값: 0)

기본 예제

const fruits = ["apple", "banana", "orange"];

console.log(fruits.includes("banana")); // true
console.log(fruits.includes("grape"));  // false

주요 특징

• Boolean 반환 : 조건을 만족하는 값의 존재 여부만 알려줍니다.
• === 비교 : 엄격한 비교 (자료형까지 같아야 함)
• NaN도 탐지 가능 : indexOf()와 달리 NaN도 감지할 수 있습니다.

console.log([NaN].includes(NaN)); // true
console.log([NaN].indexOf(NaN));  // -1 (감지 못함)

 

---

2.  실전 예제

a.  사용자 입력값 허용 목록 검사

const allowedColors = ["red", "green", "blue"];
const input = "green";

if (allowedColors.includes(input)) {
  console.log("허용된 색상입니다.");
} else {
  console.log("허용되지 않은 색상입니다.");
}

b.  특정 권한을 가진 유저 검사

const userRoles = ["user", "editor"];

if (userRoles.includes("admin")) {
  console.log("관리자입니다.");
} else {
  console.log("일반 사용자입니다.");
}

c.  숫자 배열에 값 존재 확인

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3));     // true
console.log(numbers.includes("3"));   // false (타입이 다름)

 

---

3.  includes() vs indexOf() 비교

includes()는 조건 검사가 목적일 때,
indexOf()는 위치가 필요한 경우에 사용하면 좋습니다.

 

항목	includes()	indexOf()
반환값	true 또는 false	인덱스 (또는 -1)
비교 방식	=== (엄격)	=== (엄격)
NaN 지원 여부	✅ 가능	❌ 불가능
가독성	✅ 직관적	⛔ 다소 우회적

 

---

4.  주의할 점

a.  객체 배열에서는 원하는 대로 작동하지 않음

const users = [{ id: 1 }, { id: 2 }];
console.log(users.includes({ id: 1 })); // false

객체는 참조값을 기준으로 비교되기 때문입니다. 이 경우는 some() 이나 find() 를 사용해야 합니다.

const found = users.some(user => user.id === 1); // true

b.  대소문자 구분 있음 (문자열 포함 검사 시)

const names = ["Alice", "Bob"];
console.log(names.includes("alice")); // false

 

---

5.  마무리

• includes() 는 배열(또는 문자열)에 특정 값이 정확히 존재하는지 확인하는 메서드입니다.
• boolean 값을 반환하며, === 기준으로 비교합니다.
• NaN 을 감지할 수 있다는 점에서 indexOf() 보다 직관적이고 안전한 경우가 많습니다.
• 객체의 포함 여부는 참조 비교이므로 주의가 필요하며, 이때는 some() 을 고려해야 합니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - includes()

 

---