ES6 지원하지 않는 브라우저에서 ES6 메서드 사용하기

최신 버전의 브라우저들은 ES6가 동작을 합니다.

하지만 프로젝트가 진행되는 사이트마다 브라우저 버전이 낮은 경우(또는 IE....)

ES6가 동작하지 않을 때가 많습니다.

 

이럴 때는 ES6에서 사용하고 싶은 메서드를 우리가 작성하고 있는 소스에 적용하거나,

프로젝트마다 공통으로 작성되는 JS파일에 해당 메서드를 작성하면 됩니다.

 

developer.mozilla.org 

MDN Web Docs

해당 사이트에서는 ES6를 지원하지 않는 브라우저에서 사용할 수 있는 폴리필을 제공합니다.

예를 들어 ES6에서 사용할 수 있는 표준내장객체 Array의 find()메서드가 필요할 경우

 

해당 메서드의 설명이 있는 페이지로 이동하여 살펴보면

위와 같이 폴리필 영역이 있습니다.

위 코드를 

<script type="text/javascript">
window.onload = function(){

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;
.....생략
}
</script>

이런 식으로 개발하려는 페이지에 넣거나, 해당 내용을 공통 JS파일에 정의하게 되면

find() 메서드를 사용할 수 있다.