Array.prototype.includes() 사용법

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

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

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

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

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

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

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

브라우저 호환성 확인

이 함수는 ECMAScript 7(ES7)에서 소개되었습니다. 인터넷 익스플로러(Internet Explorer) 브라우저에서 지원하지 않습니다. 모든 브라우저에서 배열에 특정 요소 포함 여부를 확인려면 대안으로 indexOf() 함수를 사용하세요.

자바스크립트 배열 indexOf() 함수

브라우저 호환성

배열 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

참고문헌

같이 보기