Browser Support

ES6 Browser Support Overview

ES6 introduced many modern JavaScript features such as let, const, arrow functions, classes, modules, template literals, destructuring, promises, default parameters, spread syntax, rest parameters, maps, sets, symbols, and iterators. Most modern browsers support ES6 features, but older browsers may need transpilation or polyfills.

Browser support is important when building public websites, enterprise dashboards, mobile web apps, embedded apps, government systems, and applications that must work across older devices or locked-down corporate browsers.

ES6 Feature Browser Support Table

Modern Browser Support

Modern versions of Chrome, Edge, Firefox, Safari, Opera, Android Chrome, and iOS Safari support most ES6 syntax and runtime features.

• Use ES6 directly for modern-only applications.
• Use type="module" for modern JavaScript modules.
• Use Vite or modern bundlers for optimized builds.
• Test on both desktop and mobile browsers.

<script type="module" src="/src/main.js"></script>

Legacy Browser Support

Legacy browsers, especially Internet Explorer, do not fully support ES6. If your project must support older browsers, you need a build process that converts modern JavaScript into older syntax.

// Modern ES6

const greet =
  (name = "Guest") => `Hello ${name}`;

// Legacy-compatible idea

var greet =
  function(name) {
    name =
      name === undefined
        ? "Guest"
        : name;

    return "Hello " + name;
  };

What Is Transpilation?

Transpilation means converting modern JavaScript syntax into older JavaScript syntax that more browsers can understand. Babel is the most common JavaScript transpiler.

// ES6 source code

const add =
  (a, b) => a + b;

// Transpiled output idea

var add =
  function add(a, b) {
    return a + b;
  };

Transpilation handles syntax features like arrow functions, classes, template literals, destructuring, and default parameters.

What Are Polyfills?

A polyfill adds missing browser runtime features. Transpilation changes syntax, but it does not automatically add missing APIs like Promise, Map, Set, or Array.from().

if (!Array.from) {
  console.log(
    "Array.from polyfill is needed."
  );
}

Use polyfills only when your browser support target requires them.

Transpilation vs Polyfill

Use Browserslist Targets

Browserslist tells build tools which browsers your project supports. Babel, Autoprefixer, Vite, Webpack, and other tools can use this target to generate compatible output.

> 0.5%
last 2 versions
not dead
not IE 11

For enterprise apps that still support older browsers, the target may need to be stricter.

> 0.2%
last 2 versions
IE 11

Babel Configuration Example

// babel.config.js

module.exports =
  {
    presets:
      [
        [
          "@babel/preset-env",
          {
            useBuiltIns: "usage",
            corejs: 3
          }
        ]
      ]
  };

@babel/preset-env transforms JavaScript based on your browser targets. With core-js, it can include required polyfills.

Vite Browser Target Example

// vite.config.js

export default
  {
    build:
      {
        target: "es2018"
      }
  };

Modern projects often use Vite to build optimized browser bundles. Change the target based on your required browser support.

module and nomodule Pattern

The module and nomodule pattern allows modern browsers to load modern code while older browsers receive a legacy bundle.

<script type="module" src="/modern.js"></script>
<script nomodule src="/legacy.js"></script>

Modern browsers ignore nomodule. Older browsers that do not support modules can load the legacy script.

Feature Detection

Feature detection checks whether a browser supports a feature before using it. This is better than guessing based on browser name.

if ("Promise" in window) {
  console.log("Promises supported.");
} else {
  console.log("Load Promise polyfill.");
}

if ("fetch" in window) {
  console.log("Fetch supported.");
} else {
  console.log("Use fallback request library.");
}

Feature Detection Cannot Fix Syntax Errors

Feature detection works only after JavaScript is parsed. If an older browser cannot parse ES6 syntax, the script may fail before feature checks run.

// Old browsers may fail before running this code

if ("Promise" in window) {
  const load =
    () => Promise.resolve();
}

Use transpilation when you need support for browsers that cannot parse modern syntax.

Testing Browser Support

• Test on Chrome, Edge, Firefox, and Safari.
• Test on iOS Safari and Android Chrome.
• Use BrowserStack, Sauce Labs, or real devices for cross-browser testing.
• Check browser console errors on older devices.
• Test slow networks and older phones for performance.
• Verify polyfills load only when needed.
• Use Lighthouse and browser DevTools for compatibility and performance checks.
• Check production bundles, not only local development builds.

Common ES6 Support Examples

Arrow Function Support

// Modern

const add =
  (a, b) => a + b;

// Legacy output idea

var add =
  function(a, b) {
    return a + b;
  };

Template Literal Support

// Modern

const message =
  `Hello ${name}`;

// Legacy output idea

var message =
  "Hello " + name;

Class Support

// Modern

class User {
  constructor(name) {
    this.name = name;
  }
}

// Legacy idea

function User(name) {
  this.name = name;
}

Promise Support

if (!("Promise" in window)) {
  console.log(
    "Promise polyfill required."
  );
}

Browser Support Tools

When Browser Support Matters Most

• Public websites with unknown user devices.
• Enterprise apps used on managed corporate browsers.
• Government or education websites with accessibility requirements.
• Mobile-first applications used on older phones.
• International apps with low-end device support.
• Embedded webviews inside native mobile apps.
• Kiosk, TV, and in-store browser environments.
• Applications that must support old operating systems.

Common ES6 Browser Support Mistakes

• Assuming every browser supports all ES6 features.
• Using modern syntax without a build process for legacy browsers.
• Adding transpilation but forgetting required polyfills.
• Using feature detection for syntax that old browsers cannot parse.
• Testing only in Chrome.
• Ignoring mobile Safari differences.
• Shipping large polyfills to modern browsers unnecessarily.
• Not defining a clear Browserslist target.

ES6 Browser Support Best Practices

• Define your supported browsers before choosing build settings.
• Use Browserslist to share browser targets across tools.
• Use Babel or a modern bundler when legacy support is required.
• Add polyfills only for runtime features your target browsers lack.
• Use feature detection for optional browser APIs.
• Use the module and nomodule pattern when serving modern and legacy bundles.
• Test on real mobile browsers, especially Safari on iOS.
• Review bundle size when adding polyfills.

Key Takeaways

• Most modern browsers support ES6 well.
• Older browsers may need transpilation and polyfills.
• Transpilation changes syntax; polyfills add missing runtime features.
• Browserslist helps tools generate browser-compatible code.
• Feature detection is useful for APIs, but it cannot prevent syntax parsing errors.
• Always test production builds across the browsers your users actually use.