Basic JavaScript

A programming language is a precise, written notation for telling a computer what to do. JavaScript was created by Brendan Eich at Netscape in 1995, famously in about ten days, to make web pages interactive. Despite the name, it has nothing to do with Java; the name was a marketing decision. Today it is the only programming language that every web browser runs natively, which makes it the most widely deployed language in the world. The language itself is standardised as ECMAScript, and the big 2015 update (ES6) added much of the modern syntax used on this page: let, const, arrow functions, classes, and template literals.

JavaScript runs in two main places. In the browser, it's loaded by a <script> tag and can read and change the page, respond to clicks and typing, and talk to servers. Outside the browser, Node.js runs JavaScript on servers and on your own computer, which is how many web back ends and developer tools are built. The core language is the same in both; what differs is the environment's built-in objects. The browser provides document and window, while Node provides file and network access.

JavaScript is dynamically typed: variables don't declare a type, and values can change type. It is also interpreted from the programmer's point of view: you give the engine source code and it runs it, although modern engines such as Chrome's V8 compile hot code to machine code on the fly for speed. And it is single-threaded with an event loop: it does one thing at a time, but it never sits waiting for slow work like a network request. It carries on and comes back when the result is ready, as section 12 explains.

ECMAScript

The official standard that defines the JavaScript language; ES6 (2015) was the major modernisation.

Node.js

A program that runs JavaScript outside the browser: on servers and on your own computer.

Runtime environment

What surrounds the language: the browser gives you document, while Node gives you files and servers.

A variable is a name that refers to a value. Modern JavaScript gives you two keywords for creating one. const creates a binding that can't be reassigned, and let creates one that can. The older var still works but has confusing scoping rules, so modern code avoids it. The standard advice is to use const by default and switch to let only when you know the value must change, so a reader can see at a glance which names stay fixed. Note that const fixes the binding, not the contents: a const array can still have items pushed onto it.

JavaScript has seven primitive types. string is text, and number is any number: JavaScript has one number type for both whole numbers and decimals, stored as a 64-bit float. boolean is true or false. There are also bigint for arbitrarily large integers and symbol for unique identifiers. Two values mean “nothing”: undefined is what a variable holds before it's been given a value, and null is what you assign deliberately to mean “no value”. Everything else, including arrays and functions, is an object. The typeof operator reports a value's type as a string.

Variables declared with let and const have block scope: they exist only inside the nearest pair of curly braces, such as a loop body or an if block. Because JavaScript is dynamically typed, the same let variable could hold a number now and a string later, but doing so makes code harder to follow. Names are case-sensitive and conventionally written in camelCase.

const / let

A binding that can't be reassigned / one that can; prefer const.

undefined vs null

“Not assigned yet” / “deliberately empty”.

Block scope

A let/const variable exists only inside its { } block.

An operator is a symbol that performs an operation on one or more values, its operands. JavaScript's arithmetic operators are + - * / %, plus ** for exponentiation and ++/-- to add or subtract one. Because there's only one number type, / always gives the exact result, so 17 / 5 is 3.4; use Math.floor or Math.trunc when you want a whole number. Numbers are binary floating point, so some decimals can't be stored exactly: 0.1 + 0.2 gives 0.30000000000000004. Round money with toFixed, or work in whole cents.

The + operator does double duty: it adds numbers but joins strings, and if either side is a string, the other side is converted to text. So "5" + 3 is "53", while "5" - 3 is 2, because - only makes sense for numbers. This automatic type coercion is JavaScript's most famous trap, and it matters most for equality. The loose operator == coerces before comparing, so "5" == 5 is true. The strict operator === requires the same type and value, so "5" === 5 is false. Always use === and !==.

The logical operators &&, ||, and ! work with any values, not just booleans, using truthiness. false, 0, "", null, undefined, and NaN are falsy, and everything else is truthy. a || b returns a if it's truthy, otherwise b, which is why it was traditionally used for defaults. The newer nullish coalescing operator ?? is usually better for defaults, because it falls back only on null or undefined and keeps legitimate values like 0 and "".

Type coercion

JavaScript automatically converting a value's type, e.g. "5" + 3 becoming "53".

=== vs ==

Strict equality (same type and value) / loose equality (converts first); prefer ===.

Truthy / falsy

How a value behaves in a condition; 0, "", null, undefined, NaN are falsy.

A string is a sequence of characters used for text. JavaScript accepts single quotes, double quotes, or backticks. Backticks create a template literal, the modern way to build text: it can span several lines, and any expression inside ${ } is evaluated and inserted, as in `Hello, ${name}!`. Template literals replace most uses of joining strings with + and are much easier to read.

Strings are immutable: no method changes a string in place. Methods such as toUpperCase(), trim(), replace(), and slice() all return a new string, so you must use or store the result. A string has a length property, and individual characters can be read by index, starting from 0: s[0] or s.charAt(0). s.at(-1) reads the last character.

The workhorse methods are includes, startsWith, and indexOf for searching, slice(start, end) for extracting part of a string (the end is excluded), split(separator) for breaking a string into an array, and the array method join(separator) for gluing one back together. padStart and padEnd add spaces (or other characters) to reach a fixed width, which is handy for aligning columns. Numbers have toFixed(2) for formatting with exactly two decimal places.

Template literal

A backtick string where ${expression} is evaluated and inserted.

Immutable

Cannot be changed in place; string methods return new strings.

split / join

Break a string into an array / glue an array back into a string.

An array is an ordered list of values, written in square brackets: ["apple", "banana"]. Items are reached by index, starting at 0, and length gives the count. Arrays grow and shrink freely: push adds to the end, pop removes from the end, unshift and shift do the same at the front, and splice inserts or removes in the middle. These methods change the array in place, so they mutate it.

Modern JavaScript leans heavily on higher-order array methods, which take a function and apply it to each element, returning a new array without touching the original. map transforms every item, filter keeps the items that pass a test, find returns the first match, and reduce combines all items into a single value such as a sum. Chaining them, as in scores.filter(…).map(…), replaces many hand-written loops with short, readable steps.

One trap catches everyone: sort() with no argument sorts items as strings, so [10, 9, 1].sort() gives [1, 10, 9], because "10" comes before "9" alphabetically. For numbers you must pass a comparator function: sort((a, b) => a - b) sorts ascending. sort also mutates the array. Use slice to copy part (or all) of an array without changing it, and the spread syntax [...a, ...b] to combine arrays.

Mutate

Change in place; push, pop, sort, and splice mutate, while map and filter don't.

Higher-order method

An array method that takes a function, such as map, filter, reduce.

Comparator

The function passed to sort, e.g. (a, b) => a - b for numbers.

An object groups related data under named properties: { name: "Ada", age: 36 }. Each property is a key–value pair, where the key is a string and the value can be anything, including another object, an array, or a function (in which case it's called a method). You read and write properties with dot notation, person.name, or with bracket notation, person["name"]. The bracket form is needed when the key is held in a variable, as in counts[word]. Assigning to a new key adds it, and delete removes one.

Objects are reference values: a variable doesn't hold the object itself but a reference to it. So const b = a doesn't copy an object; both names point at the same one, and a change through either is visible through both. That also explains why a const object's properties can still change: const fixes the reference, not the contents. To make a shallow copy, use the spread syntax: { ...a }.

Modern syntax makes objects pleasant to work with. Destructuring pulls properties out into variables in one line: const { name, city } = person;. Object.keys, Object.values, and Object.entries give you a property list to loop over. JSON (JavaScript Object Notation) is the text format based on this syntax that APIs use to exchange data: JSON.stringify turns an object into JSON text, and JSON.parse turns the text back into an object.

Property

A key–value pair on an object; a property whose value is a function is a method.

Destructuring

Unpacking properties into variables: const { a, b } = obj;

JSON

A text format for data based on object syntax; JSON.stringify / JSON.parse.

Statements normally run top to bottom. Control structures let a program choose which code runs, based on a condition. The if statement evaluates its condition, in parentheses, for truthiness, and runs its block only if it's truthy. else if adds further tests, and else handles everything left. Only the first matching branch runs, so order the tests from most specific to least. Always use braces, even for one-line branches, so that adding a second line later can't silently fall outside the if.

A switch statement compares one value against a list of case labels using strict equality (===) and jumps to the match, with default as the catch-all. Like C, JavaScript's switch falls through into the following case unless each case ends with break (or return). For a compact two-way choice inside an expression, use the ternary operator: n % 2 === 0 ? "even" : "odd".

Choosing a default value is a decision so common that JavaScript has two operators for it, and the difference matters. a || b falls back to b whenever a is falsy, which wrongly discards legitimate values like 0 or an empty string. a ?? b falls back only when a is null or undefined. For settings where 0 is a real answer, such as volume, quantity, or a score, ?? is the correct choice. Optional chaining, user?.address?.city, safely reads a nested property and gives undefined instead of crashing when a link is missing.

Condition

An expression evaluated for truthiness to choose a branch.

Fall-through

In switch, continuing into the next case when there's no break.

|| vs ??

Default when falsy / default only when null or undefined.

A loop repeats a block of code. Each pass through its body is an iteration. JavaScript's classic for loop has three parts: an initialiser, a condition checked before each iteration, and an update run after each one, as in for (let i = 0; i < 5; i++). Use it when you need a counter. while repeats as long as its condition is true, and do … while checks afterwards, so it always runs at least once.

Two loops iterate over things directly, and they are easy to mix up. for…of visits the values of an iterable, such as an array, a string, a Map, or a Set: for (const fruit of fruits). This is what you want for arrays. for…in visits the keys (property names) of an object: for (const key in stock). Using for…in on an array gives you the indexes as strings, which is rarely what you want. A handy rule: of for values, in for keys.

Inside any loop, break exits immediately and continue skips to the next iteration. Declare loop counters with let, so each iteration gets its own fresh copy, which matters when callbacks created inside the loop use the counter later. Many loops over arrays can be replaced by the higher-order methods from section 5 (forEach, map, filter), which state the intent more directly.

for…of

Loops over the values of an iterable (arrays, strings, Maps, Sets).

for…in

Loops over the property names (keys) of an object.

Iteration

One pass through a loop's body.

A function is a reusable block of code that takes parameters and can return a value. JavaScript has several ways to write one. A function declaration, function maxOf(a, b) { … }, is hoisted, meaning it can be called from anywhere in its scope, even above the line where it's written. A function expression assigns a function to a variable. An arrow function, (a, b) => a + b, is a shorter expression form. When its body is a single expression, that expression is returned automatically with no braces or return needed.

Parameters can have default values, (name = "World") => …, which are used when the caller leaves an argument out. A rest parameter, ...nums, collects any number of arguments into a real array. A function without a return gives back undefined. In JavaScript, functions are first-class values: they can be stored in variables, passed as arguments (as with map and addEventListener), and returned from other functions.

That last ability leads to one of JavaScript's most important ideas, the closure. When a function is created inside another function, it keeps access to the outer function's variables, even after the outer function has finished running. In makeCounter, the inner function remembers count, and each call updates the same private variable, which no other code can touch. Closures are how JavaScript creates private state, and they're at work every time a callback uses a variable from the surrounding code.

Arrow function

(params) => expression, a compact function; a single-expression body is returned automatically.

Rest parameter

...args, which collects the remaining arguments into an array.

Closure

A function that remembers the variables of the scope it was created in.

When a browser loads a page, it reads the HTML and builds the DOM (Document Object Model): a tree of objects in memory, one node for every element, attribute, and piece of text. The <html> element is the root, <body> is its child, a <ul> inside the body is the body's child, and so on. The screen shows whatever the DOM currently contains, so when JavaScript changes the DOM, the page updates immediately. JavaScript reaches the tree through the global document object.

Working with the DOM follows a simple pattern: select, then change. document.querySelector(css) returns the first element matching a CSS selector, such as "#title" for an id or ".card" for a class, and querySelectorAll returns all matches as a list. Once you have an element you can change its text with textContent, toggle CSS classes with classList.add, remove, and toggle, and read or set attributes with getAttribute and setAttribute. Changing classes and letting CSS do the styling is usually better than setting style directly.

To add content, create an element with document.createElement("li"), fill it in, and attach it with appendChild or append. To remove one, call its remove() method. Prefer textContent over innerHTML for putting text on a page. innerHTML parses its value as HTML, so inserting text that came from a user can let them inject their own markup and scripts, a cross-site scripting attack. Finally, a script can only find elements that already exist, so it must run after the HTML it uses: place the <script> at the end of the body, or load it with defer.

DOM

The browser's live tree of objects representing the page; changing it changes the screen.

querySelector

Finds the first element matching a CSS selector; querySelectorAll finds all.

textContent vs innerHTML

Sets plain text safely / parses HTML, so it's risky with user input.

Web pages are event-driven. Instead of running from top to bottom and finishing, a page sets up code to run when something happens: a click, a key press, a form submission, the page finishing loading. Each of these is an event. You register a function to respond with element.addEventListener("click", handler). The function is called an event listener (or handler), and the browser calls it every time that event happens on that element, passing an event object that describes what happened.

The event object carries the details. event.target is the exact element the event happened on, event.key says which key was pressed in keyboard events, and event.preventDefault() stops the browser's built-in behaviour. For example, it stops a form submission from reloading the page, so your JavaScript can handle it instead. Common event types include click, input (a field's value changed), submit, keydown, and DOMContentLoaded.

Most events bubble: after firing on the element that was clicked, the event travels up through each of its ancestors, triggering their listeners too. That enables event delegation. Instead of attaching a listener to every item in a list, you attach one listener to the list itself and use event.target to see which item was clicked. Delegation uses less code and memory, and it automatically works for items added to the list later. Code on this site never uses inline onclick="…" attributes; addEventListener in a separate script is the modern, secure approach.

Event listener

A function registered with addEventListener that runs when an event occurs.

event.target

The element the event actually happened on.

Bubbling / delegation

Events travel up to ancestors; one listener on a parent can handle all its children.

JavaScript is single-threaded: it runs one piece of code at a time. If it simply stopped and waited for slow operations, such as a network request, a timer, or reading a file, the whole page would freeze. Instead, JavaScript is asynchronous. It starts the slow operation, hands it off to the browser or Node.js, and carries on with other work. When the result is ready, a callback is placed in a queue, and the event loop runs it once the current code has finished. This is why a setTimeout of 0 milliseconds still runs after all the ordinary code below it.

A Promise is an object representing a result that isn't available yet. It starts pending, then becomes either fulfilled with a value or rejected with an error. You attach handlers with .then() for success and .catch() for failure. Promise callbacks go into a higher-priority queue (the microtask queue) than timers, so a resolved promise's .then runs before a setTimeout(…, 0) that was scheduled earlier. fetch(), the browser's function for making HTTP requests, returns a Promise.

async/await is the modern way to work with promises, and it lets asynchronous code read like ordinary top-to-bottom code. Inside a function marked async, await somePromise pauses that function until the promise settles and then gives you its value. The rest of the program keeps running in the meantime. A rejected promise makes await throw, so you handle failures with an ordinary try/catch. An async function always returns a Promise itself.

Event loop

The mechanism that runs queued callbacks once the current code has finished.

Promise

An object for a future result: pending, then fulfilled or rejected.

async / await

Syntax that pauses an async function until a promise settles, without blocking the page.