JavaScript has seriously leveled up over the years, and one of the game-changers was ECMAScript 6, or ES6, which hit the scene in 2015. It’s been huge for web developers, loaded with features that make coding more straightforward, readable, and even kind of fun.

Let and Const Keywords

ES6 brought in the let and const keywords, which totally changed how we handle variables. These babies are block-scoped, meaning they only exist within the block they’re declared in—no more worry about scope leaks.

With let, you can declare variables that stay put in their blocks. Picture this:

function example() {
    let x = 10;
    if (true) {
        let x = 20;
        console.log(x); // 20
    }
    console.log(x); // 10
}
example();

Here, x inside the if block is its own thing, separate from x outside the block. Neat, right?

The const keyword is all about constants. Declare with const and you can’t change it. It’s still block-scoped. Check it out:

const name = 'Alice';
console.log(name); // Alice
// name = 'Bob'; // Error: Assignment to constant variable

But, heads up! Properties of a const object can still be modified:

const obj = { key: 'value' };
obj.key = 'new value';
console.log(obj.key); // 'new value'

Arrow Functions

Arrow functions make your code cleaner and less verbose. Plus, they bind this lexically, making it easier to deal with callbacks and nested functions. Example time:

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

const numbers = [1, 2, 3, 4];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9, 16]

In a setInterval context, arrow functions are gold:

function Person() {
    this.age = 0;
    setInterval(() => {
        this.age++;
        console.log(this.age);
    }, 1000);
}
const person = new Person();

No fuss with this binding here!

Template Literals

Template literals make string operations a breeze. You can embed expressions right in your strings using ${expression}:

const name = 'Alice';
const greeting = `Hello, ${name}`;
console.log(greeting); // 'Hello, Alice!'

Destructuring

Destructuring lets you unpack values from arrays or properties from objects into distinct variables. Here’s how:

const college = { name: 'DTU', est: 1941, isPvt: false };
let { name, est, isPvt } = college;
console.log(name, est, isPvt); // 'DTU', 1941, false

const arr = ['lionel', 'messi', 'barcelona'];
let [firstName, lastName, club] = arr;
console.log(firstName, lastName, club); // 'lionel', 'messi', 'barcelona'

Default Parameters

No more undefined popping up when you forget an argument. Default parameters to the rescue:

function fun(a, b = 1) {
    return a + b;
}
console.log(fun(5, 2)); // 7
console.log(fun(3)); // 4

Classes

Say hello to a more object-oriented approach with ES6 classes. Defining blueprints for objects is now more intuitive:

class Vehicle {
    constructor(name, engine) {
        this.name = name;
        this.engine = engine;
    }
}
const bike1 = new Vehicle('Ninja ZX-10R', '998cc');
const bike2 = new Vehicle('Duke', '390cc');

Modules

ES6 makes modularizing code a walk in the park. Split your code and manage dependencies effortlessly:

// myModule.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './myModule.js';
console.log(add(2, 3)); // 5

Rest and Spread Operators

These operators are magic wands for handling arrays and objects.

The rest operator (...) bundles multiple values into an array:

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6

The spread operator (...) is cool for expanding arrays or objects:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

Promises

Don’t let asynchronous operations be a nightmare. Promises make them smooth and readable:

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Operation completed");
        }, 2000);
    });
}
asyncOperation().then(result => console.log(result)); // 'Operation completed'

Map and Set Objects

ES6 introduces Map and Set for more efficient data handling. Map handles key-value pairs, and Set is all about unique values:

const myMap = new Map();
myMap.set("key", "value");
console.log(myMap.get("key")); // 'value'

const mySet = new Set([1, 2, 3, 3, 4]);
console.log(mySet.size); // 4

For/Of Loop

Iterate over anything iterable in a neat and readable way:

const arr = [1, 2, 3, 4];
for (let value of arr) {
    console.log(value); // 1, 2, 3, 4
}

String Methods

New string methods like includes(), startsWith(), and endsWith() make life easier:

const str = "Hello, World!";
console.log(str.includes("World")); // true
console.log(str.startsWith("Hello")); // true
console.log(str.endsWith("!")); // true

Array Methods

New array methods like find(), findIndex(), and entries() enhance array handling:

const arr = [1, 2, 3, 4];
const found = arr.find(value => value > 2);
console.log(found); // 3

const index = arr.findIndex(value => value > 2);
console.log(index); // 2

for (let [index, value] of arr.entries()) {
    console.log(`${index}: ${value}`); // '0: 1', '1: 2', '2: 3', '3: 4'
}

ES6 is packed with features that have seriously upped JavaScript’s game. Master these, and you’ll write code that’s more effective, easier to maintain, and just better overall. As JavaScript keeps evolving, these tools will be your best pals in modern web development.