JavaScript ES6 Features – Modern JavaScript Made Easy

JavaScript has evolved significantly since its creation in 1995. In 2015, a major update called ECMAScript 6 (ES6) was released.

ES6 introduced many powerful features that made JavaScript:

• Easier to write

• More readable

• More efficient

• Better for large applications

Today, ES6 is the standard used in modern JavaScript development.

In this article, we will learn:

• What ES6 is

• Why ES6 was introduced

• let and const

• Template Literals

• Arrow Functions

• Default Parameters

• Destructuring

• Spread Operator

• Rest Parameters

• Classes

• Modules

• Practical examples

---

What is ES6?

ES6 stands for:

ECMAScript 2015

It is the sixth version of JavaScript.

Before ES6:

var name = "Rahul";

After ES6:

let name = "Rahul";

or

const name = "Rahul";

ES6 provides cleaner and more powerful syntax.

---

Why ES6 Was Introduced

Older JavaScript had problems:

• Complex syntax

• Variable scope issues

• Difficult code maintenance

• Less support for modern applications

ES6 solved many of these problems.

---

Feature 1: let Keyword

Before ES6:

var age = 20;

ES6:

let age = 20;

---

Why let?

let provides block scope.

Example:

if(true)
{
    let x = 10;
}

console.log(x);

Output:

Error

Because x exists only inside the block.

---

var vs let

Example:

if(true)
{
    var x = 10;
}

console.log(x);

Output:

10

Because var ignores block scope.

---

Feature 2: const Keyword

Used for constants.

Example:

const PI = 3.14159;

---

Attempting Modification

const PI = 3.14;

PI = 5;

Output:

Error

Constants cannot be reassigned.

---

let vs const

Feature	let	const
Reassign	Yes	No
Redeclare	No	No
Block Scope	Yes	Yes

---

Feature 3: Template Literals

Before ES6:

let name = "Rahul";

console.log(
"Hello " + name
);

---

ES6 Way

let name = "Rahul";

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

Output:

Hello Rahul

---

Benefits

• Cleaner code

• Easier string formatting

• Supports multiline strings

---

Multiline Strings

Old JavaScript:

let text =
"Line1\n" +
"Line2";

---

ES6

let text =
`
Line1
Line2
`;

Much cleaner.

---

Feature 4: Arrow Functions

Introduced shorter function syntax.

---

Traditional Function

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

---

Arrow Function

const add =
(a,b)=>
{
    return a+b;
};

---

Short Form

const add =
(a,b)=>a+b;

---

Example

const square =
x => x*x;

console.log(
square(5)
);

Output:

25

---

Why Arrow Functions?

• Short syntax

• Easier readability

• Common in modern frameworks

---

Feature 5: Default Parameters

Before ES6:

function greet(name)
{
    if(name===undefined)
    {
        name="Guest";
    }

    console.log(name);
}

---

ES6 Way

function greet(
name="Guest"
)
{
    console.log(name);
}

---

Example

greet();

Output:

Guest

---

Example

greet("Rahul");

Output:

Rahul

---

Feature 6: Destructuring

Extract values from arrays or objects easily.

---

Array Destructuring

Old Method:

let fruits =
["Apple","Mango"];

let first =
fruits[0];

let second =
fruits[1];

---

ES6 Way

let fruits =
["Apple","Mango"];

let
[first,second]
=
fruits;

---

Output

first  = Apple

second = Mango

---

Object Destructuring

Object:

let student =
{
    name:"Rahul",

    age:20
};

---

ES6

let
{name,age}
=
student;

Now:

console.log(name);

Output:

Rahul

---

Feature 7: Spread Operator

Represented by:

...

Used to expand arrays and objects.

---

Example

let numbers =
[1,2,3];

console.log(
...numbers
);

Output:

1 2 3

---

Combining Arrays

let arr1 =
[1,2];

let arr2 =
[3,4];

let arr3 =
[
...arr1,
...arr2
];

Result:

[1,2,3,4]

---

Feature 8: Rest Parameters

Collect multiple values into one parameter.

---

Example

function sum(
...numbers
)
{
    console.log(
    numbers
    );
}

sum(
1,2,3,4
);

Output:

[1,2,3,4]

---

Practical Sum Function

function sum(
...numbers
)
{
    let total = 0;

    for(let num of numbers)
    {
        total += num;
    }

    return total;
}

console.log(
sum(10,20,30)
);

Output:

60

---

Feature 9: Classes

ES6 introduced class syntax.

---

Old Constructor

function Student(
name
)
{
    this.name =
    name;
}

---

ES6 Class

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

---

Creating Object

let s1 =
new Student(
"Rahul"
);

---

Example

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

    show()
    {
        console.log(
        this.name
        );
    }
}

let s =
new Student(
"Rahul"
);

s.show();

Output:

Rahul

---

Feature 10: Modules

Modules allow splitting code into files.

---

Export

export function greet()
{
}

---

Import

import
{ greet }
from "./script.js";

---

Benefits of Modules

• Organized code

• Reusability

• Easy maintenance

---

Practical Example – Template Literal

let name = "Rahul";

let age = 20;

console.log(
`My name is ${name}
and I am ${age}
years old.`
);

Output:

My name is Rahul
and I am 20 years old.

---

Practical Example – Destructuring

let employee =
{
    name:"Amit",

    salary:50000
};

let
{name,salary}
=
employee;

console.log(name);

console.log(salary);

Output:

Amit

50000

---

Complete ES6 Program

<!DOCTYPE html>

<html>

<body>

<script>

const name =
"Rahul";

const age =
20;

const message =
`Hello ${name}`;

console.log(
message
);

const add =
(a,b)=>a+b;

console.log(
add(10,20)
);

</script>

</body>

</html>

Output:

Hello Rahul

30

---

ES5 vs ES6 Comparison

ES5	ES6
var	let, const
Function keyword	Arrow functions
String concatenation	Template literals
Constructor functions	Classes
Limited modules	Native modules

---

Real-Life Applications

ES6 features are used in:

• Web applications

• Mobile applications

• Server-side development

• Modern frameworks

• APIs

Frameworks such as React, Angular, and Vue.js rely heavily on ES6 features.

---

Common Mistakes Beginners Make

Using var Everywhere

Wrong:

var age = 20;

Better:

let age = 20;

---

Forgetting Backticks

Wrong:

"Hello ${name}"

Correct:

`Hello ${name}`

---

Confusing Spread and Rest

Spread:

...array

Expands values.

Rest:

(...args)

Collects values.

---

Advantages of ES6

• Cleaner syntax

• Improved readability

• Better maintainability

• Modern coding practices

• Faster development

---

Conclusion

ES6 transformed JavaScript into a modern programming language. Features like let, const, template literals, arrow functions, destructuring, classes, and modules make code easier to write and maintain.