What ECMAScript 6 features can I currently use in web browsers?

ECMAScript 6 (ES6), also known as ECMAScript 2015, introduced many powerful features to JavaScript. Most modern web browsers now support the majority of ES6 features, making them safe to use in production applications.

Browser Compatibility

Current ES6 browser support varies across different browsers:

Core ES6 Features You Can Use Today

Arrow Functions

Arrow functions provide a concise syntax for writing functions:

// Traditional function
function add(a, b) {
    return a + b;
}

// ES6 Arrow function
const add = (a, b) => a + b;

console.log(add(5, 3)); // 8

Template Literals

Template literals allow string interpolation and multi-line strings:

const name = "JavaScript";
const version = 6;

// Template literal with interpolation
const message = `Welcome to ECMAScript ${version}!
Learning ${name} is fun.`;

console.log(message);

Let and Const

Block-scoped variable declarations replace var:

// let for variables that change
let counter = 0;
counter = 1;

// const for constants
const PI = 3.14159;

// Block scope demonstration
if (true) {
    let blockVariable = "I'm block-scoped";
    console.log(blockVariable); // Works here
}
// console.log(blockVariable); // Would cause error

Destructuring Assignment

Extract values from arrays and objects easily:

// Array destructuring
const numbers = [1, 2, 3];
const [first, second] = numbers;
console.log(first, second); // 1 2

// Object destructuring
const person = { name: "Alice", age: 30 };
const { name, age } = person;
console.log(name, age); // Alice 30

Classes

Object-oriented programming with class syntax:

class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks`);
    }
}

const dog = new Dog("Rex");
dog.speak(); // Rex barks

Using ES6 with Older Browsers

For applications that need to support older browsers, use Babel to transpile ES6 code to ES5:

// Install Babel
npm install --save-dev @babel/core @babel/preset-env

// .babelrc configuration
{
  "presets": ["@babel/preset-env"]
}

ES6 Modules

Native module support allows clean code organization:

// math.js
export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

// main.js
import { add, multiply } from './math.js';
console.log(add(2, 3)); // 5

Conclusion

ES6 features are well-supported in modern browsers and significantly improve JavaScript development. Use Babel for legacy browser support when needed.