Introduction to ES6

ES6 (ECMAScript 2015) is the 6th version of JavaScript, released in 2015. It introduced many new features to make JavaScript more powerful, efficient, and easier to read.

New Features in ES6

1. The let Keyword

The let variables are mutable, meaning their values can be changed. It works similarly to the var keyword with key differences like scoping, making it a better option compared to var.

let n = 10;
{
    let n = 2; // Block-scoped variable
    console.log(n);
}
console.log(n);

Output:

2
10

It prevents variable leakage outside of the intended scope.

2. The const Keyword

const is used to declare variables with a constant value, ensuring the value cannot be reassigned.

const PI = 3.14159;
PI = 3; // Error: Assignment to constant variable

Ideal for declaring configuration constants or fixed values.

3. Arrow Functions

Arrow functions provide a concise syntax for writing function expressions and automatically bind this to the surrounding context.

// Traditional function
function add(a, b) {
    return a + b;
}
 
// Arrow function
const add = (a, b) => a + b;

• Implicit return for single-expression functions.
• Do not have their own this context.

4. Destructuring Assignment

Destructuring in JavaScript allows breaking down complex structures (Objects or arrays) into simpler parts.

Object Destructuring

const obj = { name: "Raj", age: 25 };
const { name, age } = obj;
console.log(name, age);

Output:

Raj 25

Array Destructuring

const a = ["red", "blue", "green"];
const [first, second] = a;
console.log(first, second);

Output:

red blue

5. The Spread (...) Operator

The spread operator expands an array or object into individual elements or properties.

const n1 = [1, 2, 3];
const n2 = [...n1, 4, 5];
console.log(n2);

Output:

[ 1, 2, 3, 4, 5 ]

6. The for...of Loop

The for...of loop allows iteration over iterable objects like arrays, strings, Maps, and Sets with concise syntax.

Iterating Over an Array

const a = ["apple", "banana", "cherry"];
for (const fruit of a) {
    console.log(fruit);
}

Output:

apple
banana
cherry

Iterating Over a String

const s = "hello";
for (const char of s) {
    console.log(char);
}

Output:

h
e
l
l
o

7. Maps and Sets

Map: Key-Value Pair Storage

const map = new Map();
map.set("a", 1);
map.set("b", 2);
console.log(map.get("a"));

Output:

1

Set: Unique Value Storage

const set = new Set([1, 2, 3, 3]);
console.log(set);

Output:

Set(3) { 1, 2, 3 }

8. Classes

ES6 introduced classes to JavaScript for object creation.

class Animal {
    speak() {
        console.log("The animal makes a sound");
    }
}
 
const dog = new Animal();
dog.speak();

Output:

The animal makes a sound

9. Promises

Promises simplify handling asynchronous operations with .then and .catch.

const fetch = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched"), 2000);
    });
};
 
fetch().then(data => console.log(data));

10. Default Parameters

Allows functions to have default values for parameters.

function greet(name = "Guest") {
    return `Hello, ${name}!`;
}
console.log(greet());

Output:

Hello, Guest!

Additional Enhancements

String Methods:

• includes(): Check if a string contains a substring.
• startsWith(): Check if a string starts with a substring.
• endsWith(): Check if a string ends with a substring.

Array Methods:

• find(): Locate the first element matching a condition.
• findIndex(): Locate the index of the first element matching a condition.
• from(): Convert an iterable or array-like object into an array.