Essential JavaScript reference covering variables, types, strings, arrays, objects, functions, DOM manipulation, promises, async/await, and modern ES6+ features. Perfect for quick lookups during development.
| Code / Syntax | Description |
|---|---|
let x = 10 | Block-scoped variable (reassignable) |
const y = 20 | Block-scoped constant (not reassignable) |
var z = 30 | Function-scoped variable (avoid in modern JS) |
typeof x | Returns type as string ("number", "string", etc.) |
Number('42') | Convert string to number |
String(42) | Convert number to string |
Boolean(1) | Convert to boolean (truthy/falsy) |
parseInt('10px', 10) | Parse integer from string |
parseFloat('3.14') | Parse floating-point number |
Number.isNaN(x) | Check if value is NaN (strict) |
| Code / Syntax | Description |
|---|---|
`Hello ${name}` | Template literal with interpolation |
str.length | String length |
str.includes('text') | Check if string contains substring |
str.startsWith('He') | Check if string starts with |
str.slice(0, 5) | Extract portion of string |
str.split(',') | Split string into array |
str.replace('old', 'new') | Replace first occurrence |
str.replaceAll('old', 'new') | Replace all occurrences |
str.trim() | Remove whitespace from both ends |
str.toLowerCase() | Convert to lowercase |
str.toUpperCase() | Convert to uppercase |
str.padStart(5, '0') | Pad start to target length |
| Code / Syntax | Description |
|---|---|
[1, 2, 3] | Array literal |
arr.push(item) | Add item to end |
arr.pop() | Remove and return last item |
arr.unshift(item) | Add item to beginning |
arr.shift() | Remove and return first item |
arr.map(x => x * 2) | Transform each element, return new array |
arr.filter(x => x > 5) | Keep elements that pass test |
arr.find(x => x.id === 1) | Find first matching element |
arr.reduce((sum, x) => sum + x, 0) | Reduce array to single value |
arr.forEach(x => console.log(x)) | Loop over each element |
arr.includes(3) | Check if array contains value |
arr.sort((a, b) => a - b) | Sort numerically ascending |
[...arr1, ...arr2] | Merge arrays with spread |
arr.flat() | Flatten nested arrays by one level |
| Code / Syntax | Description |
|---|---|
{ key: 'value' } | Object literal |
obj.key or obj['key'] | Access a property |
const { a, b } = obj | Object destructuring |
{ ...obj, newKey: 'val' } | Spread / shallow copy with override |
Object.keys(obj) | Array of keys |
Object.values(obj) | Array of values |
Object.entries(obj) | Array of [key, value] pairs |
Object.assign({}, obj1, obj2) | Merge objects |
'key' in obj | Check if key exists |
delete obj.key | Remove a property |
Object.freeze(obj) | Make object immutable (shallow) |
| Code / Syntax | Description |
|---|---|
function name(a, b) { } | Function declaration (hoisted) |
const fn = (a, b) => { } | Arrow function expression |
const fn = (a, b) => a + b | Arrow function with implicit return |
function fn(a = 10) { } | Default parameter value |
function fn(...args) { } | Rest parameters (gather into array) |
fn(...arr) | Spread arguments from array |
const fn = (function() { })(); | IIFE — immediately invoked function |
setTimeout(fn, 1000) | Call function after 1 second |
setInterval(fn, 1000) | Call function every 1 second |
fn.bind(thisArg) | Create function with bound this |
| Code / Syntax | Description |
|---|---|
document.querySelector('.class') | Select first matching element |
document.querySelectorAll('div') | Select all matching elements |
document.getElementById('id') | Select element by ID |
el.textContent = 'text' | Set text content |
el.innerHTML = '<b>html</b>' | Set inner HTML |
el.setAttribute('src', 'url') | Set an attribute |
el.classList.add('active') | Add a CSS class |
el.classList.toggle('hidden') | Toggle a CSS class |
el.style.color = 'red' | Set inline style |
el.addEventListener('click', fn) | Attach event listener |
document.createElement('div') | Create a new element |
parent.appendChild(child) | Append child element |
| Code / Syntax | Description |
|---|---|
new Promise((resolve, reject) => { }) | Create a new Promise |
promise.then(result => { }) | Handle resolved value |
promise.catch(error => { }) | Handle rejection |
promise.finally(() => { }) | Run code regardless of outcome |
Promise.all([p1, p2]) | Wait for all promises to resolve |
Promise.race([p1, p2]) | First promise to settle wins |
Promise.allSettled([p1, p2]) | Wait for all, get all results |
async function fn() { } | Declare async function |
const data = await fetch(url) | Await a promise |
try { await fn() } catch (e) { } | Error handling with async/await |
| Code / Syntax | Description |
|---|---|
const [a, b] = [1, 2] | Array destructuring |
const { x, y } = obj | Object destructuring |
a ?? b | Nullish coalescing (if a is null/undefined, use b) |
a?.b?.c | Optional chaining (safe property access) |
import { x } from './module' | Named import (ES modules) |
export const x = 1 | Named export |
export default fn | Default export |
class Dog extends Animal { } | Class with inheritance |
new Map() | Key-value collection (any key type) |
new Set([1, 2, 3]) | Collection of unique values |
for (const item of iterable) { } | Loop over iterable (array, map, set) |
structuredClone(obj) | Deep clone an object |
Found this cheat sheet useful? Check out our other references and tools.