IE 브라우저에서 Includes() 함수 미동작, 해결 방법

서론

• 현재 나는 브라우저 사양이 IE인 웹 사이트를 개발 중이다. IE의 속도가 느린 관계로 크롬 혹은 파이어 폭스에서 테스트 및 개발을 하고 있었다.
• 한 기능을 구현하기 위해 javascript의 Includes 메서드를 사용했다. 크롬과 파이어 폭스에서 제대로 동작을 해서 당연히 IE 에서도 되겠지 싶었지만 역시나! IE에 접속하자 해당 기능이 동작을 하지 않았다. (이미 익숙 😂 )
• 열심히 구글링을 해본 결과 Includes 메서드 때문인 걸 알게 되었다. IE에서는 Includes 메서드를 지원하지 않는다고 한다. 해결 방법에 앞서 includes() 메서드는 무슨 기능을 갖고 있는지 살펴보자.

Array.prototype.includes()

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

• includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다.

IE 에서 해결 방법

var myString = 'this is my string';
myString.indexOf('string');
// -> 11

myString.indexOf('hello');
// -> -1

String.prototype.includes is, as you write, not supported in Internet Explorer (or Opera). nstead you can use String.prototype.indexOf. #indexOf returns the index of the first character of the substring if it is in the string, otherwise it returns -1. (Much like the Array equivalent)

• indexOf는 문자열에 있는 경우 부분 문자열의 첫 번째 문자의 인덱스를 반환하고 그렇지 않으면 -1을 반환한다. (배열과 매우 유사 함)
• 따라서 나는 조건문을 활용해서 -1 일 경우 해당 문자열 유무를 확인했다.

결론

• IE 브라우저 사용하기 싫다. 다른 브라우저들에 비해서 왜 이렇게 안되는 기능들이 많은 것일까...?

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
https://stackoverflow.com/questions/36574351/includes-not-working-in-internet-explorer