JavaScript ES6+ Features Deep Dive – Arrow Functions, Destructuring, Spread Operator, Modules, Promises, Async/Await, and Modern JavaScript Development (2026)
Introduction
JavaScript ES6 (ECMAScript 2015) was one of the biggest updates in JavaScript history.
It introduced modern features that made JavaScript:
- More readable
- More maintainable
- More powerful
- Easier to write
Today, frameworks like:
- React
- Next.js
- Vue.js
- Node.js
heavily depend on ES6+ syntax.
Why ES6 Was Introduced
Before ES6:
var name = "Akshay";
function add(a,b){
return a+b;
}Modern JavaScript:
const name = "Akshay";
const add = (a,b) => a+b;Benefits:
-Less code
-Better readability
-Better performance
– Modern development standards
let, const and Block Scope
var
var city = "Sangli";
var city = "Kolhapur";Allowed redeclaration.
let
let city = "Sangli";
city = "Kolhapur";Cannot redeclare.
const
const PI = 3.14159;Cannot redeclare or reassign.
Block Scope Example
{
let age = 25;
}
console.log(age);Output:
ReferenceErrorTemplate Literals
Before ES6:
let name = "Akshay";
console.log("Welcome " + name);Using Template Literals:
let name = "Akshay";
console.log(`Welcome ${name}`);Multi-Line Strings
let message = `Welcome To JavaScript `;Arrow Functions
Arrow functions provide shorter syntax.
Traditional Function
function square(num){
return num*num;
}Arrow Function
const square = (num) => num*num;Multiple Parameters
const add = (a,b) => a+b;
console.log(add(10,20));Arrow Function with Block
const greet = name => {
return `Hello ${name}`;
};Default Parameters
function greet(name="Guest"){
console.log(`Welcome ${name}`);
}
greet();Output:
Welcome GuestRest Parameters (…)
Collect multiple arguments.
function total(...numbers){
let sum = 0;
for(let num of numbers){
sum += num;
}
return sum;
}
console.log(total(10,20,30));Output:
60Spread Operator (…)
Copies or expands arrays and objects.
Array Example
let arr1 =
[1,2,3];
let arr2 =
[...arr1,4,5];
console.log(arr2);Output:
[1,2,3,4,5]Object Example
let student = {name:"Akshay", course:"JavaScript" };
let updatedStudent = {...student, city:"Sangli"};
console.log(updatedStudent);Destructuring
Extract values from arrays and objects easily.
Array Destructuring
let colors =["Red","Green","Blue"];
let [first,second] = colors;
console.log(first);Output:
RedObject Destructuring
let student = {name:"Akshay",age:25 };
let {name,age} = student;
console.log(name);Enhanced Object Literals
let name = "Akshay";
let course = "JavaScript";
let student = {name,course};
console.log(student);for…of Loop
let colors = ["Red","Green","Blue"];
for(let color of colors){
console.log(color);
}Classes in JavaScript
ES6 introduced class syntax.
Example
class Student{
constructor(name, course){
this.name = name;
this.course = course;
}
display(){
console.log(this.name);
}
}
const s1 = new Student("Akshay", "JavaScript");
s1.display();Inheritance
class Person{
constructor(name){
this.name = name;
}
}
class Student extends Person{
constructor(name, course){
super(name);
this.course = course;
}
}
let s1 = new Student("Akshay", "JavaScript");
console.log(s1);JavaScript Modules
Modules help organize large applications.
math.js
export function add(a,b){
return a+b;
}app.js
import {add}
from './math.js';
console.log(
add(10,20)
);Promises
Promises handle asynchronous operations.
Promise States
Pending
Fulfilled
RejectedPromise Example
let promise = new Promise((resolve,reject)=>{
let success = true;
if(success){
resolve("Operation Successful");
}
else{
reject("Operation Failed");
}
}
);
promise
.then(result => {console.log(result);})
.catch(error => {console.log(error);});Async and Await
Async/Await makes asynchronous code easier.
Example
async function getData(){
return "Hello";
}
getData()
.then(data => {
console.log(data);
});Fetch Example
async function loadUsers(){
let response = await fetch("https://jsonplaceholder.typicode.com/users");
let users = await response.json();
console.log(users);
}Optional Chaining
Avoids errors when properties do not exist.
let student = {name:"Akshay"};
console.log(student.address?.city);Output:
undefinedNullish Coalescing Operator
let username = null;
let result = username ?? "Guest";
console.log(result);Output:
GuestMap Data Structure
let users = new Map();
users.set(1, "Akshay");
users.set(2,"Rahul");
console.log(users.get(1));Set Data Structure
let numbers = new Set([1,2,2,3,3,4]);
console.log(numbers);Output:
{1,2,3,4}Mini Project 1: Student Result Processor
Concepts Covered
- Array Methods
- Destructuring
- Arrow Functions
- Spread Operator
const students = [
{
name:"Akshay",
marks:85
},
{
name:"Rahul",
marks:65
},
{
name:"Priya",
marks:90
}
];
const toppers = students.filter(student => student.marks > 80);
console.log(toppers);Mini Project 2: Product Cart System
Concepts Covered
- Classes
- Arrays
- Spread Operator
class Cart{
constructor(){
this.items = [];
}
addItem(item){
this.items = [...this.items,item];
}
}
let cart = new Cart();
cart.addItem("Laptop");
cart.addItem("Mouse");
console.log(cart.items);Mini Project 3: User API Loader
Concepts Covered
- Fetch API
- Async/Await
- Promises
async function loadUsers(){
try{
let response = await fetch("https://jsonplaceholder.typicode.com/users");
let users = await response.json();
console.log(users);
}
catch(error){
console.log(error);
}
}
loadUsers();ES5 vs ES6
| Feature | ES5 | ES6 |
|---|---|---|
| Variables | var | let, const |
| Functions | Traditional | Arrow Functions |
| Strings | Concatenation | Template Literals |
| Modules | Not Supported | Supported |
| Classes | Prototype Based | Class Syntax |
| Async | Callbacks | Promises, Async/Await |
Common Interview Questions
- What is ES6?
- Difference between var, let and const?
- What are Arrow Functions?
- What is Destructuring?
- What is Spread Operator?
- What is Rest Parameter?
- What are JavaScript Modules?
- What is a Promise?
- Difference between Promise and Async/Await?
- What is Optional Chaining?
Best Practices
-Use const whenever possible
-Use Arrow Functions for callbacks
-Prefer Async/Await over nested callbacks
-Use Destructuring for cleaner code
-Organize code using Modules
-Handle errors using try-catch
Summary
In this tutorial, we explored modern JavaScript ES6+ features that are used extensively in professional web development.
Topics Covered
- let and const
- Template Literals
- Arrow Functions
- Default Parameters
- Rest Parameters
- Spread Operator
- Destructuring
- Classes and Inheritance
- Modules
- Promises
- Async/Await
- Optional Chaining
- Nullish Coalescing
- Map and Set
- Practical Projects
Mastering these ES6+ features will make your code cleaner, more efficient, and prepare you for modern technologies such as React, Next.js, Node.js, Express.js, and full-stack development.
Great article keep it up 💯