[JavaScript] 배열에서 includes() 메서드 사용하기

배열에서 특정 값이 포함되어 있는지 확인할 때 기존에는 indexOf()를 많이 사용했다. 하지만 indexOf를 쓰면 조금 번거로운 점이 있다.

indexOf

---

indexOf는 특정 값의 위치를 반환해. 값이 배열에 없으면 -1을 반환한다. 그런데 자바스크립트에서 0은 false로 간주되기 때문에 비교할 때 추가적인 작업이 필요하다.

const menu = ['coffee'];

function displayMenu(menu) {
    if (menu.indexOf('coffee')) {
        return true; // coffee가 있으면 true
    }
    return false; // 없으면 false
}

 

 

includes()

---

ES2016(ES7)에 추가된 includes() 메서드를 사용하면 이런 번거로움을 깔끔하게 해결할 수 있다. 이 메서드는 배열에 값이 있는지 확인하고, 결과를 true 또는 false로 바로 반환한다.

const menu = ['coffee'];

function displayMenu2(menu) {
    return menu.includes('coffee');
}

 

 

includes() 메서드와 크로스 브라우징

---

ES2016의 includes() 메서드는 대부분의 최신 브라우저에서 지원하지만, 구형 브라우저에서는 지원하지 않을 수 있다. 특히 **Internet Explorer(IE)**는 includes() 메서드를 지원하지 않아 크로스 브라우징 문제가 발생할 수 있다.

 

---

해결 방법

---

includes() 메서드를 사용할 때 발생할 수 있는 크로스 브라우징 문제를 해결하기 위해 아래와 같은 방법을 사용할 수 있다. 물론 "차라리 indexOf를 사용하는 게 낫지 않을까?"라고 생각할 수도 있지만, ES6의 다른 유용한 기능들까지 활용하려면 Babel 같은 도구를 사용하는 것도 좋은 선택이다.

1. 폴리필(Polyfill) 사용

includes()를 지원하지 않는 브라우저에서 사용할 수 있도록 폴리필을 추가할 수 있다.

 

2. 트랜스파일러 사용 (Babel)

Babel 같은 트랜스파일러를 사용하면, ES2016 코드를 구형 브라우저에서도 동작하도록 변환한다.