Polyfill

JavaScript Polyfill은 웹 브라우저가 새로운 JavaScript 기능을 지원하지 않을 때, 해당 기능을 구현하는 코드를 말한다. 즉, 오래된 웹 브라우저에서도 최신 JavaScript 코드를 사용할 수 있게 해준다

 

예를 들어, ES6에서 추가된 Array.from() 메소드는 오래된 웹 브라우저에서 지원되지 않는다. 따라서, 이 기능을 사용하려면 polyfill을 사용해야 한다. Polyfill은 Array.from() 메소드가 지원되지 않는 웹 브라우저에서 이를 대신할 수 있는 코드를 작성하여, 해당 기능을 사용할 수 있도록 한다.

 

Polyfill을 구현하는 방법에는 여러 가지가 있는데 일반적으로는 먼저 지원 여부를 체크하고, 지원하지 않을 경우에만 해당 기능을 구현하는 코드를 실행하는 방법을 사용한다다. 예를 들어, Array.from() 메소드를 지원하지 않는 웹 브라우저에서는 다음과 같은 코드를 사용할 수 있다.

if (!Array.from) {
  Array.from = function(object) {
    return [].slice.call(object);
  };
}

위 코드에서는 Array.from() 메소드를 지원하지 않는 경우에만, 해당 기능을 대신할 수 있는 코드를 실행하도록 한다. 이 코드는 인자로 받은 객체를 배열로 변환하여 반환하는 코드이다.

 

Polyfill을 사용하면, 최신 JavaScript 코드를 오래된 웹 브라우저에서도 사용할 수 있다. 하지만, polyfill을 사용하면 코드 크기가 커지고 성능 저하가 발생할 수 있으므로, 적절한 상황에서만 사용하는 것이 좋다.