References

Beginner-friendly references for web development, with live, editable examples.

JavaScript Reference

A complete, modern JavaScript reference. Every method, statement, operator, global object and DOM API links to its own page with syntax, parameters and a live example you can run right in the browser. Clear explanations, modern syntax, no outdated advice.

JavaScript is what makes a page do things — respond to clicks, update content, fetch data, validate forms. It builds on the structure you write in HTML and the look you create with CSS. Just starting out? The everyday array methods are a great first stop — map(), filter() and forEach() — then move on to the DOM.

Global Objects 29

Name Description
AbortController Lets you cancel async operations like fetch requests, event listeners and timers via a signal.
Array The built-in object for ordered lists of values, with dozens of methods for transforming them.
BigInt A primitive type for integers larger than Number can safely represent.
Boolean The true/false type, plus the rules of truthy and falsy values that drive conditions.
Date The built-in object for working with dates and times — creating, reading and formatting them.
Error The object that represents a runtime error, carrying a message and a stack trace.
FormData Collects form field values into an object you can read or send, including file uploads.
globalThis A standard reference to the global object that works in browsers, Node and workers alike.
IntersectionObserver Efficiently watches when elements enter or leave the viewport — for lazy loading and scroll effects.
Intl.DateTimeFormat Formats dates and times for a locale, with control over which parts to show.
Intl.NumberFormat Formats numbers, currency and percentages for a locale, with separators and symbols.
JSON A built-in namespace for converting between JavaScript values and JSON text with stringify and parse.
localStorage Browser storage that keeps string key-value data on the user's device, even after the page closes.
Map A key-value collection that allows any type of key and remembers insertion order.
Math A built-in namespace of mathematical constants and functions like random, round, floor and max.
MutationObserver Watches an element for DOM changes — added or removed nodes, attribute and text changes.
Number The built-in for numeric values, with helpers for parsing, formatting and validating numbers.
Object The built-in for key-value collections, plus static helpers like Object.keys and Object.assign.
Promise An object representing the eventual result of an asynchronous operation — pending, fulfilled or rejected.
Proxy Wraps an object to intercept and customize operations like reading, writing and deleting properties.
Reflect A built-in object with methods that perform the default operations on objects, designed to pair with Proxy.
RegExp A pattern for matching text — used to search, validate, extract and replace strings.
sessionStorage Browser storage that keeps string key-value data only for the current tab session.
Set A collection of unique values — duplicates are automatically ignored.
String The built-in object for text, with methods for searching, slicing and transforming strings.
Symbol A primitive that creates a unique, collision-proof identifier, often used as an object key.
URLSearchParams A helper for reading and building URL query strings without manual string parsing.
WeakMap A Map whose keys must be objects and are held weakly, so they can be garbage collected.
WeakSet A Set whose values must be objects and are held weakly, so they can be garbage collected.

DOM 32

Name Description
addEventListener() Attaches a function that runs when a given event fires on an element. The standard way to handle events.
append() Adds nodes or text to the end of an element's children. More flexible than appendChild().
appendChild() Adds a node as the last child of an element, inserting it into the page.
classList A property for reading and changing an element's classes with add, remove, toggle and contains.
clipboard.writeText() Copies text to the system clipboard. Returns a promise and needs a user gesture.
cloneNode() Creates a copy of an element. Pass true to copy its descendants too (a deep clone).
closest() Finds the nearest ancestor (or the element itself) that matches a CSS selector.
createElement() Creates a new HTML element in memory, ready to configure and insert into the page.
dataset A property for reading and writing an element's data-* attributes as a convenient object.
fetch() Makes a network request and returns a promise for the response. The modern way to call APIs.
getAttribute() Returns the value of an element's attribute, or null if the attribute is not present.
getBoundingClientRect() Returns an element's size and position relative to the viewport.
getComputedStyle() Returns the actual, rendered CSS values of an element, including styles from stylesheets.
getElementById() Returns the element with the given id attribute, or null if no element has that id.
history.pushState() Adds an entry to the browser history and changes the URL without reloading the page.
innerHTML Gets or sets the HTML markup inside an element. Powerful, but unsafe with untrusted input.
insertAdjacentHTML() Inserts HTML at a specific position relative to an element, without replacing its contents.
matches() Tests whether an element matches a CSS selector, returning true or false.
prepend() Adds nodes or text to the start of an element's children. The front-insert counterpart of append().
preventDefault() Stops the browser's default action for an event, such as following a link or submitting a form.
querySelector() Returns the first element that matches a CSS selector, or null if none match.
querySelectorAll() Returns a static NodeList of all elements matching a CSS selector. Loop it with forEach.
remove() Removes an element from the DOM. The simple, modern way to delete a node.
requestAnimationFrame() Schedules a function to run before the next repaint — the right way to drive smooth animations.
scrollIntoView() Scrolls the page so a given element comes into view, optionally with a smooth animation.
scrollTo() Scrolls the window (or an element) to a set of coordinates, optionally smoothly.
setAttribute() Sets an attribute on an element, creating it or updating its value.
setInterval() Runs a function repeatedly at a fixed interval in milliseconds until you cancel it.
setTimeout() Runs a function once after a delay in milliseconds. Returns an id you can cancel.
showModal() Opens a <dialog> element as a modal, with a backdrop and focus trapping built in.
style A property for reading and setting an element's inline styles from JavaScript.
textContent Gets or sets the plain text inside an element. The safe alternative to innerHTML.

Operators 29

Name Description
+ Adds numbers — but also concatenates strings, which causes the classic type-coercion gotchas.
=> A short syntax for writing functions that also inherits this from the surrounding scope.
= Assigns a value to a variable. Not to be confused with == or === (comparison).
delete Removes a property from an object. Not for deleting variables or array elements cleanly.
destructuring Unpacks values from arrays or properties from objects into distinct variables in one step.
/ Divides one number by another. Dividing by zero gives Infinity, not an error.
** Raises the left operand to the power of the right. A concise alternative to Math.pow().
> Tests whether the left value is greater than the right. Works on numbers and, alphabetically, strings.
>= Tests whether the left value is greater than or equal to the right.
in Tests whether a property (or array index) exists in an object, returning true or false.
!= Tests whether two values are not equal, after type coercion. Prefer !== instead.
instanceof Tests whether an object was created from a particular constructor or class.
< Tests whether the left value is less than the right. Numeric for numbers, alphabetical for strings.
<= Tests whether the left value is less than or equal to the right.
&& Returns the first falsy value or the last value. Short-circuits, and is used for conditional execution.
! Inverts a boolean. The double form (!!) converts any value to a real true/false.
|| Returns the first truthy value or the last value. Short-circuits, and was the classic default-value operator.
== Compares two values for equality after converting their types. Prefer === to avoid surprises.
* Multiplies two numbers, coercing string operands to numbers.
new Creates an instance of a class or constructor function, running its constructor.
?? Returns the right-hand value only when the left is null or undefined — a safer default than ||.
?. Safely accesses nested properties, returning undefined instead of throwing if something is missing.
% Returns the remainder after dividing one number by another. Used for even/odd and wrapping.
... Expands an array, object or iterable into individual elements. Also used for rest parameters.
=== Compares two values for equality without type conversion. The equality check you should use.
!== Tests whether two values are not equal, without type coercion. The not-equal you should use.
- Subtracts one number from another, and as a unary operator negates or converts to a number.
?: A compact one-line if...else that chooses between two values based on a condition.
typeof Returns a string naming the type of a value, such as "string", "number" or "object".

Methods 93

Name Description
array.at() Returns the element at a given index, accepting negative indices to count from the end.
array.concat() Merges two or more arrays into a new array without changing any of the originals.
array.every() Tests whether every element passes a check, returning true or false.
array.fill() Fills all or part of an array with a static value, in place.
array.filter() Creates a new array containing only the elements that pass a test you define in a callback function.
array.find() Returns the first element that passes a test, or undefined if none do.
array.findIndex() Returns the index of the first element that passes a test, or -1 if none do.
array.findLast() Returns the last element that passes a test, searching from the end of the array.
array.findLastIndex() Returns the index of the last element that passes a test, searching from the end, or -1.
array.flat() Flattens nested arrays into a single array, up to a depth you choose.
array.flatMap() Maps each element with a callback, then flattens the result one level deep, in a single pass.
array.forEach() Runs a function once for each element of an array. Used for side effects, not for building a new array.
Array.from() Creates a new array from an iterable or array-like value, with an optional map function.
array.includes() Checks whether an array contains a given value, returning true or false.
array.indexOf() Returns the first index at which a value is found in an array, or -1 if it is not present.
Array.isArray() Returns true if a value is an array, and false otherwise. The reliable way to detect arrays.
array.join() Joins all elements of an array into a single string, separated by a string you choose.
array.map() Creates a new array by running a function on every element of the original and collecting the results.
array.pop() Removes the last element from an array and returns it. Mutates the array.
array.push() Adds one or more elements to the end of an array and returns the new length.
array.reduce() Boils an array down to a single value by accumulating a result across every element.
array.reverse() Reverses the order of an array's elements in place and returns the same array.
array.shift() Removes the first element from an array and returns it, shifting the rest down. Mutates the array.
array.slice() Returns a shallow copy of part of an array, selected from start to end, without changing the original.
array.some() Tests whether at least one element passes a check, returning true or false.
array.sort() Sorts the elements of an array in place. Sorts as text by default, so numbers need a compare function.
array.splice() Changes an array in place by removing, replacing or inserting elements at a given index.
array.toReversed() Returns a new reversed array without changing the original. The non-mutating version of reverse().
array.toSorted() Returns a new sorted array without changing the original. The non-mutating version of sort().
array.toSpliced() Returns a new array with elements removed or inserted, without changing the original.
array.unshift() Adds one or more elements to the beginning of an array and returns the new length. Mutates the array.
array.with() Returns a copy of an array with one index changed to a new value, without mutating the original.
Date.now() Returns the current time as the number of milliseconds since January 1, 1970 (the Unix epoch).
date.toISOString() Formats a date as a standard ISO 8601 string in UTC — ideal for storing and sending dates.
date.toLocaleDateString() Formats a date as a readable string in the user's locale, with control over the style.
JSON.parse() Parses a JSON string into a JavaScript value such as an object or array.
JSON.stringify() Converts a JavaScript value into a JSON string for storage or sending over the network.
Math.abs() Returns the absolute value of a number — its distance from zero, always non-negative.
Math.ceil() Rounds a number up to the nearest integer, toward positive infinity.
Math.floor() Rounds a number down to the nearest integer, toward negative infinity.
Math.hypot() Returns the square root of the sum of squares of its arguments — the straight-line distance.
Math.max() Returns the largest of the numbers passed to it. Spread an array to find its maximum.
Math.min() Returns the smallest of the numbers passed to it. Spread an array to find its minimum.
Math.pow() Raises a base number to an exponent. The ** operator does the same thing.
Math.random() Returns a pseudo-random floating-point number from 0 (inclusive) up to 1 (exclusive).
Math.round() Rounds a number to the nearest integer, with halves rounding up.
Math.sign() Returns the sign of a number: -1 for negative, 1 for positive, 0 for zero.
Math.sqrt() Returns the square root of a number, or NaN for negative input.
Math.trunc() Removes the fractional part of a number, returning just the integer part (toward zero).
Number.isFinite() Returns true only if a value is a finite number — not Infinity, -Infinity or NaN.
Number.isInteger() Returns true if a value is an integer (a whole number), and false otherwise.
Number.isNaN() Reliably checks whether a value is the special NaN value, without the global isNaN() coercion bug.
number.toFixed() Formats a number with a fixed number of decimal places and returns it as a string.
Object.assign() Copies properties from one or more source objects into a target object and returns the target.
Object.create() Creates a new object with a specified prototype, the low-level basis of inheritance.
Object.entries() Returns an array of an object's [key, value] pairs, perfect for looping over both at once.
Object.freeze() Freezes an object so its properties can no longer be added, removed or changed.
Object.fromEntries() Builds an object from a list of [key, value] pairs. The inverse of Object.entries().
Object.hasOwn() Checks whether an object has a property as its own (not inherited), returning true or false.
Object.keys() Returns an array of an object's own property names (its keys), in insertion order.
Object.values() Returns an array of an object's own property values, in insertion order.
parseFloat() Parses a string and returns a floating-point number, including decimals.
parseInt() Parses a string and returns an integer, stopping at the first character that is not a digit.
Promise.all() Waits for several promises to all fulfill, returning their results — or rejects if any one fails.
Promise.allSettled() Waits for all promises to settle and reports each result, whether it fulfilled or rejected.
Promise.any() Resolves with the first promise to fulfill, ignoring rejections unless they all fail.
Promise.race() Settles as soon as the first promise settles, with that promise's result or error.
Promise.resolve() Returns a promise that is already fulfilled with a given value.
string.at() Returns the character at a given index, accepting negative indices to count from the end.
string.charAt() Returns the character at a given index in a string, or an empty string if out of range.
string.charCodeAt() Returns the UTF-16 code (a number) of the character at a given index.
string.codePointAt() Returns the full Unicode code point at an index, correctly handling emoji and astral characters.
string.endsWith() Checks whether a string ends with a given substring, returning true or false.
string.includes() Checks whether a string contains another string, returning true or false. Case-sensitive.
string.indexOf() Returns the index of the first occurrence of a substring, or -1 if it is not found.
string.localeCompare() Compares two strings in the current locale, returning a number for sorting alphabetically.
string.match() Searches a string with a regular expression and returns the matches, or null if none.
string.matchAll() Returns an iterator of all regex matches, including capture groups, for a global pattern.
string.padEnd() Pads the end of a string with another string until it reaches a target length.
string.padStart() Pads the start of a string with another string until it reaches a target length.
string.repeat() Returns a new string made of the original repeated a given number of times.
string.replace() Returns a new string with the first match of a pattern replaced. Use a regex with the g flag to replace all.
string.replaceAll() Returns a new string with every match of a pattern replaced. The clear way to replace all occurrences.
string.slice() Extracts part of a string into a new string, from a start index up to (not including) an end index.
string.split() Splits a string into an array of substrings, breaking on a separator you choose.
string.startsWith() Checks whether a string begins with a given substring, returning true or false.
string.substring() Returns the part of a string between two indices. Similar to slice() but without negative indices.
string.toLowerCase() Returns a new string with all characters converted to lowercase.
string.toUpperCase() Returns a new string with all characters converted to uppercase.
string.trim() Removes whitespace from both ends of a string. Essential for cleaning up user input.
string.trimEnd() Removes whitespace from the end of a string only.
string.trimStart() Removes whitespace from the beginning of a string only.
structuredClone() Creates a deep copy of a value, including nested objects, arrays, Maps, Dates and more.

Statements 24

Name Description
async function Declares a function that returns a promise and can use await for asynchronous code.
await Pauses an async function until a promise settles, then resumes with its resolved value.
break Immediately exits the nearest loop or switch statement.
class Defines a blueprint for creating objects, with a constructor, methods and inheritance.
const Declares a block-scoped constant that cannot be reassigned. The recommended default.
continue Skips the rest of the current loop iteration and moves to the next one.
do...while A loop that runs its body first and then checks the condition, so it always runs at least once.
export Makes values from a module available for other files to import.
for Repeats a block of code a set number of times using a counter you control.
for...in Loops over the enumerable keys of an object. Not recommended for arrays.
for...of Loops over the values of an iterable such as an array, string, Map or Set.
function Declares a reusable block of code that can take inputs and return a value.
function* A function that can pause and resume, producing a sequence of values one at a time.
if...else Runs a block of code when a condition is true, with optional else and else if branches.
import Brings exported values from another module into the current file.
let Declares a block-scoped variable that can be reassigned. The default choice with const.
return Ends a function and sends a value back to the code that called it.
switch Compares a value against several cases and runs the matching block. Don't forget break.
this A keyword whose value is the object a function is called on — it depends on how the function is invoked.
throw Raises an error, stopping normal execution and jumping to the nearest catch block.
try...catch Runs code that might fail and catches any error so the program can recover gracefully.
var The old way to declare a variable. Function-scoped and hoisted — prefer let and const.
while Repeats a block of code as long as a condition stays true.
yield Pauses a generator function and produces a value to the caller. Resumes on the next request.