JavaScript is the backbone of web interactivity, but browser differences—especially between Internet Explorer (IE) and Microsoft Edge—can make development tricky. Even though IE is largely deprecated, many enterprises still use it, so understanding how to write compatible JavaScript remains useful.
1. Key Differences Between IE and Edge in JavaScript Support
Internet Explorer (IE)
- IE (especially versions 11 and below) supports ES5 (ECMAScript 5) and very limited parts of ES6.
- No support for modern features like:
- Arrow functions (
() => {}) letandconstdeclarations- Promises and async/await
- Modules (
import/export) - Optional chaining, nullish coalescing
- Arrow functions (
- IE often requires polyfills or transpilation (e.g., using Babel) to run modern JS code.
Microsoft Edge (Legacy and Chromium-based)
- Legacy Edge (EdgeHTML engine) supports most ES6 features but may lack some newer APIs.
- Chromium-based Edge (released since January 2020) supports nearly all modern JavaScript features.
- If targeting modern Edge (Chromium), you can write modern JS with little worry about compatibility.
2. Why Support Both IE and Edge?
- Enterprises and government agencies sometimes require IE for legacy apps.
- Edge offers better performance and features but users might still have IE.
- Writing compatible JavaScript means ensuring basic functionality in IE, with enhancements for Edge.
3. Writing Compatible JavaScript: Best Practices
- Avoid ES6+ syntax when targeting IE:
- Use
varinstead ofletorconst. - Use traditional function expressions instead of arrow functions.
- Use
- Use polyfills for missing features like
Promise,Array.prototype.includes,fetch. - Use tools like Babel to transpile modern JavaScript down to ES5.
- Test your code in actual IE and Edge browsers or emulators.
4. Model Example: Simple Feature Detection and Compatible Code
Let’s write a script that works in both IE and Edge to toggle a theme between light and dark, using compatible JavaScript.
jsCopyEdit// Feature detection for 'classList' (IE9+ supports it)
function toggleTheme() {
var body = document.body;
if (body.classList) {
// Use classList if available
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
} else {
body.classList.add('dark-theme');
}
} else {
// Fallback for older IE: manipulate className string
var classes = body.className.split(' ');
var i = classes.indexOf('dark-theme');
if (i >= 0) {
classes.splice(i, 1); // remove class
} else {
classes.push('dark-theme'); // add class
}
body.className = classes.join(' ');
}
}
// Attach click handler in an IE-compatible way
var btn = document.getElementById('toggleThemeBtn');
if (btn.addEventListener) {
btn.addEventListener('click', toggleTheme, false);
} else if (btn.attachEvent) {
btn.attachEvent('onclick', toggleTheme);
} else {
btn.onclick = toggleTheme;
}
Explanation
- We avoid arrow functions and
let/const. - Use feature detection for
classListto toggle CSS class in IE-friendly way. - Use
addEventListenerif available; fallback to IE’sattachEvent. - The theme toggle works by adding/removing a CSS class called
"dark-theme"on the<body>element.
5. HTML for Testing
Here’s minimal HTML to test this example:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white;
color: black;
transition: background 0.3s, color 0.3s;
}
.dark-theme {
background: #222;
color: #eee;
}
</style>
</head>
<body>
<button id="toggleThemeBtn">Toggle Theme</button>
<script src="themeToggle.js"></script> <!-- The JS code above -->
</body>
</html>
6. Tools to Help Compatibility
- Babel: Transpile modern JavaScript down to ES5 for IE.
- Polyfill.io: Automatically loads polyfills based on browser support.
- Can I Use: Check feature support across browsers (https://caniuse.com).
- Browser testing: Use virtual machines or services like BrowserStack to test IE and Edge.
7. Summary
| Feature/Aspect | Internet Explorer | Edge (Legacy) | Edge (Chromium) |
|---|---|---|---|
| ES6 Syntax | Very limited / none | Most supported | Fully supported |
| Promises/Async | No | Mostly yes | Yes |
Modules (import/export) | No | Partial | Yes |
| Event Listeners | Supports attachEvent | Supports addEventListener | Supports addEventListener |
| Polyfills needed? | Yes | Rarely | No |
When supporting IE, always write simple ES5 code or use transpilers/polyfills. For Edge, you can use modern JavaScript more freely.