JavaScript Course

Learn JavaScript in the browser with this free course. Covers let and const, strings, arrays and objects; if / for, functions, map / filter / reduce, error handling and async; classes and inheritance; and browser APIs from DOM and events to fetch. No setup required.

0/55テキスト終了（0%）

JavaScript Basics

What You'll Learn in This JavaScript Course
Walks through how JavaScript runs in both the browser and Node.js, the learning order across this course's 4 categories, and how to read an error message.
let and const — Controlling Reassignment and Redeclaration
Covers choosing between const and let, the TypeError from reassigning a const and the SyntaxError from redeclaring one, and camelCase naming rules.
Numbers and Arithmetic — the Number Type and Math
Covers how both integers and decimals share the same Number type, the remainder and exponent operators, rounding with Math, aligning decimal places with toFixed, and avoiding floating-point error.
Strings and Template Literals
Covers choosing among 3 kinds of quotes, embedding values with template literals, formatting with trim and slice, split and join, and replaceAll and padStart.
Booleans and Comparison — the Difference Between == and ===
Covers the difference between === (checking both type and value) and == (converting type before comparing), comparison and logical operators, the 6 falsy values if treats as false, and setting a default with ||.
Type Conversion — Number / String / parseInt and Implicit Conversion
Covers checking type with typeof, explicit conversion with Number / String / Boolean, the implicit conversion where only + turns into string concatenation, parseInt and parseFloat, and detecting failed conversions with Number.isNaN.
Arrays — Adding, Removing, and Retrieving
Covers retrieving elements with index and length, adding and removing with push / pop / shift / unshift, checking with includes and indexOf, and choosing between slice and splice.
Objects — Reading and Writing Properties
Covers building an object that groups data as key-value pairs, choosing between dot notation and bracket notation, delete and in, and Object.keys / values / entries.
null and undefined — Reading Safely with ?. and ??
Covers the difference between null and undefined for representing "no value," reading through a nested path without stopping using ?., and applying a default with ?? that leaves 0 and an empty string untouched.
Destructuring — Pulling Values Out of Objects and Arrays
Covers destructuring, which pulls out just the values you need into variables all at once by matching an object's key names or an array's positions — through default values, renaming, and rest.
Spread Syntax — Copying, Combining, and Overriding Settings
Covers spread syntax, which lays out an array or object's contents in place, for copying and combining without changing the original, and layering just a user's changes on top of default settings.
Map and Set — Removing Duplicates and Keyed Tallies
Covers deduplicating with Set, which holds only 1 of each value, Map's set / get for key-value pairs kept in registration order, and choosing between Map and Object based on key type and ordering.
References and Copying — Array and Object Pitfalls
Covers how assigning an array or object only passes a reference, how === compares references, spread syntax's shallow copy versus structuredClone's deep copy, and Object.freeze.
JSON — stringify and parse
Covers JSON.stringify for turning an object into a string and JSON.parse for turning it back, indenting with a 3rd argument, the SyntaxError a broken string throws, and values lost in the round trip.
Data Types Summary — typeof and a Quick-Reference Table
Sums up the split between the 7 primitives and Object, what typeof returns, why null and arrays both come back as object plus Array.isArray, and how to check whether something can be treated as a number.

JavaScript Syntax

Conditionals — else if, the Ternary Operator, and switch
Covers else if chains that check from the top and the order to put conditions in, the ternary operator that returns a value directly, and how switch and break match one value against candidates.
Loops — for, for...of, and for...in
Covers for loops that count with three expressions (initialization, condition, update), for...of and entries for getting elements directly, for...in for walking through keys, and how to build nested loops.
Looping on a Condition — while, do...while, break, and continue
Covers while for repeating only as long as a condition holds, do...while for running the body first, how to avoid infinite loops, and continue to skip a pass vs. break to exit the loop.
Function Declarations and Function Expressions — Arguments and return
Covers function declarations that give logic a name, how arguments match up by position, what return sends back, function expressions that store a function in a variable, and the undefined you get when return is missing.
Arrow Functions — Shorthand and Returning Objects
Covers the basic form of arrow functions with =>, the shorthand that drops parameter parentheses and body braces, the parentheses needed to return an object, and multi-line block bodies with return.
Default and Rest Parameters — Fallback Values and Collecting the Rest
Covers default parameters for left-out arguments, why undefined and null behave differently with defaults, rest parameters that bundle the remaining arguments into an array, and the options pattern for passing settings as an object.
Scope and Hoisting — Where Variables Can Be Read, and When
Covers block scope and function scope, shadowing where an inner declaration hides an outer one, hoisting of function declarations, the TDZ of let, and why not to use var.
Closures — Functions That Remember Outer Variables
Covers closures, functions that remember variables from an outer scope: counters that keep their value between calls, function factories that return functions with a setting built in, and functions created in loops.
Higher-Order Functions and Callbacks — Passing and Returning Functions
Covers higher-order functions, which take functions as arguments, and the callbacks passed to them: processing items one by one with forEach, a homemade filter that takes a test, and 2-step calls to functions that return functions.
map and filter — Transforming vs. Narrowing Down an Array
Learn map, which transforms each element, and filter, which keeps only elements that match. See how neither changes the original array, how to chain filter into map, and how to use the index argument.
reduce — Folding an Array Into a Single Value
Learn reduce, which combines an array into one value. See how the accumulator and initial value are passed along, how to compute totals, maximums, and per-category tallies, and the TypeError you get on an empty array.
Sorting and Searching — sort / find / some / every
Learn sort, whose order is decided by what the compare function returns, toSorted, which keeps the original array, find and findIndex, which return one matching item, and some and every, which return booleans.
Catching Exceptions — try / catch / finally
Catch exceptions with try and catch, use finally for code that always runs, rethrow a caught exception to the caller with throw, and branch by type with instanceof.
Throwing Exceptions — throw and Custom Errors
Throw an exception with throw new Error where you find a bad value, define your own types with extends Error, get the instanceof order right, and keep the original exception with cause.
Promise — Receiving Async Results with then and catch
Learn a Promise's pending, fulfilled, and rejected states, a delay function wrapping setTimeout, handling results with then / catch / finally, then chains, and running tasks together with Promise.all.
async / await — Waiting for Promise Results Line by Line
Covers async functions, which return a Promise when called, and waiting with await; handling rejections with try / catch; the difference between serial awaits and parallel Promise.all; and the pitfall of a forgotten await leaving a Promise in your variable.
Iterators and Generators — Getting Values One at a Time
Covers generators, which pause at each yield as they return values, and how next() advances them; the iterator protocol behind for...of; spreading values into an array and what's left afterward; and lazy evaluation for taking just what you need from an endless sequence.
Syntax Recap — Array Methods, Async Code, and Exceptions at a Glance
A quick-reference roundup: choosing array methods by return shape, when you can keep chaining, three ways to wait (callbacks, then, and await), and where a synchronous throw and a failed Promise each get caught.

JavaScript Object-Oriented Programming

Class Basics — Defining a Class and Creating Instances
Covers class, which lets you create many objects with the same shape: making instances with constructor and new, methods that use this, and when an object literal is enough.
constructor and Class Fields — Setting Initial Values
Covers the constructor and class fields, which set an instance's initial values: taking arguments, the order fields go in, defaults for omitted arguments, and rejecting invalid values.
Instance Members and static — Values and Methods That Belong to the Class
Covers static, which gives values and methods to the class itself: counters with static fields, factory methods that build from JSON, shared constants, and when to use instance members.
Getters and Setters — Running Code When a Property Is Read or Assigned
Getters and setters run code when a property is read or assigned. Covers computed properties, validating assigned values, going through a setter from the constructor, and read-only properties.
Private Fields (#) and Encapsulation
Private fields and methods use a leading # to block reading and writing from outside the class. Covers the SyntaxError raised before code runs and how # differs from the _ convention.
Inheritance — extends and super
Covers inheritance, which creates a new class by building on an existing one. Learn how to write extends, the super() call in a child class's constructor, overriding, and super.methodName() for calling the parent's method.
Polymorphism — Same Call, Different Behavior
Covers polymorphism, where each class gets a method with the same name so the caller can use a single form. Learn how to call everything in a mixed array at once, when to branch with instanceof, and duck typing for values that don't inherit.
Binding this — How the Call Decides this and How to Lock It
How this gets decided when you pull a method into a variable or pass it as a callback: the TypeError you get, locking this with bind, arrow function fields, and passing methods to setTimeout.
Prototypes — What's Behind a Class
Covers prototype, where a class's methods are stored, and the prototype chain, the order in which names are looked up. Learn Object.getPrototypeOf, the difference between hasOwnProperty and in, and how to add functions.
Special Methods — toString, toJSON, and Symbol.iterator
Covers toString, toJSON, and Symbol.iterator, which JavaScript calls in specific situations: how to decide how an object is displayed, how to choose the values that go into JSON, and how to make a class loopable with for...of.
Modules — import and export
Covers export, which makes values in a file public, and import, which loads them: the difference between named and default exports, type="module" in the browser, and how to tell ESM from CommonJS in Node.js.
Composition vs. Inheritance — Object.assign and Mixins
Covers composition, which splits features into pieces and builds them into one object: adding pieces later with Object.assign, functions that return pieces combined with spread syntax, mixin functions that stack features onto a class, and when to use inheritance instead.
OOP Recap — Class Syntax and this at a Glance
Quick-reference tables that organize class syntax by where each member lives, how to trace which definition runs with extends and super, this for each way of calling, how far features reach with inheritance, prototype, and composition, and when errors stop your code.

JavaScript Browser APIs

How JavaScript Runs in the Browser
How the browser builds the DOM from HTML, the order it handles link and script, the defer attribute, checking the DevTools Console, and verifying results as text in the practice console.
The DOM Tree and Selecting Elements — querySelector and querySelectorAll
Covers querySelector and querySelectorAll for getting elements from the DOM tree. Learn to search by class, id, and data attribute, turn a NodeList into an array, and use ?. when nothing is found.
Creating, Changing, and Removing Elements — createElement / classList / remove
Covers createElement and append for adding elements, remove for taking them out, classList and dataset for classes and attributes, and textContent vs. innerHTML for showing user input as plain text.
Events — addEventListener and Propagation
Covers addEventListener, which calls a function when something is clicked, event.target for the clicked element, event delegation using bubbling up to parents, stopPropagation, and removing listeners with once and removeEventListener.
Forms — Input Values and submit
Covers value and checked for reading fields, the input and change events fired by typing, submit and preventDefault for canceling a submission, and FormData for collecting fields all at once.
fetch — Getting Data from an API
Covers fetch and json() for getting JSON from a URL, response.ok for spotting failures, relative URLs, and loading two files at once with Promise.all.
fetch Error Handling and Timeouts — AbortController and Retries
Covers HTTP errors that fetch doesn't throw on, network errors where fetch itself fails, timeouts with AbortController and setTimeout, and retrying just once.
localStorage — Saving Data in the Browser
Covers localStorage's setItem, getItem, and removeItem for saving values in the browser, saving arrays as JSON because values become strings, the null returned for missing keys, and the size limit.
Timers and Dates — setTimeout / Date / Intl
Call functions later with setTimeout, stop setInterval, handle Date's zero-based months, format dates with Intl.DateTimeFormat, and count days between dates.