Platform under construction

Versions & Runtimes

Intermediate

Polyfills & Transpiling

Transpiling changes syntax. Polyfills add missing APIs. They solve different support problems and should not be confused.

// Transpiling can rewrite syntax.
const value = user?.profile?.name ?? "Unknown";

// A polyfill may be needed for missing APIs.
Promise.allSettled(tasks);

Versions & Runtimes

Polyfills and transpilers are support tools, not magic buttons.

When a target environment does not support modern JavaScript, tooling can sometimes help. A transpiler rewrites newer syntax into older syntax. A polyfill provides missing built-in functionality or APIs.

These tools are powerful, but they have limits. Syntax can often be transformed. Browser APIs sometimes need polyfills. Some features cannot be perfectly recreated in older environments.

The goal is not to transpile everything forever. The goal is to support the users you actually need to support with the smallest reliable toolchain.

Transpiling

Rewrites code syntax, such as arrow functions or optional chaining, for older runtimes.

Polyfill

Adds missing functions or objects when an environment does not provide them.

Build target

The environment level your final JavaScript is built for.

Bundle cost

More compatibility can mean more generated code, larger files and more complexity.

Examples

Good JavaScript respects its target environment.

Tool choice matches the missing support

// New syntax problem: use transpiling.
const title = course?.lesson?.title ?? "Untitled";

// Missing API problem: use a feature check and fallback/polyfill strategy.
if (!("fetch" in window)) {
  showUnsupportedBrowserMessage();
}

Assuming one tool solves every problem

// Transpiling this syntax does not automatically add every browser API.
const response = await fetch("/api/articles");

// If fetch is missing, transformed syntax is not enough.

Rules that matter

Version and runtime choices are production decisions.

Modern JavaScript is powerful, but support is never automatic. Choose syntax, APIs and tooling based on the environments that must run the code.

Transpile syntax

Use transpilation when the parser cannot understand modern syntax.

Polyfill APIs

Use polyfills when a built-in object or method is missing and can be safely emulated.

Avoid unnecessary payload

Do not ship large compatibility code to users who do not need it.

Know what cannot be polyfilled well

Some platform features depend on browser internals and need a fallback instead.

Document build targets

Future developers need to know why the build emits a certain JavaScript level.

Test the built output

Do not only test source code. Test what the browser actually receives.

Production thinking

Support strategy keeps modern JavaScript reliable.

Why does this matter?

Understanding the difference prevents expensive confusion. A transpiler cannot invent a full browser platform, and a polyfill does not make unreadable syntax parse.

Accessibility

Compatibility tooling helps users on older or restricted environments, but broken polyfills can also create fragile experiences. Test important interactions.

Production note

Production builds should balance compatibility, file size, caching, performance and maintenance burden.

SEO note

If generated JavaScript fails, rendered content and navigation may fail. Keep critical content and links resilient.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change optional chaining to normal property access and compare readability.
Change the feature check from fetch to Promise.
Write one sentence that explains why syntax and APIs are separate problems.

Practice assignment

Do this before moving to the next topic.

Pick one modern syntax feature and decide whether transpiling can help.
Pick one browser API and decide whether it needs a polyfill or fallback.
Write down the cost of supporting an older browser for that feature.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Polyfills & Transpiling.