JavaScript Cheat Sheet

Free JavaScript cheat sheet: variables, array methods, functions, DOM manipulation, and async patterns at a glance.

Variables & Types

Concept	Syntax	Example
Declare variable Use let for variables that change, const for ones that don't.	`let x = 5; const y = 'hi';`	`let count = 0;`
Data types JavaScript has 8 built-in types. typeof tells you which type a value is.	`string, number, boolean, null, undefined, object, symbol, bigint`	`typeof 42 // 'number'`
Type conversion Convert between types explicitly to avoid unexpected behavior.	`String(x), Number(x), Boolean(x)`	`Number('42') // 42`
Template literal Embed expressions inside strings using backticks and ${}.	`text ${expr}`	`Hello ${name}`

Arrays

Concept	Syntax	Example
Create An ordered list of values in square brackets.	`const arr = [1, 2, 3]`	`const fruits = ['apple', 'banana']`
Add/Remove push/pop modify the end; unshift/shift modify the start; splice edits anywhere.	`push, pop, unshift, shift, splice`	`arr.push(4); arr.pop();`
Transform Higher-order methods that return new arrays or values without changing the original.	`map, filter, reduce, find, some, every`	`arr.map(x => x * 2)`
Spread ... spreads array elements — great for merging or copying arrays.	`[...arr1, ...arr2]`	`const all = [...a, ...b];`
Destructuring Extract values from arrays or object properties into variables in one line.	`const [a, b] = arr; const { x } = obj`	`const [first] = [1,2,3]; // 1`

Functions

Concept	Syntax	Example
Arrow function Short function syntax. Doesn't have its own 'this' context.	`const fn = (a) => a * 2`	`const double = n => n * 2;`
Default params If a caller doesn't pass the argument, the default value is used.	`function fn(x = 10) {}`	`function greet(name = 'World') {}`
Rest params ...args collects all extra arguments into an array.	`function fn(...args) {}`	`function sum(...nums) { return nums.reduce((a,b) => a+b); }`
Destructuring params Unpack object properties directly in the function signature.	`function fn({ name, age }) {}`	`function show({ title }) { console.log(title); }`

Async

Concept	Syntax	Example
Promise Represents a value that will be available in the future (pending, fulfilled, or rejected).	`new Promise((resolve, reject) => {})`	`fetch(url).then(r => r.json())`
Async/Await Makes asynchronous code look like synchronous code. await pauses until the Promise resolves.	`async function fn() { await ... }`	`const data = await fetch(url).then(r => r.json());`
Try/Catch Wrap await calls in try/catch to handle errors gracefully.	`try { ... } catch (e) { ... }`	`try { await fetch(url); } catch (e) { console.error(e); }`

DOM

Concept	Syntax	Example
Select element Find a page element using any CSS selector. Returns the first match.	`document.querySelector(sel)`	`document.querySelector('.btn')`
Add event Listen for user actions (click, keydown, submit, etc.) on an element.	`el.addEventListener(event, fn)`	`btn.addEventListener('click', () => alert('Hi'))`
Modify content textContent is safe text-only. innerHTML lets you set HTML (use with caution).	`el.textContent, el.innerHTML`	`el.textContent = 'New text';`