Skip to main content

ES6+ Modern JavaScript

Template Literals​

const name = "Reet";
const age = 25;

// Old way
const msg = "Hi, my name is " + name + " and I am " + age;

// Template literal (backticks)
const msg2 = `Hi, my name is ${name} and I am ${age}`;

// Multi-line
const html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;

// Expression inside
const result = `${2 + 2} is four`;       // "4 is four"
const upper = `${name.toUpperCase()} is cool`;

// Tagged templates
function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] ? `<mark>${values[i]}</mark>` : ""), "");
}
const result2 = highlight`Hello ${name}, you are ${age}`;

Destructuring (ES6)​

// Array destructuring
const [a, b, ...rest] = [1, 2, 3, 4, 5];
// a=1, b=2, rest=[3,4,5]

// Object destructuring
const { x, y, ...others } = { x: 1, y: 2, z: 3, w: 4 };
// x=1, y=2, others={z:3, w:4}

// Rename + default
const { name: userName = "Guest" } = {};
// userName = "Guest"

// In function parameters
const greet = ({ name, role = "user" }) => `${name} is ${role}`;

Spread and Rest (ES6)​

// Spread array
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];   // [1,2,3,4,5]
Math.max(...arr1);               // 3

// Spread object (later property wins)
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2, a: 99 }; // { a:99, b:2 }

// Rest parameters
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

Symbol (ES6)​

const s1 = Symbol("description");
const s2 = Symbol("description");
s1 === s2; // false (always unique)

// Common use: unique object keys
const ID = Symbol("id");
const user = { [ID]: 42, name: "Reet" };
user[ID]; // 42
Object.keys(user); // ["name"] (symbols are NOT enumerable!)

Map and Set (ES6)​

// Map: key-value store with ANY key type
const map = new Map();
map.set("name", "Reet");
map.set(42, "the answer");
map.get("name");    // "Reet"
map.has(42);        // true
map.delete(42);
map.size;           // 2
for (const [key, val] of map) { console.log(key, val); }

// Set: unique values only
const set = new Set([1, 2, 2, 3, 3]);
// Set {1, 2, 3} — duplicates removed
set.add(4);
set.has(2);         // true
set.size;           // 3
[...set];           // [1, 2, 3]

// Remove duplicates from array (one-liner)
const unique = [...new Set([1,2,2,3,3,4])];
// [1, 2, 3, 4]

WeakMap and WeakSet​

// Keys must be objects; allows garbage collection
const wm = new WeakMap();
const key = {};
wm.set(key, "value");
wm.get(key); // "value"
// When key has no other references, entry is GC'd
// No .size, not iterable

// Use case: private data, caching DOM-associated data

Optional Chaining (?.) and Nullish Coalescing (??)​

// ?. safely access nested properties
const user = null;
user?.name;              // undefined (no TypeError)
user?.address?.city;     // undefined
user?.greet();           // undefined
user?.friends?.[0];      // undefined

// ?? return right side if left is null/undefined
const count = null ?? 0;       // 0
const name = undefined ?? "Guest"; // "Guest"
const zero = 0 ?? 100;         // 0 (0 is NOT null/undefined)

// ??= logical nullish assignment
let x = null;
x ??= "default"; // x is now "default"
let y = 0;
y ??= 99; // y is still 0

Logical Assignment Operators (ES2021)​

x ||= "value";  // x = x || "value" (assign if x is falsy)
x &&= "value";  // x = x && "value" (assign if x is truthy)
x ??= "value";  // x = x ?? "value" (assign if x is null/undefined)

for...of with entries()​

const arr = ["a", "b", "c"];

for (const [index, value] of arr.entries()) {
  console.log(index, value);
  // 0 "a"
  // 1 "b"
  // 2 "c"
}

Numeric Separators and at()​

// Numeric separators (ES2021) — readability
const million = 1_000_000;
const hex = 0xFF_FF_FF;

// at() method (ES2022)
[1, 2, 3].at(-1);   // 3
"hello".at(-1);     // "o"

MCQ — ES6+​

Q1: What is the output of [...new Set([1,1,2,2,3])]?

A) [1,1,2,2,3] B) [1,2,3] ✅ C) Set{1,2,3} D) 3

Answer: B — Set removes duplicates, spread converts back to array.

Q2: What is the difference between Map and a plain object {}?

A) No difference B) Map keys can be any type; object keys are strings/symbols ✅ C) Objects are faster than Maps D) Maps can't be iterated

Answer: B — Map also maintains insertion order and has .size.

Q3: What does const { a = 10 } = {} result in?

A) a = undefined B) Error C) a = 10 ✅ D) a = null

Answer: C — Default value activates when property is undefined.

Q4: What is 0 ?? "default"?

A) "default" B) 0 ✅ C) null D) false

Answer: B — ?? only triggers on null/undefined, not 0 or false.

Q5: Can a Set contain duplicate values?

A) Yes B) No ✅

Answer: B

Q6: Are Symbol keys visible in Object.keys()?

A) Yes B) No ✅

Answer: B — Use Object.getOwnPropertySymbols() to get symbol keys.

Q7: What does the ... spread operator do with objects?

A) Deep clones the object B) Creates a shallow copy of own enumerable properties ✅ C) Creates a prototype chain copy D) Converts object to array

Answer: B