Array.prototype.includes() 사용법

배열에서 includes() 함수는
배열에 특정 요소가 포함하는지 확인하는 함수입니다.
배열에서 주어진 요소가 포함되어 있으면 true를 그렇지 않으면 false를 반환합니다.

  • 찾는 요소가 문자열일 경우 대소문자를 구분합니다.
  • 이 함수는 ECMAScript 7(ES7)에서 소개되었습니다.

다음은 배열에서 includes() 함수의 기본적인 사용 방법입니다.

JavaScript 
const arr = [1, 2, 3, 4, 5];

console.log(arr.includes(3)); // 출력: true
console.log(arr.includes(6)); // 출력: false

문자열에서는 String.prototype.includes()가 문자열에 특정 문자열이 포함하는지 확인하는 함수입니다.

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

구문

JavaScript 
arr.includes(searchElement[, fromIndex])

arr은 includes() 함수를 적용할 배열입니다.

매개변수

includes() 함수의 매개변수 설명
searchElement 배열에서 찾을 요소입니다.
fromIndex 옵션. 검색을 시작할 0 기반의 인덱스입니다.
생략하면 기본값으로 0이 사용됩니다.
만약 음수 값을 가진다면, 배열의 끝에서부터 역순으로 검색을 시작합니다.

반환 값

배열에서 주어진 요소가 포함되어 있으면 true를 그렇지 않으면 false를 반환합니다.

매개변수와 반환 값 예시

데이터 타입의 구분

배열에서 includes() 함수는 찾는 요소의 데이터 타입을 명확하게 구분합니다.

JavaScript 
const numbers = [10, 20, 30, 40, NaN];
console.log(numbers.includes(30)); // true
console.log(numbers.includes("30")); // false
console.log(numbers.includes(15)); // false
console.log(numbers.includes(40, 3)); // true
console.log(numbers.includes(20, -2)); // false
console.log(numbers.includes(NaN, -2)); // true

const words = ["apple", "banana", "orange", "grape", "1"];

console.log(words.includes("banana")); // true
console.log(words.includes("pear")); // false
console.log(words.includes("grape", 2)); // true
console.log(words.includes("apple", -4)); // false
console.log(words.includes("banana", -4)); // true
console.log(words.includes(1)); // false
문자열의 대소문자 구분

배열에서 includes() 함수는 찾는 요소가 문자열일 경우 대소문자를 구분합니다.

JavaScript 
const words = ["apple", "banana", "orange"];

console.log(words.includes("apple")); // true
console.log(words.includes("Apple")); // false
문자열의 일치

배열에서 includes() 함수는 찾는 요소가 문자열일 경우 주어진 문자열과 일치해야만 true를 반환합니다.
그렇지 않고 특정 부분만 일치하면 false를 반환합니다.

JavaScript 
const words = ["apple", "banana", "orange"];

console.log(words.includes("banana")); // true
console.log(words.includes("ban")); // false
변수 포함 확인
JavaScript 
const car = "My car";
const words = ["apple", "banana", car];

console.log(words.includes(car)); // true
console.log(words.includes("My car")); // true

주의할 점

배열에서 includes() 함수를 사용할 때 몇 가지 주의할 점이 있습니다.

NaN 비교와 포함

자바스크립트에서 NaN는 자신과 동등하지 않습니다. 즉, NaN === NaN은 항상 false입니다.
하지만 배열에서는 includes() 함수를 사용하여 배열에 NaN이 포함되어 있는지 확인할 수 있습니다.

JavaScript 
console.log(NaN === NaN); // false

const values = [1, NaN, 3, 4, 5];
console.log(values.includes(NaN)); // true

희소 배열에서 includes() 사용하기

희소 배열에서 undefined를 검색하면 true를 반환합니다.

JavaScript 
const arr = [1, , 3];
console.log(arr.includes(undefined)); // true

브라우저 호환성

배열 include() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
include() 47 14 43 9

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

배열 include() 함수의 명세서 사양
명세서 사양
include() ECMAScript Language Specification
#sec-array.prototype.includes

참고문헌

같이 보기