[ES6+] includes() - 문자열 및 배열에 특정 요소를 포함하고 있는지 판별/확인 하기

스크립트를 사용하는 중에 배열 또는 문자열에서 어떠한 특정 값이 존재하는지 확인해야하는 경우가 생기는데

ES6에서 추가된 includes() 메서드에 대해 알아보고자 한다.

 

제목과 마찬가지로 배열 또는 문자열에서 사용 가능한 메서드이며

각각 String.prototype.includes() 와 Array.prototype.includes()를 의미한다.

 

▷ 구문

.includes( valueToFind[, fromIndex] )

 

첫번째 매개변수에는 찾고자 하는 값을 입력하고 (문자열의 경우 대소문자 구분)

두번째 매개변수는 생략이 가능하나 사용하고자 하면 시작 위치를 입력할 수 있다 기본값은 0이다.

 

예제를 통해 알아보도록 하자.

---

▷ 예제1) String.prototype.includes()

let str = 'it is mine-it-record tistory blog';

console.log(str.includes('it'));
// true

console.log(str.includes('IT'));
// false

console.log(str.includes('it', 12));
// false

 

String.prototype.includes() 메서드는 문자열 포함 여부를 알려주는것이기 때문에 boolean값을 return한다.

위 구문을 설명할때 각 매개변수에 대해 설명한것처럼 대소문자를 구분하며 시작점에따라 true/false가 달라진다.

 

▷ 예제2) Array.prototype.includes()

let arr = ['Avante', 'Volvo', 3, 2, NaN];

console.log(arr.includes('avante'));
// false

console.log(arr.includes(3, 3));
// false

console.log(arr.includes(2, -2));
// true

console.log(arr.includes(NaN));
// true

 

Array.prototype.includes()는 배열에 담겨있는 값이다 보니 문자열뿐만아니라 여러값들을 체크할 수 있다.

이 역시 포함 여부를 알려주는것이기 때문에 boolean값을 return한다.

 

▷ 예제3) 범위를 벗어난 fromIndex의 값에 따른 반환

let str = 'it is mine-it-record tistory blog';

console.log(str.includes('it', 1000));
// false

console.log(str.includes('it', -1000));
// true

let arr = ['Avante', 'Volvo', 3, 2, NaN];

console.log(arr.includes(3, 1000));
// false

console.log(arr.includes(3, -1000));
// true

 

includes() 메서드 구문에서 fromIndex가 존재하는데 이 값이 배열 혹은 문자열의 범위를 한참이나 벗어났을경우 어떤 값을 반환해줄까?

 

양수일 경우에는 배열 혹은 문자열의 길이를 벗어나기때문에 검색되지 않으며

음수일 경우에는 배열 혹은 문자열의 길이를 벗어나긴해도 결국에는 현재 길이의 마지막 지점은 벗어나지 못하기 때문에 전체가 검색되어 생략했을때와 동일한 결과를 반환한다.

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

Array.prototype.includes() - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/includes

String.prototype.includes() - JavaScript | MDN