Course Overview

Master JavaScript as it is actually written today, from the language fundamentals through to modules, classes, functional style and asynchronous code. This course goes past syntax into how the language behaves: the type system and its coercions, the prototype chain beneath class syntax, and the event loop that decides when your code runs.

You will work with modern browser APIs, structure real codebases with ES Modules, and test your work with current tooling. It is the foundation the framework courses build on, whether your team is heading for React, Angular, Vue or Svelte.

Who should attend

Developers coming to JavaScript from another language who need real fluency rather than a syntax tour, and working JavaScript developers whose knowledge grew by accretion and who want the gaps filled in properly. It is also the right preparation for anyone about to start with a front-end framework, since almost every framework difficulty turns out to be a language difficulty underneath.

What you'll learn

• Understand the type system, coercion rules and the equality pitfalls that follow from them
• Structure real codebases with ES Modules, dynamic imports and modern tooling
• Write object-oriented JavaScript and understand the prototype chain beneath class syntax
• Apply functional techniques: closures, higher-order functions, immutability and composition
• Manage asynchronous work with promises, async/await and the event loop that schedules them
• Test JavaScript with current tooling, including asynchronous code, mocking and time
• Work with the DOM, events and the fetch API directly, without a framework

Course Prerequisites

It is expected that delegates will be familiar with basic programming principles in languages such as Java, C#, Python or similar as well as show experience in HTML/CSS.

Outline

JavaScript is the language most developers learn by absorption, picking it up a fragment at a time while trying to finish something else. It works, until the day coercion, this, or the event loop produces a result nobody can explain. This course exists to close those gaps deliberately.

We teach the language as a language: how values are typed and converted, what a closure really holds onto, what class compiles down to, and why asynchronous code runs when it does. That grounding is what makes the framework courses (React, Angular) land properly, and it is what lets you read someone else's code with confidence.

Core JavaScript/ECMAScript

Introduction

• Introduce JavaScript and its standard, ECMAScript
• Appreciate why the language was designed in ten days and what that still costs us
• Understand the TC39 process and the yearly release cadence
• Judge the maturity of a proposal by its stage, and know when a feature is safe to use
• Explore the evolution of the language from ES5 through ES2015 to the current edition
• Discuss runtime support across browsers, Node.js and the edge
• Explain language basics: literals, identifiers, operators and reserved words
• Introduce the JavaScript type system and its dynamic nature
• Distinguish primitive types from objects

Project Setup and Tooling

• Introduce Node.js as the runtime behind front-end tooling
• Set up a new project and understand package.json
• Manage dependencies with npm and yarn, and appreciate the lockfile
• Discuss public and private package registries
• Understand semantic versioning and what a version range really permits
• Use Vite as the development server and build tool
• Appreciate why esbuild and similar native tooling displaced the previous generation
• Configure ESLint with flat config
• Apply consistent formatting with Prettier
• Discuss when transpilation is still required, and when it is merely inherited

Core Syntax

• Understand equality (== versus ===) and the coercion table beneath it
• Explain falsy and truthy values
• Appreciate strict mode
• Declare variables with let and const, and contrast the legacy var
• Discuss the benefits of immutable values
• Explore global objects across environments
• Understand type coercion and its pitfalls
• Define and use named functions
• Introduce modern string literals with template strings
• Use different types of expressions, arithmetic and logical
• Apply control structures such as if, for and while
• Discuss the advantages of expressions over statements
• Understand and use exceptions for error handling
• Use try/catch/finally, and attach context with Error.cause
• Apply logical assignment operators (??=, ||=, &&=)

Modules and Code Organisation

• Understand modules and the problem they solve
• Explore ES Modules (import/export) as the standard module system
• Compare modules with older patterns such as the IIFE
• Learn the import and export forms: default, named and re-exports
• Use dynamic imports for code splitting and lazy loading
• Appreciate top-level await and how it changes module initialisation
• Organise large codebases with barrel files, and discuss what they cost
• Distinguish ES Modules from CommonJS in Node.js

Objects, Classes and Object-oriented JavaScript

Objects introduction

• Create objects as object literals
• Define object properties and methods
• Use getters and setters as accessors
• Apply shorthand property names for conciseness
• Use destructuring assignments for objects
• Leverage destructuring with immutable objects
• Define and use constructors to initialise objects
• Discuss the limitations of constructors compared to class syntax

Core Objects and Utilities

• Declare and manipulate arrays
• Use mutating array methods (pop, push, shift, splice)
• Prefer the change-by-copy methods (toSorted, toReversed, toSpliced, with)
• Work with iterables using for...of and spread syntax
• Work with core object types: Date and String
• Understand and use Map and Set for efficient data storage
• Apply the Set operations (union, intersection, difference)
• Explore WeakMap and WeakSet for memory-managed keys
• Work with the Math object
• Introduce the JSON object for parsing and serialising
• Copy structured data safely with structuredClone

Dealing with Null and Undefined

• Understand the difference between null and undefined
• Recognise the problems caused by nullish values
• Protect against nullish values using safe patterns
• Use logical operators (&&, ||) for fallback logic
• Apply optional chaining (?.) to reach nested properties safely
• Use the nullish coalescing operator (??) for default values
• Combine optional chaining and nullish coalescing for safer expressions
• Explore default destructuring to provide fallbacks

Classes

• Explain prototypal inheritance and the prototype chain
• Define and use ES classes, and appreciate what they compile down to
• Add methods to classes
• Define and use constructors to initialise objects
• Override methods and constructors
• Define fields, including private fields and private methods
• Add static members, including static initialisation blocks
• Implement class inheritance with the extends keyword
• Distinguish class syntax from the prototype manipulation it replaced
• Discuss when a class is the wrong tool

Functions

More on Functions

• Use default parameters to assign fallback values
• Apply rest and variadic parameters
• Use destructured parameters to improve readability
• Combine default values with destructured parameters
• Explore the arguments object and its limitations
• Understand function scope and the role of this
• Distinguish hoisting of declarations from expressions

Functional JavaScript

• Understand the principles of functional programming
• Explore functional programming as practised in JavaScript
• Deal with state and avoid mutability
• Use functions as values
• Write and use higher-order functions
• Understand closures and what they capture
• Define lambda expressions for inline behaviour
• Use arrow functions and distinguish their this binding
• Discuss the importance of pure functions and avoiding side effects
• Implement currying and partial application
• Compose functions, and discuss why JavaScript still has no pipeline syntax
• Use recursion to express iterative problems
• Introduce popular functional libraries

Functional Style Arrays and Iterables

• Recap arrays and their role as iterables
• Use array higher-order functions for clean operations
• Transform arrays using map
• Filter arrays to extract elements by condition
• Apply predicate logic with some and every
• Find elements using find, findIndex and findLast
• Combine map, filter and reduce
• Group data with Object.groupBy and Map.groupBy
• Work with iterator helpers to process sequences lazily
• Understand the iterable protocol and write your own iterable

Asynchronous Programming

• Appreciate why a single-threaded language needs an asynchronous model
• Understand the event loop, the call stack and the task queues
• Distinguish macrotasks from microtasks, and predict the ordering
• Use Promise for handling asynchronous work
• Define and manage promises
• Handle promise errors with catch and finally
• Combine promises with Promise.all, allSettled, any and race
• Use Promise.withResolvers for externally settled promises
• Use async/await for readable asynchronous code
• Handle errors in async functions with try/catch
• Cancel in-flight work with AbortController
• Write asynchronous iterators and consume them with for await

Testing

• Introduce the importance of testing in software development
• Discuss testing techniques: unit, integration and end-to-end
• Introduce and use Vitest
• Appreciate Node's built-in node:test runner as an alternative
• Write suites and specs for structured test cases
• Test asynchronous code effectively
• Use mocking and stubbing with spies
• Mock time for testing time-sensitive code
• Discuss coverage and what it does not tell you

JavaScript in the Browser

Introduction

• Add JavaScript to pages: unobtrusive, inline and external scripts
• Explore script loading with the async and defer attributes
• Understand how parsing and execution interleave with rendering

JavaScript Modules in the Browser

• Introduce ES Modules in the browser with <script type="module">
• Compare module scripts with classic scripts
• Understand the benefits of deferred execution with modules
• Use dynamic imports for lazy loading
• Discuss module caching and the role of the browser cache
• Use Vite to bundle and optimise for production
• Appreciate import maps for dependency resolution without a bundler

DOM Manipulation and Events

• Introduce the Window and Document objects
• Understand the structure of the DOM
• Navigate the DOM with modern query APIs
• Add and remove elements
• Change element properties, attributes and datasets
• Work with events and write event handlers
• Understand event bubbling and capturing
• Cancel default behaviour
• Use the fetch API to interact with servers
• Handle failure and cancellation with AbortController
• Use the history API for client-side navigation
• Store data with localStorage and appreciate its limits

Frequently asked questions