Reference Guide

A quick reference for commonly used JavaScript methods and browser APIs.

Unless otherwise noted, these work in all modern browsers on desktop and mobile.

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.

Selectors

document.querySelectorAll() - Find all matching elements on a page.
document.querySelector() - Find the first matching element on a page.
Element.matches() - Check if an element would be selected by a particular selector or set of selectors.

Loops

for - Loop through arrays and array-like objects.
for...of - Loop over iterable objects.
for...in - Loop over plain objects.
forEach() - Loop through arrays and NodeLists.

Classes

Element.classList - Add, remove, toggle, and check for classes on an element.
Element.className - Get and set classes on an element.

Styles

Element.style - Get and set inline styles for an element.
Window.getComputedStyle() - Get the computed style of an element.

Attributes & Properties

Element.getAttribute() - Get an attribute on an element.
Element.setAttribute() - Set an attribute on an element.
Element.removeAttribute() - Remove an attribute from an element.
Element.hasAttribute() - Check if an element has an attribute.
Properties - Get and set element properties.

Event Listeners

Element.addEventListener() - Listen for events on an element.
CustomEvent() - Create and emit custom events.

Strings

String.prototype.padStart() - Add characters to the beginning of a string if it’s less than a certain length.
String.prototype.padEnd() - Add characters to the end of a string if it’s less than a certain length.
String.prototype.trim() - Remove leading and trailing whitespace from a string.
String.prototype.toUpperCase() - Transform all text in a string to uppercase.
String.prototype.toLowerCase() - Transform all text in a string to lowercase.
String.prototype.replace() - Replace a portion of a string with something else.
String.prototype.replaceAll() - Replace all instances of a string inside another string.
String.prototype.slice() - Get a portion of a string starting and ending at specific characters.
String.prototype.split() - Convert a string to an array.
String.prototype.indexOf() - Find the index of a substring inside a string.
String.prototype.includes() - Check if a string contains a substring.
Template Literals - More easily create multi-line or complex strings.

Numbers

parseInt() - Convert a string into an integer (whole number).
parseFloat() - Convert a string into a point number (a number with decimal points).
Number() - Convert a string into a number.
Number.prototype.toFixed() - Format a number to a fixed number of decimal places.
Number.prototype.toString() - Convert a number to a string.
Basic math - Do basic arithmetic with JavaScript.
Increment & Decrement - Increment numbers up and down.
Comparisons - Compare two numbers.
Math.abs() - Get the absolute value of a number.
Math.floor() - Get the largest integer less than or equal to a number.
Math.ceil() - Get the smallest integer greater than or equal to a number.
Math.max() - Get the largest number from a set of numbers
Math.min() - Get the lowest number from a set of numbers.
Math.random() - Return a random float between 0 and 1.

Arrays

Array.prototype.map() - Transform the items in an array and create a new one.
Array.prototype.filter() - Create a new array containing a subset of items from an existing ones.
Array.prototype.reduce() - Take the content of an array and return a single value.
Array.prototype.reverse() - Reverse the order of items in an array.
Array.prototype.sort() - Sort and reorder the items in an array.
Array.prototype.join() - Combine all items in an array into a string.
Array.prototype.push() - Add items to an array.
Array.prototype.concat() - Merge two or more arrays together.
Array.prototype.slice() - Copy a segment of an array into a new array.
Array.prototype.splice() - Delete, replace, and add items to an array at specific indexes.
Array.prototype.shift() - Remove the first item from an array.
Array.prototype.pop() - Remove the last item from an array.
Array.prototype.from() - Create a new array from an existing array or array-like object.
Array.prototype.indexOf() - Get the index of the first matching item in an array.
Array.prototype.find() - Get the first item in an array that satisfies a condition.
Array.prototype.findIndex() - Find the index of an item in a multidimensional array.

Objects

Object.keys() - Get an array of keys from an object.
Object.entries() - Get an array of key/value pairs from an object.
delete - Remove an item from an object.
Object.assign() - Perform a shallow merge of two or more objects.
Object.freeze() - Make an object or array immutable.
Object Property Shorthand - A shorthand for defining object properties.
Object Function Shorthand - A shorthand for defining functions in an object.
Optional Chaining - Chain properties only if they’re not undefined or null.

Extract & Copy Properties

Array Destructuring - Extract variables from array properties.
Object Destructuring - Assign variables from object properties.
Spread Syntax - Expand array or object properties into their own values.
structuredClone() - Expand array or object properties into their own values.

Variables & Functions

Ternary Operator - A shorter way to write if...else statements.
Default Parameters - Define default values for function parameters.
Rest Parameters - Create an array with multiple function arguments.
Arrow Functions - An alternate way to define functions.

HTML & Text

Element.innerHTML - Get and set HTML content for an element.
Element.outerHTML - Get and set HTML content including an element.
Node.textContent - Get and set the text of an element (without markup).
Element.innerText - Get and set the rendered text of an element.

DOM Injection

document.createElement() - Create an element.
Element.before() - Insert an element into the DOM before another one.
Element.after() - Insert an element into the DOM after another one.
Element.append() - Insert an element at the end of a set of elements inside a shared parent.
Element.prepend() - Insert an element at the beginning of a set of elements inside a shared parent.
Element.remove() - Remove an element from the DOM.
Element.replaceWith() - Replace an element with another.
Node.clone() - Create a copy of a node.

Traversing the DOM

Node.parentNode - Get the parent of an element.
Element.closest() - Get the closest parent element that matches a selector.
Element.children - Get the immediate descendant elements of an element.
Node.childNodes - Get the immediate descendants of an element, including text fragments and other non-element nodes.
Node.firstChild & Node.lastChild - Get the first and last child nodes of a parent element.
Element.firstElementChild & Element.lastElementChild - Get the first and last child element of a parent element.
Node.nextSibling & Node.previousSibling - Get the next and previous sibling node of an element.
Element.nextElementSibling & Element.previousElementSibling - Get the next and previous sibling element of an element.

The Viewport

window.innerHeight - Get the height of the viewport.
window.innerWidth - Get the width of the viewport.
Element.getBoundingClientRect() - Get information about the size of an element and its position relative to the viewport.

Browser Storage

Cookies - Get and set cookie values.
localStorage - Store data locally in the browser for later use.
sessionStorage - Store data locally for the duration of the current browser session.

JSON

JSON.parse() - Convert stringified JSON back into an object or array.
JSON.stringify() - Convert object or array data into a string.

Ajax & APIs

fetch() - Make Promise-based HTTP request.
Promise.all() - Wait for two or more asynchronous tasks to resolve.
async & await - Write asynchronous code like it’s synchronous.

ES Modules

export - Export modules for use in other files.
Default exports - Import all modules from a file.
import all - Import all modules from a file.
Side effects - Import all modules from a file.

JavaScript-Free Components

Disclosure - Create an expand-and-collapse disclosure element.
Autocomplete - Create an autocompletion text input.
Smooth Scrolling - Animate scrolling to anchor links.

⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.