[JavaScript] transpiler vs polyfills

• 자바스크립트는 새로운 피처를 계속 도입하며 진화한다.
• 하지만 일반적으로 자바스크립트 엔진은 더 느리게 이를 반영한다.
• 구형 엔진에서 새로운 자바스크립트 피처를 사용하고 싶으면 어떻게 해야할까?
  1. transpiler
  2. polyfills

transpiler

• 소스코드를 구현 엔진이 이해할 수 있는 소스코드로 변형한다.
• 예를 들어 es2020로 쓰인 코드를 es5로 변경하여 es5만 지원하는 구형 엔진에서도 돌아갈 수 있도록 한다.

// 트랜스파일러를 돌리기 전
height = height ?? 100;

// 트랜스파일러를 돌린 이후
height = (height !== undefined && height !== null) ? height : 100;

• 가장 유명한 트랜스파일러는 babel이다.
• webpack 같은 번들러는 코드가 change할 때마다 자동으로 트랜스파일러를 거치도록 해준다.

polyfills

• code piece를 추가하여 새로운 API를 emulate한다.
• syntax나 연산자는 폴리필로 해결할 수 없고 트랜스파일러로 해결해야 한다.
• 하지만 새로이 추가된 빌트인 함수는 emulate할 수 있다.
• 예를 들어 Math.trunc 같은 함수는 아주 구형 엔진에서는 돌아가지 않을 수 있는데, 이 기능을 Math.floor과 Math.ceil로 implement하는 것이다.
• 폴리필을 지원하는 라이브러리로는 core js가 많이 알려져있다.

Ref

https://javascript.info/polyfills