폴리필(Polyfill)이란?

https://db2dev.tistory.com/m/entry/%ED%8F%B4%EB%A6%AC%ED%95%84Polyfill%EC%9D%B4%EB%9E%80

폴리필(Polyfill)이란

다음글은 위 자료를 공부하여 작성한 글입니다. 자세한 내용은 위 글을 참고해주세요.

Polyfill 

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

 

Babel과 core-js

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

 

Polyfill 만들어보기

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

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

  for (let i = 0; i < this.length; i++) {
    arr.push(callback(this[i], i, this)); // this[i], i , this 가 있기때문에 polyfill 한
                            		// mockMap 에서 (n,i,arr) => n * 2 와 같은식으로	
                                          // 사용할 수 있다.
  }

  return arr;
};

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

 

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

 

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

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