JavaScript ES6 Features Every Developer Should Know

JavaScript ES6 (ECMAScript 2015) introduced many powerful features that made writing JavaScript cleaner, faster, and easier to maintain.

If you're learning modern JavaScript, mastering ES6 is essential before moving to frameworks like React, Vue, or Node.js.

What is ES6?

ES6 stands for ECMAScript 2015, the sixth major version of JavaScript.

It introduced modern syntax and features that simplify development and improve code readability.

Why Learn ES6?

Benefits of ES6 include:

• Cleaner syntax

• Better readability

• Improved performance

• Easier asynchronous programming

• Modular code

• Reduced boilerplate

let and const

Before ES6:

var name = "John";

Modern JavaScript:

let name = "John";
const PI = 3.14159;

Difference

• var → Function scoped
  

• let → Block scoped
  

• const → Block scoped and cannot be reassigned
  

Arrow Functions

Traditional Function

function greet(name){
    return "Hello " + name;
}

Arrow Function

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

Short Version

const greet = name => `Hello ${name}`;

Benefits:

• 
  Short syntax
  

• 
  Cleaner code
  

• 
  Better handling of this
  

Template Literals

Old Way

var name = "Alex";
console.log("Hello " + name);

ES6

const name = "Alex";

console.log(`Hello ${name}`);

Supports:

• 
  Variables
  

• 
  Multiline strings
  

• 
  Expressions
  

Destructuring

Array

const colors = ["Red","Blue","Green"];

const [first, second] = colors;

Object

const user = {
    name: "Kuldeep",
    age: 21
};

const {name, age} = user;

Spread Operator

const arr1 = [1,2,3];

const arr2 = [...arr1,4,5];

Objects

const user = {
    name:"Kuldeep"
};

const updatedUser = {
    ...user,
    city:"Pune"
};

Rest Operator

function sum(...numbers){
    return numbers.reduce((a,b)=>a+b);
}

sum(10,20,30);

Default Parameters

function greet(name="Guest"){
    return `Welcome ${name}`;
}

Enhanced Object Literals

const name = "Kuldeep";
const age = 21;

const user = {
    name,
    age
};

For...of Loop

const numbers = [10,20,30];

for(const number of numbers){
    console.log(number);
}

Promises

const promise = new Promise((resolve,reject)=>{

    const success = true;

    if(success){
        resolve("Success");
    }
    else{
        reject("Failed");
    }

});

Async / Await

async function getData(){

    const response = await fetch("/api/users");

    const data = await response.json();

    console.log(data);

}

Advantages:

• 
  Cleaner than callbacks
  

• 
  Easy to read
  

• 
  Better error handling
  

Modules

Export

export const PI = 3.14;

Import

import { PI } from "./math.js";

Classes

class Student{

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

    introduce(){
        console.log(`Hi, I'm ${this.name}`);
    }

}

const student = new Student("Kuldeep");

student.introduce();

Optional Chaining

Instead of

if(user && user.address){
    console.log(user.address.city);
}

Use

console.log(user?.address?.city);

Nullish Coalescing

const username = null;

console.log(username ?? "Guest");

Essential ES6 Features

• 
  let & const
  

• 
  Arrow Functions
  

• 
  Template Literals
  

• 
  Destructuring
  

• 
  Spread Operator
  

• 
  Rest Parameters
  

• 
  Default Parameters
  

• 
  Classes
  

• 
  Modules
  

• 
  Promises
  

• 
  Async/Await
  

• 
  Optional Chaining
  

• 
  Nullish Coalescing
  

Best Practices

• 
  Prefer const over let whenever possible.
  

• 
  Use arrow functions for concise callbacks.
  

• 
  Replace string concatenation with template literals.
  

• 
  Use destructuring to write cleaner code.
  

• 
  Avoid callback hell by using async/await.
  

• 
  Organize projects using ES6 modules.
  

• 
  Keep functions small and reusable.