JavaScript Cheat Sheet

console.log("Hello, World!");

// Single line comment
/* Multi-line
   comment */

const name = prompt("Enter your name:");

Number("42")   // str to number
String(42)     // number to str
Boolean(1)     // to boolean

typeof variable  // "string", "number"
Array.isArray(arr)  // true/false

let name = "John";

const PI = 3.14159;

const fruits = ["apple", "banana", "cherry"];

const person = { name: "John", age: 30 };

const greeting = `Hello, ${name}!`;

const { name, age } = person;

const newArr = [...arr1, ...arr2];

let empty = null;
let notDefined = undefined;

5 + 3   // 8 (addition)
5 - 3   // 2 (subtraction)
5 * 3   // 15 (multiplication)
5 / 3   // 1.666... (division)
5 % 3   // 2 (modulus)
5 ** 3  // 125 (exponent)
let x = 5; x++  // 6 (increment)

5 == "5"   // true (loose, coerces types)
5 === "5"  // false (strict, no coercion)
5 != "5"   // false
5 !== "5"  // true
5 > 3      // true
5 <= 5     // true

true && false   // false (AND)
true || false   // true (OR)
!true           // false (NOT)
null ?? "default"  // "default" (nullish)

let x = 5   // Assign
x += 3      // x = 8 (add)
x -= 2      // x = 6 (subtract)
x *= 2      // x = 12 (multiply)
x /= 3      // x = 4 (divide)
x ??= 10    // x = 4 (nullish assign)

const age = 20;
const status = age >= 18 ? "adult" : "minor";
// status = "adult"

const user = { profile: { name: "John" } };
user?.profile?.name    // "John"
user?.address?.city    // undefined (no error)
user?.getName?.()      // undefined if no method

5 & 3   // 1 (AND: 101 & 011)
5 | 3   // 7 (OR: 101 | 011)
5 ^ 3   // 6 (XOR)
~5      // -6 (NOT)
5 << 1  // 10 (left shift)
5 >> 1  // 2 (right shift)

for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

for (const item of array) {
    console.log(item);
}

for (const key in object) {
    console.log(key, object[key]);
}

array.forEach((item, index) => {
    console.log(index, item);
});

while (count < 10) {
    count++;
}

do {
    count++;
} while (count < 10);

for (let i = 0; i < 10; i++) {
    if (i === 5) break;
}

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

for (const [i, val] of arr.entries()) {
    console.log(i, val);
}

for (const [key, val] of map) {
    console.log(key, val);
}

if (x > 0) {
    console.log("positive");
} else if (x < 0) {
    console.log("negative");
} else {
    console.log("zero");
}

const result = condition ? "yes" : "no";

switch (day) {
    case "Mon":
        console.log("Monday");
        break;
    default:
        console.log("Other");
}

const name = user ?? "Guest";
const len = str?.length ?? 0;

isValid && doSomething();
isEmpty || setDefault();

function greet(name) {
    return `Hello, ${name}!`;
}

const greet = (name) => `Hello, ${name}!`;

function greet(name = "World") {
    return `Hello, ${name}!`;
}

function sum(...nums) {
    return nums.reduce((a, b) => a + b, 0);
}

const doubled = nums.map(n => n * 2);

const evens = nums.filter(n => n % 2 === 0);

const sum = nums.reduce((a, b) => a + b, 0);

const found = users.find(u => u.id === 1);

const hasNeg = nums.some(n => n < 0);

nums.sort((a, b) => a - b);

const promise = new Promise((resolve, reject) => {
    resolve("success");
});

async function fetchData() {
    const res = await fetch(url);
    return await res.json();
}

try {
    const data = await fetchData();
} catch (error) {
    console.error(error);
}

const results = await Promise.all([p1, p2, p3]);

const el = document.querySelector(".class");

const els = document.querySelectorAll("div");

el.addEventListener("click", (e) => {});

const div = document.createElement("div");

parent.appendChild(child);

export const name = "John";

export default function greet() {}

import { name } from "./module.js";

import greet from "./module.js";

class Person {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Hello, ${this.name}!`;
    }
}

class Employee extends Person {
    constructor(name, role) {
        super(name);
        this.role = role;
    }

    describe() {
        return `${this.name} is a ${this.role}`;
    }
}

class MathUtils {
    static add(a, b) {
        return a + b;
    }

    static PI = 3.14159;
}

MathUtils.add(2, 3);  // 5

class Circle {
    constructor(radius) {
        this._radius = radius;
    }

    get radius() {
        return this._radius;
    }

    set radius(value) {
        this._radius = Math.max(0, value);
    }

    get area() {
        return Math.PI * this._radius ** 2;
    }
}

class Counter {
    #count = 0;  // Private field

    increment() {
        this.#count++;
    }

    get value() {
        return this.#count;
    }
}

const map = new Map();
map.set("key", "value");
map.get("key");     // "value"
map.has("key");     // true
map.delete("key");
map.size;           // 0

const map = new Map([
    ["a", 1],
    ["b", 2]
]);

// Iterate
for (const [key, val] of map) {
    console.log(key, val);
}

const set = new Set([1, 2, 2, 3]);
set.add(4);
set.has(2);       // true
set.delete(2);
set.size;         // 3

// Unique array
[...new Set([1, 1, 2, 2, 3])]  // [1, 2, 3]

// Keys must be objects, garbage collected
const cache = new WeakMap();
const obj = {};
cache.set(obj, "data");
cache.get(obj);  // "data"

// Values must be objects, garbage collected
const seen = new WeakSet();
const obj = {};
seen.add(obj);
seen.has(obj);  // true

function* countUp() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = countUp();
gen.next();  // { value: 1, done: false }
gen.next();  // { value: 2, done: false }

function* infiniteSequence() {
    let i = 0;
    while (true) {
        yield i++;
    }
}

const gen = infiniteSequence();
gen.next().value;  // 0
gen.next().value;  // 1

function* range(start, end) {
    for (let i = start; i <= end; i++) {
        yield i;
    }
}

for (const num of range(1, 5)) {
    console.log(num);  // 1, 2, 3, 4, 5
}

function* concat(a, b) {
    yield* a;
    yield* b;
}

const result = [...concat([1, 2], [3, 4])];
// [1, 2, 3, 4]

const id = Symbol("id");
const obj = {
    [id]: 123,
    name: "test"
};

obj[id];  // 123
Object.keys(obj);  // ["name"] (symbol hidden)

// Make object iterable
const obj = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
    }
};

[...obj];  // [1, 2]

const big = 9007199254740991n;
const alsoBig = BigInt("9007199254740991");

big + 1n;    // 9007199254740992n
big * 2n;    // 18014398509481982n

// Cannot mix with regular numbers
// big + 1;  // TypeError

const handler = {
    get(target, prop) {
        return prop in target ? target[prop] : "default";
    }
};

const proxy = new Proxy({}, handler);
proxy.anything;  // "default"