Site icon Cyber & Web Development Code Lab

JavaScript ES6+ Features Deep Dive – Arrow Functions, Destructuring, Spread Operator, Modules, Promises, Async/Await, and Modern JavaScript Development (2026)

akshayhomkar

Introduction

JavaScript ES6 (ECMAScript 2015) was one of the biggest updates in JavaScript history.

It introduced modern features that made JavaScript:

Today, frameworks like:

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:
ReferenceError

Template 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 Guest

Rest 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:
60

Spread 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:
Red

Object 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
Rejected

Promise 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:
undefined

Nullish Coalescing Operator

let username = null;

let result = username ?? "Guest";

console.log(result);
Output:
Guest

Map 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

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

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

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

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

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.

Exit mobile version