JavaScript Quick Reference

A quick lookup for JavaScript language features grouped by category. Each entry covers what it does and how to use it, so you can find answers without leaving the platform.

Operators

Arithmetic

Operator	What it does	Example
+	Addition (also concatenates strings)	3 + 2 → 5
-	Subtraction	3 - 2 → 1
*	Multiplication	3 * 2 → 6
/	Division	6 / 2 → 3
%	Remainder (modulo)	7 % 3 → 1
**	Exponentiation	2 ** 3 → 8
++	Increment by 1	x++ or ++x
--	Decrement by 1	x-- or --x

Comparison

Operator	What it does	Notes
===	Strict equality — value and type	Prefer over ==
!==	Strict inequality	Prefer over !=
==	Loose equality — type-coerces	Avoid
!=	Loose inequality	Avoid
<	Less than	—
>	Greater than	—
<=	Less than or equal	—
>=	Greater than or equal	—

Logical

Operator	What it does	Example
&&	AND — true if both sides are truthy	isOpen && hasStock
||	OR — true if either side is truthy	isGuest || isAdmin
!	NOT — inverts truthiness	!isLoading
??	Nullish coalescing — right side if left is null/undefined	name ?? 'Guest'

Assignment

Operator	Equivalent to
x = y	assign y to x
x += y	x = x + y
x -= y	x = x - y
x *= y	x = x * y
x /= y	x = x / y
x %= y	x = x % y
x **= y	x = x ** y

Ternary

The ternary operator is a compact if/else expression:

const label = count === 1 ? 'item' : 'items';
// If count is 1, label is 'item'; otherwise 'items'

const discount = isMember ? 0.1 : 0;

condition ? valueIfTrue : valueIfFalse

Array methods

All array methods are called on an array instance. Methods that accept a callback receive (element, index, array) — use only what you need.

Method	What it does	Returns
forEach(fn)	Runs fn for each element — no return value	undefined
map(fn)	Transforms each element with fn	New array
filter(fn)	Keeps elements where fn returns true	New array
find(fn)	First element where fn returns true	Element or undefined
findIndex(fn)	Index of first match	Number or -1
reduce(fn, initial)	Accumulates elements to a single value	Accumulated value
some(fn)	true if any element passes fn	Boolean
every(fn)	true if all elements pass fn	Boolean
includes(value)	true if value is in the array	Boolean
indexOf(value)	Index of first occurrence	Number or -1
push(item)	Adds item to the end — mutates	New length
pop()	Removes and returns the last element — mutates	Removed element
shift()	Removes and returns the first element — mutates	Removed element
unshift(item)	Adds item to the beginning — mutates	New length
splice(start, n)	Removes n elements at start — mutates	Removed elements
slice(start, end)	Copies from start up to (not including) end	New array
sort(fn)	Sorts in place — mutates	Same array
reverse()	Reverses in place — mutates	Same array
join(separator)	Joins all elements into a string	String
flat(depth)	Flattens nested arrays	New array
flatMap(fn)	map then flat(1)	New array

const prices = [12, 5, 8, 20, 3];

// map — apply a transformation
const withTax = prices.map(p => p * 1.1);

// filter — keep items that pass the test
const affordable = prices.filter(p => p < 10);

// find — first item that matches
const firstExpensive = prices.find(p => p > 15); // 20

// reduce — sum all values
const total = prices.reduce((sum, p) => sum + p, 0); // 48

// chaining
const result = prices
  .filter(p => p >= 5)
  .map(p => p * 1.1)
  .sort((a, b) => a - b);

push, pop, splice, sort, and reverse mutate the original array. map, filter, slice, and reduce return a new array and leave the original unchanged.

DOM APIs

These methods and properties are available on element objects returned by query methods. document refers to the global document object.

Selecting elements

Method	What it does	Returns
document.querySelector(selector)	First element matching a CSS selector	Element or null
document.querySelectorAll(selector)	All elements matching a CSS selector	NodeList (array-like)
document.getElementById(id)	Element with the given id	Element or null
document.getElementsByClassName(name)	Elements with the given class	HTMLCollection

Creating and modifying elements

Method / Property	What it does
document.createElement(tag)	Creates a new element — not yet in the DOM
element.append(node)	Adds a node or text string as the last child
element.prepend(node)	Adds a node or text string as the first child
element.remove()	Removes the element from the DOM
parent.removeChild(child)	Removes a specific child node
element.cloneNode(deep)	Copies the element; deep: true copies children too

Content and attributes

Property / Method	What it does	Notes
element.textContent	Gets or sets all text content	Safe — no HTML parsing
element.innerHTML	Gets or sets HTML string content	Parses HTML — avoid with user input
element.setAttribute(name, value)	Sets an attribute	—
element.getAttribute(name)	Gets an attribute value	—
element.removeAttribute(name)	Removes an attribute	—
element.dataset	Object of all data-* attributes	data-user-id → dataset.userId

Classes and styles

Method / Property	What it does
element.classList.add(name)	Adds a class
element.classList.remove(name)	Removes a class
element.classList.toggle(name)	Adds if absent, removes if present
element.classList.contains(name)	Returns true if the class is present
element.classList.replace(old, new)	Swaps one class for another
element.style.property	Gets or sets an inline style — use camelCase (backgroundColor)

// Select and modify
const btn = document.querySelector('#submit-btn');
btn.textContent = 'Save changes';
btn.classList.add('is-loading');

// Create and insert
const li = document.createElement('li');
li.textContent = 'New item';
document.querySelector('ul').append(li);

// Data attributes
// <div data-tour-id="42" data-price="89">
const card = document.querySelector('[data-tour-id]');
console.log(card.dataset.tourId);  // '42'
console.log(card.dataset.price);   // '89'

querySelectorAll returns a NodeList — use forEach to iterate, or spread into an array with [...nodeList] to access full array methods.

Event types

Attach events with element.addEventListener(type, handler). Remove with element.removeEventListener(type, handler) using the same function reference.

Mouse events

Event	Fires when
click	User clicks the element
dblclick	User double-clicks the element
mouseenter	Pointer moves onto the element (does not bubble)
mouseleave	Pointer moves off the element (does not bubble)
mouseover	Pointer moves onto the element or a descendant (bubbles)
mouseout	Pointer moves off the element or a descendant (bubbles)
mousemove	Pointer moves over the element
contextmenu	User right-clicks the element

Keyboard events

Event	Fires when	Useful properties
keydown	Key is pressed — fires repeatedly while held	event.key, event.code, event.ctrlKey
keyup	Key is released	event.key, event.code

keypress is deprecated — use keydown instead.

Form events

Event	Fires when
submit	Form is submitted
input	Value changes as the user types
change	Value is committed (on blur or selection change)
focus	Element receives focus
blur	Element loses focus
reset	Form is reset

Document and window events

Event	Fires when
DOMContentLoaded	HTML is parsed and the DOM is ready (before images/styles load)
load	Page and all resources (images, styles) have loaded
resize	Browser window is resized
scroll	User scrolls the page or an element

// Click handler
document.querySelector('#menu-btn').addEventListener('click', () => {
  document.querySelector('#nav').classList.toggle('is-open');
});

// Form submit with preventDefault
document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault();
  const name = event.target.elements['name'].value;
  console.log('Submitted:', name);
});

// Keyboard shortcut
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeModal();
  }
});

// Run after DOM is ready
document.addEventListener('DOMContentLoaded', () => {
  initApp();
});

Use mouseenter/mouseleave for hover effects on a single element. Use mouseover/mouseout only when you need to detect movement over child elements too.