Modern syntax: destructuring, spread, modules

const { title, price } = course;         // destructuring
const [first, ...rest] = ["a", "b", "c"]; // array destructuring + rest

const updated = { ...course, price: 19.99 }; // spread: shallow copy + override

// module.js
export const slugify = (text) => text.toLowerCase().replace(/\s+/g, "-");
// main.js
import { slugify } from "./module.js";

Destructuring and spread show up constantly in real codebases -- they replace a lot of manual property-by-property code with one line.

function describe({ title, price = 0 }) {   // destructure a parameter directly
  return `${title} -- $${price}`;
}
describe({ title: "JS Mastery" }); // "JS Mastery -- $0", default kicks in

const { title: courseTitle } = course; // rename while destructuring
const nested = { author: { name: "Ada" } };
const { author: { name } } = nested;    // destructure nested objects too

Destructuring a function parameter is one of the most common patterns in real code -- it documents which fields the function actually uses right in the signature, and default values (price = 0) mean callers can omit fields entirely instead of you checking for undefined everywhere.

Spread also works on arrays, and it's the standard way to combine or copy them without mutating the originals:

const beginnerCourses = ["HTML", "CSS"];
const masteryCourses = ["JS Mastery", "TS Mastery"];
const allCourses = [...beginnerCourses, ...masteryCourses, "SQL Mastery"];

function sum(...numbers) { // rest parameter -- collects remaining args into an array
  return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3); // 6

Modules matter for the same reason functions do -- they let you split code into files with an explicit, checkable contract instead of relying on global variables. export marks what's public; import pulls in only what's needed. A default export is for the one main thing a module provides, while named exports (as in slugify above) are for utilities a file offers several of.