[JavaScript] 자바스크립트 includes 메서드 이해하기

includes 메서드란?

includes 메서드는 배열이나 문자열에 특정한 값을 포함하는지 여부를 확인하는 메서드다.

특정한 값을 포함하는지에서 유추할 수 있듯이, includes 메서드는 boolean 타입의 값을 리턴한다.

문법

문법은 생각보다 간단한 형태로 사용되는데, 배열이나 문자열 뒤에 includes 메서드를 실행시키고 첫 번째 파라미터에 확인하고 싶은 특정한 값을 아규먼트로 전달해 주면 된다.

// 1. 배열에서 includes() 메서드 사용 예시:
const array = ['제우스', '카나비', '쵸비', '룰러', '케리아'];

console.log('1. 배열에서 includes() 메서드 사용 예시:');
console.log(array.includes('쵸비')); // ?
console.log(array.includes('페이커')); // ?

// 2. 문자열에서 includes() 메서드 사용 예시:
const string = 'Javascript';

console.log('2. 문자열에서 includes() 메서드 사용 예시:');
console.log(string.includes('a')) // ?
console.log(string.includes('b')) // ?

위의 코드를 실행시켰을 때 결과는 다음과 같다.

 

먼저 배열 예제부터 보자.

array에서 includes 메서드를 사용하여 특정 값의 존재 여부를 확인했을 때, 첫 번째는 '쵸비'가 array에 포함되어 있으므로 true를 반환하고. 두번째 '페이커'는 array에 포함되지 않았으므로 false를 반환한 것이다.

 

다음 문자열 예제에서는 문자열 string에서 includes를 사용했는데, 여기도 배열과 크게 다르지 않게 Javascript라는 문자열에 a는 있지만 b는 없기 때문에 각각 true와 false 가 출력된 것이다.

 

문자열 메서드로 활용할 때 주의점

includes 메서드를 활용할 땐 몇 가지 주의해야할 사항이 있다. 

const string = 'Javascript';

console.log('문자열에서 includes() 메서드 사용 예시:');
console.log('J: ', string.includes('J')) // ?
console.log('j: ', string.includes('j')) // ?
console.log('as: ', string.includes('as')) // ?
console.log('Java: ', string.includes('Java')) // ?
console.log('script: ', string.includes('script')) // ?

위 코드를 실행하면 다음과 같은 결과가 나온다.

첫 번째 포인트는 대소문자 구분이다. 처음 두 결과를 보면 Javascript 에서 J(대문자)는 있지만 j(소문자) 는 없기 때문에 각각 true, false 가 출력되었다.

너무 당연한 게 아닌가 싶긴 하지만 실제로 코드를 작성할 때는 직접 값을 전달하는 게 아니라 변수에 담긴 값을 활용하다 보니 그 의외로 대소문자가 구분되지 않고 값이 전달되어 의도치 않게 코드가 동작하는 경우를 심심찮게 만나볼 수도 있으니 주의해야 할 필요가 있다.

두 번째 포인트는 사실 이 상황을 어떻게 표현해야할지 모르겠지만, 문자열에서 이 includes 메서드를 활용했을 때 첫 번째 파라미터로 전달한 값이 이 문자열 전체의 부분(?)으로 문자열 포함 여부를 확인하기 때문에 발생하는 현상이다.

이것도 사실상 너무 당연한 느낌이긴 하지만, includes 메서드는 문자열의 일치를 확인하는 것이 아니기 때문에 Javascript라는 문자열에 includes 메서드의 아규먼트로 as, Java, script 같은 문자열을 전달하면 모두 true 값을 반환한다.

특정한 음절단위의 문자가 아니라, 독립적으로 의미를 가지는 단어나 문장들이 들어가서 의도치 않은 true 값이 반환되면서 의도치 않게 코드가 동작하는 경우가 생각보다 은근히 발생할 수 있을 것 같다.