폴리필(Polyfill)이란

폴리필

폴리필(Polyfill)이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.

Babel과 core-js

폴리필을 위한 트랜스파일러에는 Babel이 있다. Babel 내부에는 core-js라는 라이브러리가 탑재되어 ES6 이후의 문법들을 폴리필 처리할 수 있다.

폴리필 따라해보기

ES6에서 추가된 배열의 내장 메서드 map()을 ES5로 구현해보자. mockMap()은 map()과 같이 배열 내의 모든 요소에 대해 주어진 콜백함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.

const nums = [1, 4, 9, 16];
const result = nums.mockMap((n) => n * 2);

console.log(result); // [2, 8, 18, 32]

그 전에 Array.prototype에 mockMap()이라는 메서드를 주입해야 모든 배열이 해당 메서드를 호출할 수 있게 된다.

Array.prototype.mockMap = function (callback) {
  const arr = [];

  for (let i = 0; i < this.length; i++) {
    arr.push(callback(this[i], i, this));
  }

  return arr;
};

mockMap() 내부에서는 메서드를 호출한 배열(this)을 순회하면서 callback 함수의 파라미터로 this[i]를 넘겨주고 있다. 여기서는 (n) => n * 2가 콜백함수에 해당된다. 따라서 배열의 각 요소(this[i])들에 2가 곱해진 값이 리턴될 수 있는 것이다.

추가적으로 this[i]에 이어 callback 함수의 파라미터로 현재 인덱스(i)와 mockMap()을 호출한 배열(this)을 전달하고 있다. 이 두 개의 인자는 (n, i, arr) => n * 2 와 같은 식으로 받아서 사용할 수 있으며, 필수가 아닌 옵션 인자이다.