Essential JavaScript ES6 Features Every Developer Should Know

Arrow Functions

Arrow functions provide a concise syntax for writing function expressions and lexically bind the `this` value.

Basic Syntax

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

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

// With body
const multiply = (a, b) => {
    const result = a * b;
    return result;
};

Lexical `this` Binding

// Problem with traditional functions
function Timer() {
    this.seconds = 0;
    setInterval(function() {
        this.seconds++; // 'this' refers to global object
    }, 1000);
}

// Solution with arrow functions
function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++; // 'this' refers to Timer instance
    }, 1000);
}

Destructuring Assignment

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables.

Array Destructuring

const numbers = [1, 2, 3, 4, 5];

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

// Skipping values
const [a, , c] = numbers;
console.log(a, c); // 1 3

// Rest operator
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

// Default values
const [x = 10, y = 20] = [5];
console.log(x, y); // 5 20

Object Destructuring

const user = {
    name: 'John',
    age: 30,
    email: 'john@example.com',
    address: {
        city: 'New York',
        country: 'USA'
    }
};

// Basic destructuring
const { name, age, email } = user;
console.log(name, age, email); // John 30 john@example.com

// Renaming variables
const { name: userName, age: userAge } = user;
console.log(userName, userAge); // John 30

// Nested destructuring
const { address: { city, country } } = user;
console.log(city, country); // New York USA

// Default values
const { name, age, role = 'user' } = user;
console.log(role); // user

Template Literals

Template literals provide an easier way to create strings with embedded expressions and multi-line strings.

String Interpolation

const name = 'World';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, World!

// Expressions
const a = 5, b = 10;
console.log(`Sum: ${a + b}`); // Sum: 15

// Function calls
function capitalize(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}
console.log(`Hello, ${capitalize('world')}!`); // Hello, World!

Multi-line Strings

// Before ES6
const html = '<div>\n' +
             '  <h1>Title</h1>\n' +
             '</div>';

// With template literals
const html = `<div>
  <h1>Title</h1>
</div>`;

// Tagged templates
function highlight(strings, ...values) {
    return strings.reduce((result, string, i) =>
        `${result}${string}<strong>${values[i] || ''}</strong>`, '');
}

const name = 'JavaScript';
const result = highlight`Hello ${name}!`;
console.log(result); // Hello <strong>JavaScript</strong>!

Promises & Async/Await

Promises provide a cleaner way to handle asynchronous operations, and async/await makes asynchronous code look synchronous.

Promises

// Creating a promise
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = Math.random() > 0.5;
            if (success) {
                resolve('Data fetched successfully');
            } else {
                reject('Failed to fetch data');
            }
        }, 1000);
    });
};

// Using promises
fetchData()
    .then(result => {
        console.log(result);
        return processData(result);
    })
    .then(processedData => {
        console.log(processedData);
    })
    .catch(error => {
        console.error(error);
    })
    .finally(() => {
        console.log('Operation completed');
    });

// Promise.all for parallel execution
const promises = [
    fetch('/api/users'),
    fetch('/api/posts'),
    fetch('/api/comments')
];

Promise.all(promises)
    .then(responses => {
        return Promise.all(responses.map(r => r.json()));
    })
    .then(data => {
        console.log('All data loaded:', data);
    });

Async/Await

// Async function
async function fetchUserData() {
    try {
        const response = await fetch('/api/user');
        const userData = await response.json();
        console.log('User data:', userData);
        return userData;
    } catch (error) {
        console.error('Error fetching user data:', error);
        throw error;
    }
}

// Using async function
async function main() {
    try {
        const user = await fetchUserData();
        const posts = await fetchUserPosts(user.id);
        console.log('User posts:', posts);
    } catch (error) {
        console.error('Main function error:', error);
    }
}

main();

// Parallel execution with Promise.all
async function fetchAllData() {
    try {
        const [users, posts, comments] = await Promise.all([
            fetch('/api/users').then(r => r.json()),
            fetch('/api/posts').then(r => r.json()),
            fetch('/api/comments').then(r => r.json())
        ]);

        console.log('All data:', { users, posts, comments });
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

ES6 Modules

ES6 modules provide a standardized way to organize and share code between JavaScript files.

Exporting

// Named exports
export const PI = 3.14159;

export function calculateArea(radius) {
    return PI * radius * radius;
}

export class Circle {
    constructor(radius) {
        this.radius = radius;
    }

    get area() {
        return calculateArea(this.radius);
    }
}

// Default export
export default function greet(name) {
    return `Hello, ${name}!`;
}

// Mixed exports
const utils = {
    formatDate: (date) => date.toLocaleDateString(),
    formatCurrency: (amount) => `$${amount.toFixed(2)}`
};

export { utils };
export { PI as MATH_PI };

Importing

// Named imports
import { PI, calculateArea, Circle } from './math.js';

console.log(PI); // 3.14159
const circle = new Circle(5);
console.log(circle.area); // 78.53975

// Default import
import greet from './greetings.js';
console.log(greet('World')); // Hello, World!

// Namespace import
import * as MathUtils from './math.js';
console.log(MathUtils.PI);

// Mixed imports
import greet, { PI, calculateArea } from './math.js';

// Dynamic imports
async function loadModule() {
    try {
        const module = await import('./dynamic-module.js');
        module.doSomething();
    } catch (error) {
        console.error('Error loading module:', error);
    }
}

Classes

ES6 classes provide a cleaner syntax for creating objects and dealing with inheritance.

Class Declaration

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    // Instance method
    greet() {
        return `Hello, my name is ${this.name}`;
    }

    // Getter
    get birthYear() {
        return new Date().getFullYear() - this.age;
    }

    // Setter
    set birthYear(year) {
        this.age = new Date().getFullYear() - year;
    }

    // Static method
    static createAnonymous() {
        return new Person('Anonymous', 0);
    }
}

// Usage
const person = new Person('John', 30);
console.log(person.greet()); // Hello, my name is John
console.log(person.birthYear); // 1994

person.birthYear = 1990;
console.log(person.age); // 34

const anonymous = Person.createAnonymous();

Inheritance

class Employee extends Person {
    constructor(name, age, jobTitle, salary) {
        super(name, age); // Call parent constructor
        this.jobTitle = jobTitle;
        this.salary = salary;
    }

    // Override parent method
    greet() {
        return `${super.greet()} and I work as a ${this.jobTitle}`;
    }

    // New method
    getAnnualSalary() {
        return this.salary * 12;
    }

    // Static method inheritance
    static createIntern(name) {
        return new Employee(name, 20, 'Intern', 2000);
    }
}

// Usage
const employee = new Employee('Jane', 28, 'Developer', 5000);
console.log(employee.greet()); // Hello, my name is Jane and I work as a Developer
console.log(employee.getAnnualSalary()); // 60000

const intern = Employee.createIntern('Bob');
console.log(intern.greet()); // Hello, my name is Bob and I work as a Intern

Spread & Rest Operators

The spread operator (...) allows iterables to be expanded, while the rest operator collects multiple elements into an array.

Spread Operator

// Array spreading
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5, 6];
console.log(moreNumbers); // [1, 2, 3, 4, 5, 6]

// Copying arrays
const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]

// Merging arrays
const array1 = [1, 2];
const array2 = [3, 4];
const merged = [...array1, ...array2];
console.log(merged); // [1, 2, 3, 4]

// Function arguments
function sum(a, b, c) {
    return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

// Object spreading
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

Rest Operator

// Function parameters
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

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

// Object destructuring
const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(others); // { c: 3, d: 4 }

// Advanced example
function multiply(multiplier, ...numbers) {
    return numbers.map(num => num * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]

Let & Const

`let` and `const` provide block-scoped variable declarations, solving many issues with `var`.

Block Scope

// var is function-scoped
function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 (accessible outside block)
}

// let and const are block-scoped
function example() {
    if (true) {
        let y = 20;
        const z = 30;
    }
    console.log(y); // ReferenceError
    console.log(z); // ReferenceError
}

Const for Constants

// const for values that shouldn't change
const PI = 3.14159;
const CONFIG = {
    apiUrl: 'https://api.example.com',
    timeout: 5000
};

// You can modify object properties
CONFIG.timeout = 10000; // OK
CONFIG.apiUrl = 'https://new-api.example.com'; // OK

// But you can't reassign the variable
CONFIG = {}; // TypeError

// For truly immutable objects, use Object.freeze
const FROZEN_CONFIG = Object.freeze({
    apiUrl: 'https://api.example.com',
    timeout: 5000
});
FROZEN_CONFIG.timeout = 10000; // Silently fails or throws in strict mode

Temporal Dead Zone

// var allows hoisting
console.log(a); // undefined
var a = 10;

// let and const have temporal dead zone
console.log(b); // ReferenceError
let b = 20;

console.log(c); // ReferenceError
const c = 30;

// Best practice: use const by default, let when needed
const name = 'John'; // Use const for values that won't change
let age = 30; // Use let for values that will change
age = 31; // OK

Advanced ES6 Features

Symbols

Symbols are unique and immutable primitive values that can be used as object property keys.

// Creating symbols
const sym1 = Symbol();
const sym2 = Symbol('description');
const sym3 = Symbol('description');

console.log(sym1 === sym2); // false
console.log(sym2 === sym3); // false (even with same description)

// Using symbols as object keys
const user = {
    name: 'John',
    [Symbol('id')]: 123,
    [Symbol('id')]: 456 // Different symbol, different key
};

console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id), Symbol(id)]

// Well-known symbols
class MyArray extends Array {
    static get [Symbol.species]() {
        return Array;
    }
}

Iterators and Generators

Iterators provide a way to access elements sequentially, and generators make it easy to create iterators.

// Custom iterator
const fibonacci = {
    [Symbol.iterator]() {
        let a = 0, b = 1;
        return {
            next() {
                const value = a;
                a = b;
                b = a + b;
                return { value, done: false };
            }
        };
    }
};

for (const num of fibonacci) {
    if (num > 100) break;
    console.log(num); // 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89
}

// Generator function
function* fibonacciGenerator() {
    let a = 0, b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

const fibGen = fibonacciGenerator();
console.log(fibGen.next().value); // 0
console.log(fibGen.next().value); // 1
console.log(fibGen.next().value); // 1

// Async generator
async function* asyncGenerator() {
    yield await fetchData();
    yield await processData();
}

Proxies and Reflection

Proxies allow you to intercept and customize operations performed on objects.

const target = {
    name: 'John',
    age: 30
};

const handler = {
    get(target, property) {
        console.log(`Getting ${property}`);
        return target[property];
    },
    
    set(target, property, value) {
        console.log(`Setting ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // Getting name, logs: John
proxy.age = 31; // Setting age to 31

// Validation proxy
function createValidator(target, validator) {
    return new Proxy(target, {
        set(target, property, value) {
            if (validator[property]) {
                const result = validator[property](value);
                if (!result.valid) {
                    throw new Error(result.message);
                }
            }
            target[property] = value;
            return true;
        }
    });
}

const user = {};
const userValidator = {
    age: (value) => ({
        valid: typeof value === 'number' && value >= 0,
        message: 'Age must be a non-negative number'
    })
};

const validatedUser = createValidator(user, userValidator);
validatedUser.age = 25; // OK
validatedUser.age = -5; // Throws error

Browser Support & Compatibility

ES6 features have excellent browser support in modern browsers. Here's a compatibility overview:

Transpilation with Babel

For older browser support, use Babel to transpile ES6+ code to ES5:

// .babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

// package.json scripts
{
  "scripts": {
    "build": "babel src -d dist",
    "watch": "babel src -d dist --watch"
  }
}

Performance Tips & Best Practices

Bundle Size Optimization

// Use tree shaking with ES6 modules
import { specificFunction } from './utils'; // Only imports specificFunction
// vs
const utils = require('./utils'); // Imports entire module

// Dynamic imports for code splitting
const button = document.getElementById('load-more');
button.addEventListener('click', async () => {
    const module = await import('./heavy-module.js');
    module.doHeavyWork();
});

Memory Management

• Arrow Functions in Loops: Be careful with closures in loops
• WeakMap/WeakSet: Use for memory-efficient object references
• Generator Functions: Pause/resume execution to manage memory
• Proper Cleanup: Clear event listeners and timers

Common Pitfalls to Avoid

// ❌ Bad: Arrow function in object methods
const obj = {
    name: 'Test',
    getName: () => this.name // 'this' refers to global object
};

// ✅ Good: Regular function or bind
const obj = {
    name: 'Test',
    getName() { return this.name; } // 'this' refers to obj
};

// ❌ Bad: Destructuring with default values
const { data: { user } } = response; // Throws if data is undefined

// ✅ Good: Safe destructuring
const { data: { user } = {} } = response || {};

// ❌ Bad: Promise anti-patterns
fetch(url).then(() => {
    throw new Error('Failed'); // Unhandled rejection
});

// ✅ Good: Proper error handling
fetch(url)
    .then(response => {
        if (!response.ok) throw new Error('HTTP error');
        return response.json();
    })
    .catch(error => console.error('Fetch failed:', error));