JavaScript ES6+

Introduction to Modern JavaScript ES6+

What is ES6+

ES6+ refers to ECMAScript 2015 (ES6) and all subsequent JavaScript versions, introducing major enhancements to the language.

Need for Modern JavaScript

Cleaner, more concise syntax
Better code organization
Enhanced performance
Improved developer experience

ES6 vs ES5

ES6 introduces arrow functions, classes, modules, template literals, destructuring, and many other features not available in ES5.

let, const, and Block Scoping

Modern Variable Declaration

// Old way with var (function scope)
var oldVariable = "I'm hoisted";

// New way with let (block scope)
let counter = 0;
counter = 1; // Can be reassigned

// const for constants (block scope)
const PI = 3.14159;
// PI = 3.14; // Error: Assignment to constant variable

// Block scope example
{
    let blockScoped = "I exist only in this block";
    const blockConst = "Me too!";
}
// console.log(blockScoped); // ReferenceError

Arrow Functions

Concise Syntax

Arrow functions provide a shorter syntax compared to function expressions.

Implicit Return

When the function body is a single expression, you can omit the return keyword.

Lexical “this”

Arrow functions don’t have their own “this” context; they inherit it from the parent scope.

Arrow Functions vs Regular Functions

// Regular function
const addRegular = function(a, b) {
    return a + b;
};

// Arrow function (same functionality)
const addArrow = (a, b) => {
    return a + b;
};

// Arrow function with implicit return
const addImplicit = (a, b) => a + b;

// Single parameter (no parentheses needed)
const square = x => x * x;

// No parameters
const greet = () => "Hello, World!";

Template Literals

Template Literal Demo

See how template literals make string concatenation cleaner:

Click a button to see the code example

Destructuring Assignment

Array and Object Destructuring

// Array Destructuring
const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor] = colors;
// firstColor = 'red', secondColor = 'green'

// Skipping elements
const [primary, , tertiary] = colors;

// Object Destructuring
const user = {
    name: 'John',
    age: 30,
    city: 'New York'
};

const { name, age } = user;
// name = 'John', age = 30

// Renaming variables
const { name: userName, city: userCity } = user;

// Default values
const { country = 'USA' } = user;

Spread & Rest Operators

Spread Operator

Expands an iterable (array, string) into individual elements.

const newArray = [...oldArray, newItem];

Rest Operator

Collects multiple elements into an array, useful in function parameters.

function sum(...numbers) { /* logic */ }

Enhanced Object Literals

Modern Object Syntax

// Shorthand property names
const name = 'Alice';
const age = 30;
const user = { name, age }; // Instead of {name: name, age: age}

// Method definitions shorthand
const calculator = {
    add(a, b) {
        return a + b;
    },
    multiply(a, b) {
        return a * b;
    }
};

// Computed property names
const propName = 'status';
const obj = {
    [propName]: 'active',
    ['data-' + propName]: 'loaded'
};

Modules (import/export)

Named Exports

// math.js
export const PI = 3.14;
export function square(x) {
  return x * x;
}

Default Exports

// Calculator.js
export default class Calculator {
  // class implementation
}

Import Syntax

import { PI, square } from './math.js';
import Calculator from './Calculator.js';
import * as MathUtils from './math.js';

Promises & Async Programming

Promises

Objects representing the eventual completion or failure of an asynchronous operation.

fetch(url).then().catch().finally()

Async/Await

Syntactic sugar for working with promises, making asynchronous code look synchronous.

async function getData() {
  const data = await fetch(url);
}

Error Handling

Use try/catch blocks with async/await for cleaner error handling.

try {
  await asyncFunc();
} catch (error) {
  handleError(error);
}

Classes & OOP with ES6

Modern JavaScript Classes

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    // Instance method
    greet() {
        return `Hello, my name is ${this.name}`;
    }
    
    // Static method
    static speciesInfo() {
        return 'Homo sapiens';
    }
}

class Developer extends Person {
    constructor(name, age, language) {
        super(name, age);
        this.language = language;
    }
    
    code() {
        return `${this.name} is coding in ${this.language}`;
    }
}

const dev = new Developer('Alice', 28, 'JavaScript');
console.log(dev.greet()); // Hello, my name is Alice
console.log(dev.code()); // Alice is coding in JavaScript

Iterators & Generators

Generator Functions

// Generator function
function* numberGenerator() {
    let num = 1;
    while (true) {
        yield num++;
    }
}

const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

// Custom iterator
const myIterable = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
};

for (const value of myIterable) {
    console.log(value); // 1, 2, 3
}

JavaScript ES6+ Module