🟨

JavaScript Cheat Sheet

The only language that runs natively in every browser — the backbone of the modern web, and increasingly servers too (Node.js). Copy-paste examples plus live Run/Submit exercises, running instantly in your own browser.

Jump to: Your first programVariablesData types Numbers & mathStringsComparison & logic Ternary & defaultsif / elseLoops break & continueArraysArray methods ObjectsFunctionsArrow functions ClosuresTimersTemplate literals DestructuringThe DOMEvents JSONlocalStorageModules Classes & OOPError handlingPromises async / await & fetch 🚀 Practice problems

Your first program

console.log("Hello, world!");
📝 In the browser, JavaScript also runs in the Console tab of DevTools (F12). No compiling — it just runs.

Variables

let age = 25;        // can be reassigned
age = 26;
const name = "Sam";  // cannot be reassigned
// avoid "var" — it has confusing scoping rules from old JS

Data types

let price = 9.99;         // number (no separate int/float)
let name = "Mo";          // string
let isValid = true;      // boolean
let nothing = null;      // intentionally empty
let notSet;               // undefined — declared but never assigned
console.log(typeof price);  // "number"

Numbers & math

JavaScript has only one number type — no separate int/float. That makes decimal math a little dangerous for anything involving money.

console.log(0.1 + 0.2);         // 0.30000000000000004 — binary floating-point can't store 0.1 exactly
console.log(0.1 + 0.2 === 0.3); // false!

// industry-standard fix: do money math in CENTS (integers), convert to dollars at the very end
const priceCents = 1090 + 2095;
const dollars = Math.round(priceCents) / 100;
console.log(dollars.toFixed(2));   // "31.85"
⚠️ Never do money math directly in dollars/floats — rounding errors compound across many operations. Store amounts as whole-number cents and only divide by 100 for display.

Strings

const a = 'single quotes';        // preferred default
const b = "double, to avoid escaping";
const c = 'I\'m learning JS';    // \' escapes the quote inside

const qty = 3, total = 2095;
console.log(`Items (${qty}): $${(total / 100).toFixed(2)}`);  // template literal, multi-line capable

console.log('2.95' + 20.95);   // "2.9520.95" — string + number CONCATENATES, doesn't add!
⚠️ + between a string and a number coerces the number to text instead of doing math — when building a template literal with math inside, wrap the numeric expression in parentheses first (as in the example above) so it evaluates before becoming part of the string.

Comparison & logical operators

console.log(5 === '5');   // false — === checks type AND value
console.log(5 == '5');    // true  — == silently converts types first
// always use === / !== — never == / != — to avoid surprise type coercion

if (age >= 18 && hasId) { }   // AND — both must be true
if (isVip || total > 100) { }   // OR — at least one true, short-circuits
if (!isBanned) { }              // NOT
📝 Falsy values (treated as false in a condition): false, 0, '', NaN, undefined, null. Everything else — including "0" and empty arrays/objects — is truthy.

Ternary & default/guard patterns

const label = age >= 18 ? 'Adult' : 'Minor';   // condition ? ifTrue : ifFalse

// "default" pattern — || falls through to a fallback when the left side is falsy
const currency = selectedCurrency || 'USD';

// "guard" pattern — short-circuits out before running the right-hand side
const isReady = data && data.length > 0;

if / else

let age = 20;
if (age >= 18) {
    console.log("Adult");
} else if (age >= 13) {
    console.log("Teen");
} else {
    console.log("Child");
}

Loops

for (let i = 0; i < 5; i++) {
    console.log(i);
}

let n = 3;
while (n > 0) {
    console.log(n);
    n--;
}

break & continue

for (let i = 0; i < 10; i++) {
    if (i === 5) break;       // stop the loop entirely
    if (i % 2 === 0) continue; // skip just this iteration
    console.log(i);              // prints 1, 3
}
⚠️ In a while loop, using continue before the increment step runs is a classic way to accidentally create an infinite loop — make sure the counter still advances before skipping.

Arrays

let nums = [10, 20, 30];
console.log(nums[0]);        // 10
nums.push(40);             // add to the end
console.log(nums.length);   // 4

for (const n of nums) {   // for...of — loop over VALUES
    console.log(n);
}

Array methods

JavaScript's array methods are how most real code is written — favor these over manual loops.

const nums = [1, 2, 3, 4, 5];

const doubled = nums.map(n => n * 2);        // [2,4,6,8,10] — transform each item
const evens   = nums.filter(n => n % 2 === 0); // [2,4] — keep matching items
const total   = nums.reduce((sum, n) => sum + n, 0); // 15 — combine into one value
const found   = nums.find(n => n > 3);        // 4 — first match

nums.forEach((value, index) => {          // the preferred way to just LOOP (no return value)
    console.log(`${index}: ${value}`);
});

Objects

const person = {
    name: "Ada",
    age: 30,
    greet() {
        console.log(`Hi, I'm ${this.name}`);
    }
};
console.log(person.name);   // Ada
person.greet();             // Hi, I'm Ada

Functions

function add(a, b) {
    return a + b;
}
console.log(add(2, 3));  // 5

function calculateTax(cost, taxRate = 0.1) {   // default parameter — used if the caller omits it
    return cost * taxRate;
}
console.log(calculateTax(100));   // 10 — uses the default 0.1
📝 Functions are "first-class" values in JS — you can store one in a variable and pass it into another function (a callback) to be called later. Just be sure to pass the function itself (myFn), not the result of calling it (myFn()) — a very common mistake with callbacks and timers.

Arrow functions

A shorter function syntax, extremely common in modern JS — especially with array methods.

const add = (a, b) => a + b;
console.log(add(2, 3));   // 5

const square = n => n * n;   // one param -> parens optional
console.log(square(4));    // 16

Closures

A function "remembers" the variables from the scope it was created in, even after that outer function has already returned — this is a closure.

function makeCounter() {
    let count = 0;             // captured by the inner function below
    return function() {
        count++;
        return count;
    };
}

const counter = makeCounter();
console.log(counter());   // 1
console.log(counter());   // 2 — count kept its value between calls, private to this counter
📝 Each call to makeCounter() creates a brand-new, independent count — closures are how you get private, per-instance state without needing a class.

Timers

const id = setTimeout(() => {
    console.log('Ran once, after 1 second');
}, 1000);

const intervalId = setInterval(() => {
    console.log('Runs every second, forever');
}, 1000);

clearInterval(intervalId);   // stop it — otherwise it never ends on its own

Template literals

const name = "Sam", age = 25;
console.log(`${name} is ${age} years old`);  // backticks + ${} — no more string concatenation

Destructuring

const person = { name: "Ada", age: 30 };
const { name, age } = person;   // pull fields out into variables
console.log(name, age);         // Ada 30

const [first, second] = [10, 20];  // works on arrays too

The DOM

document is a built-in object that links your JS to the actual webpage, so you can read and change what's on screen.

const buttonEl = document.querySelector('.js-subscribe-button');  // CSS-style selector
buttonEl.innerHTML = 'Subscribed';   // replace what's inside an element (parses HTML)

const allButtons = document.querySelectorAll('button');  // every match, as a list

buttonEl.classList.add('is-subscribed');      // toggle a CSS class from JS
buttonEl.classList.remove('is-subscribed');
⚠️ innerHTML parses its string as real HTML (tags and all); innerText sets plain text and also strips extra whitespace when you read it back — they're not interchangeable.

Events

addEventListener is the modern, preferred way to react to user actions — an element can have several listeners, and they can be removed later.

buttonEl.addEventListener('click', () => {
    console.log('Button was clicked!');
});

document.body.addEventListener('keydown', (event) => {
    if (event.key === 'r') {
        console.log('You pressed R');
    }
});
📝 Elements can carry custom data-* HTML attributes (e.g. data-product-id="abc123"), readable in JS as element.dataset.productId — a clean way to attach an ID for an event handler to read back.

JSON

JSON (JavaScript Object Notation) is a text format for data that any language can read — used constantly for sending/storing objects.

const product = { name: 'Shirt', price: 1999 };

const text = JSON.stringify(product);   // '{"name":"Shirt","price":1999}' — object -> string
const back = JSON.parse(text);         // string -> object again
console.log(back.name);   // Shirt

localStorage

Lets a page save small amounts of data in the browser that survives a page refresh — but it only stores strings, so objects need JSON.stringify/parse.

localStorage.setItem('score', JSON.stringify({ wins: 3, losses: 1 }));

const score = JSON.parse(localStorage.getItem('score')) || { wins: 0, losses: 0 };
console.log(score.wins);   // 3

localStorage.removeItem('score');

Modules

Splitting code across files avoids naming collisions between separate <script> tags — each module explicitly declares what it shares.

// cart.js
export function addToCart(productId) { /* ... */ }
export const cart = [];

// main.js
import { addToCart, cart } from './cart.js';
addToCart('abc123');
📝 A file that uses import/export needs <script type="module" src="main.js"></script>, and generally needs to be served over a local dev server rather than opened directly as a file:// path.

Classes & OOP

A class is a blueprint for creating many similar objects, bundling data and behavior together. extends/super let one class build on another.

class Product {
    #internalNote;               // # = truly private, only accessible inside this class

    constructor(name, priceCents) {
        this.name = name;
        this.priceCents = priceCents;
    }
    getPrice() {
        return (this.priceCents / 100).toFixed(2);
    }
}

class Clothing extends Product {      // inherits everything from Product
    constructor(name, priceCents, size) {
        super(name, priceCents);     // must call the parent constructor first
        this.size = size;
    }
}

const shirt = new Clothing('T-Shirt', 1999, 'M');
console.log(shirt.getPrice());          // "19.99" — inherited method
console.log(shirt instanceof Product);  // true
⚠️ Inside a regular method, this refers to the object it was called on — but a plain (non-arrow) callback passed to something like forEach loses that binding. Arrow functions don't have their own this — they inherit it from where they were written, which is why they're the safe default for callbacks inside a class method.

Error handling

try {
    const data = JSON.parse('not valid json');
} catch (error) {
    console.log('Something went wrong: ' + error.message);
} finally {
    console.log('This always runs');
}

function withdraw(balance, amount) {
    if (amount > balance) throw new Error('Insufficient funds');
    return balance - amount;
}

Promises

A Promise represents a value that isn't ready yet, but will "resolve" (succeed) or "reject" (fail) later — the fix for deeply nested callbacks.

const waitOneSecond = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Done waiting!');
    }, 1000);
});

waitOneSecond
    .then((result) => console.log(result))   // runs once resolve() fires
    .catch((error) => console.log(error));   // runs if reject() fires instead

// Promise.all waits for several promises to finish before continuing
Promise.all([waitOneSecond, fetch('/api/data')]).then(results => { /* ... */ });

async / await & fetch

fetch() is the modern, Promise-based way to talk to a server. async/await is syntax sugar over Promises that reads like ordinary top-to-bottom code — the generally preferred style over raw .then() chains.

async function loadOrder(orderId) {
    try {
        const response = await fetch(`/orders/${orderId}`);
        const order = await response.json();
        console.log(order);
    } catch (error) {
        console.log('Unexpected error, please try again later.');
    }
}
📝 await only works inside a function marked async. Prefer async/await > raw Promises > nested callbacks — each step reads top-to-bottom instead of nesting deeper and deeper.

🚀 Practice problems

Runs instantly in your own browser — no server round-trip, same as Python.

Sum an array EASY

const nums = [4, 8, 15, 16, 23, 42];
const sum = nums.reduce((a, b) => a + b, 0);
console.log(sum);

Reverse a string EASY

function reverse(s) {
    return s.split("").reverse().join("");
}
console.log(reverse("javascript"));

Ternary adult/minor checker EASY

const age = 16;
const label = age >= 18 ? 'Adult' : 'Minor';
console.log(label);

Default value with the OR pattern EASY

forEach total calculator EASY

Prime number checker EASY

Palindrome checker EASY

Leap year checker EASY

Digit sum of a number EASY

Vowel counter EASY

Greeting with default parameters EASY

Temperature converter (C to F/K) EASY

Letter grade calculator EASY

Truthy/falsy input sanitizer EASY

Recursive factorial EASY

Filter and map together MEDIUM

const nums = [1, 2, 3, 4, 5, 6, 7, 8];
const result = nums.filter(n => n % 2 === 0).map(n => n * n);
console.log(result.join(","));

Closure counter factory MEDIUM

function makeCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}
const counterA = makeCounter();
const counterB = makeCounter();
console.log(counterA(), counterA(), counterA());   // 1 2 3
console.log(counterB());                            // 1 — totally independent

Class with inheritance MEDIUM

class Animal {
    constructor(name) { this.name = name; }
    speak() { return `${this.name} makes a sound.`; }
}
class Dog extends Animal {
    speak() { return `${this.name} barks.`; }   // overrides the parent method
}
const animals = [new Animal('Generic'), new Dog('Rex')];
animals.forEach(a => console.log(a.speak()));

JSON round-trip MEDIUM

GCD and LCM calculator MEDIUM

Bubble sort an array MEDIUM

Character frequency counter MEDIUM

Armstrong number checker MEDIUM

Destructuring a config object MEDIUM

Filter, map, and reduce pipeline MEDIUM

Closure-based bank account MEDIUM

Circle class with a getArea method MEDIUM

Stack simulation with closures MEDIUM

Anagram checker MEDIUM

Reverse the digits of a number MEDIUM

Count word frequency HARD

function wordCount(text) {
    const counts = {};
    for (const word of text.split(" ")) {
        counts[word] = (counts[word] || 0) + 1;
    }
    return counts;
}
const result = wordCount("the cat sat on the mat the cat ran");
for (const word in result) {
    console.log(`${word}: ${result[word]}`);
}

Promise chain HARD

function fetchUser(id) {
    return new Promise((resolve) => {
        resolve({ id: id, name: 'Ada' });
    });
}
function fetchOrders(user) {
    return new Promise((resolve) => {
        resolve(['order1', 'order2']);
    });
}

fetchUser(1)
    .then((user) => fetchOrders(user))     // returning a promise from .then() chains flatly instead of nesting
    .then((orders) => console.log(orders.length))
    .catch((error) => console.log('Failed: ' + error));

async / await with error handling HARD

function fetchPrice(itemId) {
    return new Promise((resolve, reject) => {
        if (itemId < 0) reject(new Error('Invalid item id'));
        else resolve(1999);
    });
}

async function printTotal(itemId) {
    try {
        const priceCents = await fetchPrice(itemId);
        console.log((priceCents / 100).toFixed(2));
    } catch (error) {
        console.log('Error: ' + error.message);
    }
}
printTotal(1);
printTotal(-1);

Perfect number checker HARD

Pascal's triangle HARD

Builds Pascal's triangle using nested loops and prior-row lookups.

Binary search HARD

Memoized Fibonacci HARD

A closure captures a cache object so repeated calls reuse previously computed Fibonacci values.

Polymorphic shape hierarchy HARD

Save and reload a shopping cart (JSON) HARD

Receipt formatter with template literals HARD

Custom error validation HARD

A custom Error subclass carries a descriptive message through throw/catch.

Promise.all with two synchronous promises HARD

Sequential async/await with rejection handling HARD

runPipeline is awaited fully before the next call starts, so output stays strictly sequential.

Triangle classifier by side lengths HARD

Book class with an availability filter HARD