JavaScript ES6 (2015)

The game-changing update that revolutionized JavaScript

🚀 ES6 - The Revolution

ES6 (ES2015) was the biggest update to JavaScript since ES5. It introduced arrow functions, classes, modules, and many other features that made JavaScript more powerful and easier to write. 


// ES6 arrow function
const greet = (name) => `Hello, ${name}!`;
console.log(greet("ES6"));

Output:

Hello, ES6!

Major ES6 Features

➡️

Arrow Functions

Shorter function syntax 

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

Let & Const

Block-scoped variables 

let name = "John";
const PI = 3.14;
🏗️

Classes

Object-oriented programming 

class Person {
  constructor(name) {
    this.name = name;
  }
}
📝

Template Literals

String interpolation 

const msg = `Hello ${name}!`;

🔹 Arrow Functions

Arrow functions provide a shorter way to write functions: 

// Old way (ES5)
var multiply = function(a, b) {
    return a * b;
};

// New way (ES6)
const multiply = (a, b) => a * b;

// Even shorter for single parameter
const square = x => x * x;

// Multiple lines need curly braces
const greetUser = name => {
    const greeting = `Hello, ${name}!`;
    return greeting.toUpperCase();
};

console.log(multiply(4, 5)); // 20
console.log(square(6)); // 36
console.log(greetUser("Alice")); // HELLO, ALICE!

Output:

20

36

HELLO, ALICE!

🔹 Let and Const

Better variable declarations with block scope: 

// var has function scope (old)
function oldWay() {
    if (true) {
        var x = 1;
    }
    console.log(x); // 1 (accessible outside block)
}

// let has block scope (new)
function newWay() {
    if (true) {
        let y = 1;
        const z = 2;
    }
    // console.log(y); // Error: y is not defined
    // console.log(z); // Error: z is not defined
}

// const cannot be reassigned
const name = "John";
// name = "Jane"; // Error: Assignment to constant variable

// But objects can be modified
const person = { name: "John" };
person.name = "Jane"; // This works
console.log(person.name);

Output:

Jane

🔹 Template Literals

Easy string interpolation and multi-line strings: 

const name = "Alice";
const age = 25;

// Old way (ES5)
var oldMessage = "Hello, my name is " + name + " and I am " + age + " years old.";

// New way (ES6) - much cleaner!
const newMessage = `Hello, my name is ${name} and I am ${age} years old.`;

// Multi-line strings
const poem = `
    Roses are red,
    Violets are blue,
    ES6 is awesome,
    And so are you!
`;

// Expression in template literals
const mathResult = `2 + 3 = ${2 + 3}`;

console.log(newMessage);
console.log(mathResult);

Output:

Hello, my name is Alice and I am 25 years old.

2 + 3 = 5

🔹 Classes

Object-oriented programming made easier: 

// ES6 Class
class Animal {
    constructor(name, species) {
        this.name = name;
        this.species = species;
    }
    
    speak() {
        return `${this.name} makes a sound`;
    }
    
    getInfo() {
        return `${this.name} is a ${this.species}`;
    }
}

// Inheritance
class Dog extends Animal {
    constructor(name, breed) {
        super(name, "dog"); // Call parent constructor
        this.breed = breed;
    }
    
    speak() {
        return `${this.name} barks!`;
    }
}

const myDog = new Dog("Buddy", "Golden Retriever");
console.log(myDog.speak());
console.log(myDog.getInfo());

Output:

Buddy barks!

Buddy is a dog

🔹 Destructuring

Extract values from arrays and objects easily:

🔸 Array Destructuring 

const colors = ["red", "green", "blue"];

// Old way
var first = colors[0];
var second = colors[1];

// New way (ES6)
const [first, second, third] = colors;
console.log(first);  // red
console.log(second); // green

🔸 Object Destructuring 

const person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Extract properties
const { name, age } = person;
console.log(name); // John
console.log(age);  // 30

// Rename while destructuring
const { name: fullName, city: location } = person;
console.log(fullName); // John
console.log(location); // New York

Output:

red

green

John

30

John

New York

🔹 Spread Operator

Spread arrays and objects easily: 

// Array spreading
const fruits = ["apple", "banana"];
const vegetables = ["carrot", "broccoli"];
const food = [...fruits, ...vegetables];
console.log(food);

// Object spreading
const person = { name: "John", age: 30 };
const employee = { ...person, job: "Developer", salary: 50000 };
console.log(employee);

// Function arguments
const numbers = [1, 2, 3, 4, 5];
const max = Math.max(...numbers);
console.log(max);

Output:

["apple", "banana", "carrot", "broccoli"]

{name: "John", age: 30, job: "Developer", salary: 50000}

5

🧠 Test Your Knowledge

Which ES6 feature allows you to write shorter function syntax?