JavaScript ES6+ Modern Features

Master modern JavaScript power tools: enhanced object literals, clash-proof Symbols, infinite-precision BigInt, and pausable Generator functions.

1. Enhanced Object Literals & Dynamic Keys

Modern JavaScript cuts out repetitive boilerplate code when creating objects with variable names or dynamic labels:

💡 Think of Smart Form Auto-Fill

Instead of writing { username: username, role: role }, modern JS automatically uses your variable's name as the label when you write { username, role }!

const username = "Anshuman";
const role = "Developer";
const dynamicKey = "is_verified";

const user = {
    username, // Shorthand for username: username
    role,     // Shorthand for role: role
    [dynamicKey]: true, // Computed property name from variable
    greet() { // Method shorthand (no need to write greet: function())
        return `Hi, I am ${this.username}!`;
    }
};

console.log(user.username);     // "Anshuman"
console.log(user.is_verified);  // true
console.log(user.greet());       // "Hi, I am Anshuman!"

Output

Anshuman
true
Hi, I am Anshuman!

2. Symbols: Guaranteed Unique Identifiers

A Symbol is a primitive data type used to create property keys that are 100% unique. Even if two Symbols share the exact same description label, they are completely separate and will never clash:

💡 Think of a Secret VIP Security Badge

Even if two badges have the same name tag written on them, their internal security chips are completely unique. Symbol keys are also hidden from regular for...in loops and Object.keys(), keeping them safe from accidental overwrites.

const id1 = Symbol("userId");
const id2 = Symbol("userId");

console.log(id1 === id2); // false (Every Symbol is guaranteed unique!)

const account = {
    name: "Alex",
    [id1]: "SECRET_AUTH_TOKEN_99"
};

// Symbol properties stay hidden from standard object key listings:
console.log(Object.keys(account)); // ["name"]
console.log(account[id1]);         // "SECRET_AUTH_TOKEN_99"

Output

false
[ 'name' ]
SECRET_AUTH_TOKEN_99

3. BigInt: Working with Gigantic Numbers

Standard JavaScript numbers lose math precision when exceeding 9,007,199,254,740,991 (Number.MAX_SAFE_INTEGER). BigInt lets you safely calculate numbers of any size without losing accuracy by adding an n at the end:

Standard Number Limit ⚠️

Adding to numbers beyond MAX_SAFE_INTEGER gives inaccurate results.

const max = Number.MAX_SAFE_INTEGER;
console.log(max + 1 === max + 2); // true 😱 (Precision lost!)

BigInt Infinite Accuracy ✅

Appending n allows exact calculations on massive integers.

const bigA = 9007199254740991n;
const bigB = 9007199254740992n;
console.log(bigA + 1n === bigB); // true ✅ (Exact precision!)

⚠️ Important Rule: You cannot mix regular numbers and BigInt directly in math (like 5n + 2). Convert one first: 5n + BigInt(2).

4. Generator Functions (`function*` & `yield`)

A generator is a special function that can pause its execution in the middle and resume later, producing values one by one on demand:

💡 Think of a Ticket Dispenser at a Bakery

The machine doesn't print all 1,000 tickets at once. When a customer presses the button (.next()), it dispenses exactly one ticket (yield) and pauses until the next customer requests one!

function* ticketDispenser() {
    yield "Ticket #1";
    yield "Ticket #2";
    yield "Ticket #3";
}

const dispenser = ticketDispenser();

console.log(dispenser.next()); // { value: "Ticket #1", done: false }
console.log(dispenser.next()); // { value: "Ticket #2", done: false }
console.log(dispenser.next()); // { value: "Ticket #3", done: false }
console.log(dispenser.next()); // { value: undefined, done: true } (Finished!)

Output

{ value: 'Ticket #1', done: false }
{ value: 'Ticket #2', done: false }
{ value: 'Ticket #3', done: false }
{ value: undefined, done: true }

5. Quick Modern Features Summary

Feature	Syntax Example	Best Used For
Property Shorthand	`{ name, age }`	Clean object creation without repeating variable names
Computed Properties	`{ [keyName]: val }`	Creating dynamic object keys from variables
Symbol	`Symbol("label")`	Guaranteed unique, clash-proof object keys and metadata
BigInt	`1234567890123456789n`	High-precision math beyond `Number.MAX_SAFE_INTEGER`
Generators	`function* gen() { yield x; }`	Step-by-step iterators and lazy on-demand data streams

6. ES6+ Interview Deck

Test your knowledge on Symbol uniqueness, generator step execution, BigInt coercion rules, and dynamic object keys:

⭐ Easy • Symbol Uniqueness Symbols

const a = Symbol("id");
const b = Symbol("id");

console.log(a === b);

What will be logged to the console?

A) true

B) false

C) undefined

D) TypeError

⭐ Easy • Generator next() Execution Generators

function* numbers() {
    yield 10;
    yield 20;
}

const gen = numbers();
console.log(gen.next().value);

What is the output of gen.next().value?

A) 10

B) 20

C) [10, 20]

D) undefined

⚡ Medium • BigInt Mixing Trap BigInt & Types

const a = 5n;
const b = 2;

console.log(a + b);

What happens when attempting to add BigInt and Number?

A) Throws TypeError: Cannot mix BigInt and other types

B) Returns 7n

C) Returns 7

D) Returns "52"

⭐ Easy • Computed Property Names Object Enhancements

const key = "is_admin";
const obj = { [key]: true };

console.log(obj.is_admin);

What will be logged to the console?

A) true

B) undefined

C) false

D) ReferenceError

⚡ Medium • Generator Completion Status Generators

function* single() {
    yield 1;
}

const g = single();
g.next();

console.log(g.next().done);

What will be the output of g.next().done?

A) true

B) false

C) 1

D) undefined

7. Practice Challenge

🎯 Coding Challenge: Generators & BigInt

1. Create a generator function tokenGenerator() that yields 3 token strings in sequence.
2. Retrieve the first two tokens using .next() and print their values.
3. Perform a BigInt multiplication on two large BigInt numbers and log the result.

Your output will appear here.