JavaScript · ES2015

ES6 Interactive Hub

The biggest milestone of modern JavaScript: let/const, arrow functions, classes, destructuring, spread/rest, template literals, ES modules, promises — the foundation of every codebase today.

Experience
0 XP
Course completion0%

Let & Const

Core topic

Easy5 min

💡 Concept summary

A replacement for var in variable declarations, solving the problems of Scope and Re-declaration.

🤔 Why do you need this feature?

In ES5, "var" has function scope or global scope, which leaks variables out of the block or causes unpredictable hoisting bugs. "let" and "const" bring Block Scope (only valid within the curly braces that contain them).

ES5 (old style)Not recommended
// Declaring with var
var x = 10;
if (true) {
    var x = 20; // Re-declares and overwrites the value outside the block!
    console.log("Inside block:", x); // 20
}
console.log("Outside block:", x); // 20 (affected!)
ES6 (Modern)Optimal & recommended
// Declaring with let & const
let y = 10;
const PI = 3.14159;

if (true) {
    let y = 20; // This y is isolated within the current block
    console.log("Inside let block:", y); // 20
    // PI = 3.14; // Uncaught TypeError: Assignment to constant variable.
}
console.log("Outside let block:", y); // 10 (not overwritten!)
Got it down? Try running real code or take the quiz!

ES6 Quick Reference

Quick syntax overview + copy snippets

Let & Const

A replacement for var in variable declarations, solving the problems of Scope and Re-declaration.

let y = 10;
const PI = 3.14159;
if (true) {
...
Arrow Functions

An ultra-concise syntax for writing functions using "=>" that automatically binds the "this" context.

const numbers = [1, 2, 3];
const doubles = numbers.map(n => n * 2); // Automatic return
console.log(doubles); // [2, 4, 6]
...
Template Literals

Create dynamic strings using backticks (`), letting you embed variables with ${} syntax and add natural line breaks without concatenation.

const name = "An";
const job = "Developer";
const greet = `Hi ${name}, I am a ${job}.
...
Destructuring

Quickly extract properties from an Object or elements from an Array into individual variables using a uniquely concise syntax.

const user = { name: "Bao", age: 25, city: "Da Nang" };
const { name, age, city } = user;
console.log(name, age, city);
...
Spread & Rest

The magical three-dot "..." operator helps copy/merge arrays and objects (Spread) or gather a list of parameters (Rest).

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
...
Classes

Provides a clean object-oriented (OOP) syntax, replacing the cumbersome Prototype function setup of ES5.

class Car {
    constructor(brand) {
        this.brand = brand;
...
Promises

A mechanism for handling asynchronous tasks that avoids falling into the dreaded "Callback Hell" of ES5.

getData()
    .then(user => getPosts(user.id))
    .then(posts => getComments(posts[0].id))
...
ES Modules

JavaScript's official Native Modules system uses "export" and "import" to split source code into smaller files.

export const KEY = "SECRET123";
export function add(a, b) {
    return a + b;
...