Web Development · Beginner level

Beginner level · Module 4: Modern JavaScript and Fetching Data · Lesson 1 of 3

Modern JavaScript Syntax and Modules

Write shorter, clearer code with arrow functions, destructuring and template literals, and split code into modules.

In this lesson you will

  • Use arrow functions, destructuring and template literals
  • Organise code with ES modules

Key concepts

arrow functionsdestructuringtemplate literalsimport and export

The lesson

Arrow functions are a short form for functions: const byDate = (a, b) => a.date.localeCompare(b.date);. Destructuring unpacks values: const { title, date } = event;. Template literals build text: `${title} — ${date}`.

ES modules split code into files that export and import functions. Load the main file with a script element whose type is module; modules are deferred automatically and keep their variables private.

Browsers load modules over HTTP, so use a local development server (for example the VS Code Live Server extension or npx serve) instead of opening files directly.

Step by step

  1. Rewrite two functions as arrow functions.
  2. Use destructuring in a render function.
  3. Move the data functions into a module and import them.
  4. Serve the site from a local development server.

Practice activity

Refactor the site's JavaScript into a data module and a UI module using modern syntax.

Expected result: The site behaves as before, with code split into modules and served locally.

Check your understanding

  1. Why must modules be served over HTTP?

    Show answer

    Browsers block module loading from file:// URLs.

  2. What does const { title } = event; do?

    Show answer

    Creates a variable title holding event.title.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.