📘 Lesson · Lesson 39

ES6 Features

What ES6 Is

ES6 (also called ES2015) was a huge 2015 update to JavaScript that introduced most of the features that define "modern JavaScript." Before it, the language felt clunky — var everywhere, string concatenation with +, no clean way to write short functions. ES6 fixed all of that. When developers say "modern JS," they largely mean ES6 and later. The good news: you've been learning ES6 all along in this course. This chapter gathers the features together and fills in the few remaining ones.

Features You Already Know

// 1. let and const (block-scoped, no more var)
const name = "Aman";
let count = 0;

// 2. Arrow functions
const double = n => n * 2;

// 3. Template literals
console.log(`Hello, ${name}! You are ${20} years old.`);

// 4. Default parameters
function greet(name = "Guest") { }

// 5. Object shorthand
const student = { name, count };     // instead of { name: name, count: count }

// 6. for...of loops
for (const item of items) { }

Six of the most important ES6 features are already familiar to you. let and const replaced var and gave us block scope. Arrow functions gave us compact syntax and lexical this. Template literals with backticks replaced messy string concatenation. Default parameters removed the need for manual undefined checks. Object shorthand shortened repetitive property definitions. And for...of made array looping clean. If a piece of code uses these, you're reading modern JavaScript.

Spread and Rest — the three dots

// SPREAD — unpacks a collection into individual items
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];              // [1,2,3,4]
const copy = [...a];                      // a real copy of the array
const objCopy = { ...student };           // copy an object
Math.max(...[5, 2, 9]);                   // 9 — spreads into arguments

// REST — collects individual items into an array
function sumAll(...numbers) {             // numbers is an array
    return numbers.reduce((s, n) => s + n, 0);
}
sumAll(1, 2, 3);                          // 6

The same three dots ... do opposite jobs depending on where they appear. As spread, they UNPACK an array or object into separate pieces — merging arrays, copying objects (the fix for the reference-vs-copy trap), or feeding a list into a function that expects individual arguments. As rest (in a function's parameter list), they COLLECT loose arguments into a single array. A simple way to remember: spread spreads things out, rest gathers the rest up. Both are everywhere in modern code.

Modules — import and export

// ── math.js ──
export function add(a, b) { return a + b; }
export const PI = 3.14159;
export default function multiply(a, b) { return a * b; }

// ── main.js ──
import multiply, { add, PI } from "./math.js";

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

<!-- The HTML must declare the script as a module: -->
<script type="module" src="main.js"></script>

ES6 modules let you split code across multiple files and share functions between them — essential once a project grows beyond one file. export makes something available to other files; import brings it in. There are two kinds: named exports (imported inside curly braces, and the names must match) and one default export per file (imported without braces, and you may rename it). Remember the HTML needs type="module" on the script tag, and modules only work over http (not file://).

Classes — a cleaner way to build objects

class Student {
    constructor(name, marks) {      // runs when you create a new one
        this.name = name;
        this.marks = marks;
    }

    isPassed() {                    // a method
        return this.marks >= 33;
    }
}

const aman = new Student("Aman", 85);
console.log(aman.name);         // "Aman"
console.log(aman.isPassed());   // true

A class is a blueprint for creating many similar objects. Instead of writing out each student object by hand, you define the shape once and stamp out copies with new. The constructor runs automatically when an object is created, receiving the values and assigning them to this. Methods defined in the class are shared by every instance. Classes are heavily used in larger applications and frameworks — for now, just recognise the syntax; you already understand the underlying idea from objects and this.

Exam Corner

Q: Name four ES6 features. let/const, arrow functions, template literals, spread/rest (also destructuring, modules, classes, default parameters).

Q: What's the difference between spread and rest? Spread unpacks a collection into items; rest collects items into an array.

Q: How do you copy an array with spread? const copy = [...original]

Q: What's the difference between a named and a default export? Named exports are imported in braces with matching names; a default export is imported without braces and can be renamed.

Q: What does a class constructor do? Runs automatically when a new object is created, setting up its properties.

ES6 क्या है

ES6 (जिसे ES2015 भी कहते हैं) JavaScript का 2015 का विशाल update था जिसने "modern JavaScript" को परिभाषित करने वाली ज़्यादातर features दीं. इससे पहले, language भद्दी लगती थी — हर जगह var, + से string concatenation, छोटे functions लिखने का कोई साफ तरीका नहीं. ES6 ने वह सब ठीक किया. जब developers "modern JS" कहते हैं, वे बड़े पैमाने पर ES6 और उसके बाद का मतलब रखते हैं. अच्छी खबर: आप इस course में पूरे समय ES6 सीख रहे थे. यह chapter features को एक साथ इकट्ठा करता है और बची कुछ भरता है.

जो Features आप पहले से जानते हैं

// 1. let aur const (block-scoped, ab var nahi)
const name = "Aman";
let count = 0;

// 2. Arrow functions
const double = n => n * 2;

// 3. Template literals
console.log(`Hello, ${name}! You are ${20} years old.`);

// 4. Default parameters
function greet(name = "Guest") { }

// 5. Object shorthand
const student = { name, count };     // { name: name, count: count } ke bajaye

// 6. for...of loops
for (const item of items) { }

सबसे ज़रूरी ES6 features में से छह आपको पहले से परिचित हैं. let और const ने var की जगह ली और block scope दिया. Arrow functions ने संक्षिप्त syntax और lexical this दिया. Backticks वाले template literals ने गंदी string concatenation की जगह ली. Default parameters ने manual undefined जांच की ज़रूरत हटाई. Object shorthand ने दोहराने वाली property definitions छोटी कीं. और for...of ने array looping साफ बनाया. अगर कोई code इनका इस्तेमाल करे, आप modern JavaScript पढ़ रहे हैं.

Spread और Rest — तीन dots

// SPREAD — sangrah ko alag items me kholta hai
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];              // [1,2,3,4]
const copy = [...a];                      // array ki asli copy
const objCopy = { ...student };           // object copy
Math.max(...[5, 2, 9]);                   // 9 — arguments me phailata

// REST — alag items ko array me ikattha karta
function sumAll(...numbers) {             // numbers ek array hai
    return numbers.reduce((s, n) => s + n, 0);
}
sumAll(1, 2, 3);                          // 6

वही तीन dots ... उल्टे काम करते हैं इस पर निर्भर कि वे कहां दिखें. Spread के रूप में, वे array या object को अलग टुकड़ों में KHOLTE हैं — arrays merge करना, objects copy करना (reference-vs-copy जाल का हल), या ऐसे function में list खिलाना जो अलग arguments चाहता है. Rest के रूप में (function की parameter list में), वे ढीले arguments को एक array में IKATTHA करते हैं. याद रखने का सरल तरीका: spread चीज़ें फैलाता है, rest बाकी इकट्ठा करता है. दोनों modern code में हर जगह हैं.

Modules — import और export

// ── math.js ──
export function add(a, b) { return a + b; }
export const PI = 3.14159;
export default function multiply(a, b) { return a * b; }

// ── main.js ──
import multiply, { add, PI } from "./math.js";

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

<!-- HTML me script ko module declare karna zaruri: -->
<script type="module" src="main.js"></script>

ES6 modules आपको code कई files में बांटने और उनके बीच functions साझा करने देते हैं — project एक file से बड़ा होते ही ज़रूरी. export कुछ को दूसरी files के लिए उपलब्ध करता है; import उसे लाता है. दो प्रकार हैं: named exports (curly braces के अंदर import, और नाम match होने चाहिए) और हर file में एक default export (बिना braces import, और आप rename कर सकते हैं). याद रखिए HTML के script tag पर type="module" चाहिए, और modules सिर्फ http पर चलते हैं (file:// पर नहीं).

Classes — objects बनाने का साफ तरीका

class Student {
    constructor(name, marks) {      // naya banate samay chalta hai
        this.name = name;
        this.marks = marks;
    }

    isPassed() {                    // method
        return this.marks >= 33;
    }
}

const aman = new Student("Aman", 85);
console.log(aman.name);         // "Aman"
console.log(aman.isPassed());   // true

Class कई समान objects बनाने का blueprint है. हर student object हाथ से लिखने के बजाय, आप shape एक बार define करके new से copies बनाते हैं. constructor object बनने पर अपने आप चलता है, values पाकर उन्हें this को assign करते. Class में define किए methods हर instance साझा करता है. Classes बड़े applications और frameworks में भारी इस्तेमाल होते हैं — अभी बस syntax पहचानिए; अंतर्निहित विचार आप objects और this से पहले ही समझते हैं.

Exam Corner

Q: चार ES6 features बताइए. let/const, arrow functions, template literals, spread/rest (साथ ही destructuring, modules, classes, default parameters).

Q: Spread और rest में क्या अंतर है? Spread संग्रह को items में खोलता है; rest items को array में इकट्ठा करता है.

Q: Spread से array कैसे copy करते हैं? const copy = [...original]

Q: Named और default export में क्या अंतर है? Named exports braces में मिलते नामों से import होते हैं; default export बिना braces import होता है और rename हो सकता है.

Q: Class constructor क्या करता है? नया object बनने पर अपने आप चलकर उसकी properties set करता है.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

// 1. let and const (block-scoped, no more var)
const name = "Aman";
let count = 0;

// 2. Arrow functions
const double = n => n * 2;

// 3. Template literals
console.log(`Hello, ${name}! You are ${20} years old.`);

// 4. Default parameters
function greet(name = "Guest") { }

// 5. Object shorthand
const student = { name, count };     // instead of { name: name, count: count }

// 6. for...of loops
for (const item of items) { }

// SPREAD — unpacks a collection into individual items
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];              // [1,2,3,4]
const copy = [...a];                      // a real copy of the array
const objCopy = { ...student };           // copy an object
Math.max(...[5, 2, 9]);                   // 9 — spreads into arguments

// REST — collects individual items into an array
function sumAll(...numbers) {             // numbers is an array
    return numbers.reduce((s, n) => s + n, 0);
}
sumAll(1, 2, 3);                          // 6

// ── math.js ──
export function add(a, b) { return a + b; }
export const PI = 3.14159;
export default function multiply(a, b) { return a * b; }

// ── main.js ──
import multiply, { add, PI } from "./math.js";

console.log(add(2, 3));       // 5
console.log(multiply(2, 3));  // 6

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.