[JS] 폴리-필(Polyfill) , 바벨

자바스크립트는 현재도 계속 끊임없이 진화하고 있는 언어이다.

 

현재도 정기적으로 여러가지 제안들이 등록,분석되고 있으며 그 중 의미있는 제안들은 수용되고 받아들여지기도 한다.

 

https://github.com/tc39/ecma262/issues

GitHub - tc39/ecma262: Status, process, and documents for ECMA-262

위 깃헙 이슈들을 보면 JS관련된 여러가지 제안들을 확인할 수 있다.

 

해당 내용들 중에서 의미있다고 판단되는 내용들이

https://tc39.es/ecma262/

ECMAScript® 2024 Language Specification

위 페이지에 등록되게 되며, 궁극적으로는

 

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMA-262 - Ecma International

ECMA 명세서에 등록되게된다.

 

 

즉, JS가 계속 진화하기 때문에 비교적 최근에 나온 문법이 특정 엔진에서 동작하지 않을 수 있다. 모든 엔진이 명세서 안의 기능을 지원하지 않을 수 있기 때문이다.

 

이런 경우 바벨을 활용해서 해결할 수 있다.

 

 

바벨

바벨이란 트랜스파일러로, 모던 JS 코드를 구 표준으로 바꿔주는 역할을 하게 된다.

 

 

트랜스 파일러 ?

 

바벨은 코드를 재작성해주는 프로그램으로, 변경된 코드는 웹사이트 형태로 사용자에게 전달되게 된다. 웹팩같은 JS빌드 시스템을 활용하면 코드가 수정될때마다 자동으로 트랜스파일러가 동작시켜 준다.

 

 

 

 

폴리필 ?

 

위에서 설명한대로 명세서엔 새로운 문법이나 기존에 없던 내장함수에 대한 정의가 추가되곤 한다. 만약 새로운 문법이 생겼다면, 이를 구 문법으로 바꿔주는게 가능하겠지만 새롭게 표준에 추가된 함수는 직접 함수를 구현해야 사용할 수 있을 것이다.

 

JS는 동적인 언어이기 때문에 어떤 함수라도 스크립트에 추가 및 수정이 용이하다. 이런식으로 변경된 표준을 반영할 수 있도록 기존 함수를 수정하거나 새로 구현한 함수의 스크립트를 폴리필이라고 한다.

 

 

https://github.com/zloirock/core-js

GitHub - zloirock/core-js: Standard Library

 

 

조금 쉽게 생각하자면, 트랜스 파일러는 현재 문법을 과거문제로 변환해주는 것이고, 폴 리필이란 변환할 수 없는 새로운 문법들을 과거 문법에 맞게 추가해주는 역할이다.

 

 

 

 

 

MDN에서는 폴리필을 

 

polyfill은 이전 브라우저에서 기본적으로 지원하지 않는 최신 기능을 제공하는데 필요한 코드입니다. 

 

라고 정의하고 있다.

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/includes#%ED%8F%B4%EB%A6%AC%ED%95%84

Array.prototype.includes() - JavaScript | MDN

위 MDN 사이트에 들어가면 includes의 정보와 폴리필을 확인할 수 있다.

 

 

// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

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

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        // c. Increase k by 1.
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

 

위 내용을 통해서 includes를 지원하지 않는 경우에서도 해당 문법을 사용할 수 있게 된다.