ECMAScript는 자바스크립트의 표준 사양으로, 새로운 버전이 나올 때마다 새로운 기능과 문법이 추가됩니다. 하지만 이러한 새로운 기능은 모든 브라우저에서 즉시 사용할 수 있는 것은 아닙니다. 따라서 미래의 ECMAScript 기능을 지원하지 않는 브라우저에서도 해당 기능을 사용하기 위해 Polyfill을 사용할 수 있습니다.

Polyfill은 브라우저가 지원하지 않는 기능을 자바스크립트로 구현한 코드입니다. 예를 들어, 미래의 ECMAScript에서 도입된 Promise 객체를 사용하려면 IE11과 같은 오래된 브라우저에서는 지원되지 않습니다. 그러나 Promise를 구현한 Polyfill을 사용하면 이러한 오래된 브라우저에서도 Promise를 사용할 수 있습니다.

Polyfill을 사용하기 위해서는 먼저 해당 기능이 브라우저에서 지원되는지 확인해야 합니다. 그리고 지원되지 않는 경우에만 Polyfill을 사용하여 해당 기능을 구현합니다. 이후 해당 Polyfill 코드를 웹페이지에 추가하면, 해당 기능을 사용할 수 있습니다.

예를 들어, 미래에 도입될 메서드인 Array.prototype.includes()를 지원하지 않는 브라우저에서도 사용하려면, 다음과 같은 Polyfill을 사용할 수 있습니다:

if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement /*, fromIndex*/) {
    'use strict';
    var O = Object(this);
    var len = parseInt(O.length) || 0;
    if (len === 0) {
      return false;
    }
    var n = parseInt(arguments[1]) || 0;
    var k;
    if (n >= 0) {
      k = n;
    } else {
      k = len + n;
      if (k < 0) {k = 0;}
    }
    var currentElement;
    while (k < len) {
      currentElement = O[k];
      if (searchElement === currentElement ||
         (searchElement !== searchElement && currentElement !== currentElement)) {
        return true;
      }
      k++;
    }
    return false;
  };
}

위의 Polyfill 코드는 Array.prototype.includes() 메서드가 지원되지 않는 브라우저에서 해당 기능을 구현하는 코드입니다. 이 코드를 사용하여 includes() 메서드를 사용할 수 있습니다.

Polyfill은 일반적으로 자바스크립트 라이브러리나 프레임워크에서 제공되며, 많은 개발자들이 공유하는 오픈 소스로도 사용할 수 있습니다. Polyfill은 미래의 ECMAScript 기능을 사용할 수 있는 편리한 도구로, 다양한 환경에서 모든 기능을 지원하기 위해 활발하게 사용되고 있습니다.

더 자세한 정보는 MDN web docs를 참조해주세요.