Lecture 19: ES6+ Features

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-25

Lecture 19

ES6+ Features

Week 5 | Unit II: DOM Manipulation
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

---

• Use template literals for string interpolation
• Destructure arrays and objects
• Apply the spread operator effectively
• Set default function parameters
• Understand let and const scope rules

What is ES6+?

---

ES6 (ECMAScript 2015) introduced major improvements to JavaScript:

• Cleaner syntax
• Better scoping with let and const
• Powerful new features (spread, destructuring)
• Modern coding patterns

Template Literals

---

const name = "Priya";
const age = 22;
const message = `Hello, ${name}! You are ${age} years old.`;
console.log(message);

Use backticks (`) and ${} for dynamic values.

Multi-line Strings

---

const poem = `Roses are red,
Violets are blue,
JavaScript rocks,
And so do you!`;
console.log(poem);

No need for \n or concatenation.

let and const

---

// let: reassignable
let score = 50;
score = 60; // OK

// const: not reassignable
const pi = 3.14;
pi = 3.15; // Error

const user = { name: "Aman" };
user.name = "Vikram"; // OK (object mutation allowed)

Block Scope with let/const

---

if (true) {
  let x = 10;
}
console.log(x); // Error: x not defined

let and const are block-scoped, unlike var.

Default Function Parameters

---

function greet(name = "Guest") {
  return `Hello, ${name}`;
}

console.log(greet());        // Hello, Guest
console.log(greet("Neha"));  // Hello, Neha

Provide fallback values when arguments are missing.

Array Destructuring

---

const colors = ['red', 'green', 'blue'];
const [first, second, third] = colors;
console.log(first); // red

const [a, , c] = colors;
console.log(a, c); // red blue

Extract values from arrays into variables.

Object Destructuring

---

const student = { name: "Asha", age: 21, course: "CSE" };
const { name, age } = student;
console.log(name, age); // Asha 21

const { name: studentName, age: studentAge } = student;
console.log(studentName); // Asha

Extract properties from objects.

Spread Operator: Arrays

---

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 1, 2, 3, 4, 5]

Spread (...) expands array elements.

Spread Operator: Objects

---

const user = { name: "Raj", age: 25 };
const updatedUser = { ...user, age: 26 };
console.log(updatedUser); // { name: "Raj", age: 26 }

const merged = { ...user, city: "Delhi" };
console.log(merged); // { name: "Raj", age: 25, city: "Delhi" }

Copy and merge objects easily.

Rest Parameters

---

function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

Rest (...) collects arguments into an array.

Combining Arrow Functions & Destructuring

---

const users = [{ name: "Amit", age: 22 }, { name: "Sita", age: 24 }];
const names = users.map(({ name }) => name);
console.log(names); // ["Amit", "Sita"]

const greet = ({ name, age }) => `${name} is ${age} years old`;
console.log(greet(users[0])); // Amit is 22 years old

Ternary Operator Refresher

---

const age = 20;
const status = age >= 18 ? "Adult" : "Minor";
console.log(status); // Adult

Shorthand for if...else.

Short-circuit Evaluation

---

const username = user.name || "Guest";
const display = isLoggedIn && <Dashboard />;

const firstName = user?.name?.first;
const count = items?.length ?? 0;

• || returns first truthy value
• && returns second if first is truthy
• ?. optional chaining
• ?? nullish coalescing

ES6 Modules (Preview)

---

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// app.js
import { add, subtract } from './math.js';

Organize code into reusable modules.

Practice Example

---

const students = [
  { name: "Rahul", marks: 85 },
  { name: "Neha", marks: 92 }
];

const toppers = students.filter(({ marks }) => marks > 90);
const names = toppers.map(({ name }) => name);
console.log(names); // ["Neha"]

Common Mistakes

---

• Using var instead of let/const
• Forgetting backticks in template literals
• Modifying const primitive values
• Confusing spread ... with rest ...
• Not understanding block scope

Practice Task

---

Given:

const products = [
  { name: "Laptop", price: 50000 },
  { name: "Phone", price: 20000 }
];

1. Use destructuring to extract name and price
2. Use template literals to display: “Laptop costs ₹50000”
3. Use spread to add a new product

Questions?

Next: Lecture 20 - Revision: Units I & II