📋 JavaScript Cheatsheet

// Variables let x = "mutable"; const y = "immutable"; var z = "avoid"; // Output console.log("Hello"); console.error("Error!"); console.table(data); // Template literals const name = `Hello ${user}`;

// Primitives typeof "abc" // "string" typeof 123 // "number" typeof true // "boolean" typeof {} // "object" typeof [] // "object" typeof null // "object" (bug) typeof undefined // "undefined" // Check array Array.isArray([]); // true // Convert types String(123); // "123" Number("123"); // 123 Boolean(1); // true

const arr = ["a", "b", "c"]; // Methods arr.push("d"); // Add end arr.pop(); // Remove end arr.shift(); // Remove start arr.unshift("z"); // Add start // Iterate arr.forEach(item => console.log(item)); arr.map(x => x * 2); arr.filter(x => x > 0); arr.reduce((a, b) => a + b, 0); arr.find(x => x.id === 1); arr.includes("a"); // Slice/Splice arr.slice(0, 2); // [0,2) - copy arr.splice(1, 2); // at 1, remove 2 // Sort arr.sort((a, b) => a - b);

const obj = { name: "John", age: 30, greet() { return "Hi"; } }; // Access obj.name; // "John" obj["age"]; // 30 obj?.address?.city; // undefined (safe) // Methods Object.keys(obj); // ["name", "age"] Object.values(obj); // ["John", 30] Object.entries(obj); // [["name","John"],...] Object.assign({}, obj); // Copy // Spread (shallow copy) const copy = { ...obj }; // Destructure const { name, age } = obj;

// Declaration function add(a, b) { return a + b; } // Expression const multiply = function(a, b) { return a * b; }; // Arrow function const square = x => x * x; const sum = (a, b) => a + b; // Default params function greet(name = "Guest") { return `Hello ${name}`; } // Rest params function sumAll(...numbers) { return numbers.reduce((a,b) => a+b); } // IIFE (function() { // Runs immediately })();

// Destructuring const [a, b] = ["x", "y"]; const {x, y} = {x: 1, y: 2}; // Spread const arr = [1, 2, ...[3, 4]]; const obj = { a: 1, ...{b: 2} }; // Template literals const msg = `Value: ${value}`; // Optional chaining user?.profile?.name; // Nullish coalescing const val = input ?? "default"; // Short circuit const result = data || []; const callback = fn || noop; // Classes class Person { constructor(name) { this.name = name; } greet() { return `Hi, I'm ${this.name}`; } }

// Promise const promise = new Promise((resolve, reject) => { if (success) resolve(data); else reject(error); }); promise .then(result => console.log(result)) .catch(err => console.error(err)) .finally(() => /* cleanup */); // Async/Await async function fetchData() { try { const res = await fetch(url); const data = await res.json(); return data; } catch (err) { console.error(err); } } // Promise.all const [users, posts] = await Promise.all([ fetch('/users'), fetch('/posts') ]);

// Select document.getElementById("id"); document.querySelector(".class"); document.querySelectorAll("div"); // Modify element.textContent = "text"; element.innerHTML = "<b>HTML</b>"; element.style.color = "red"; element.classList.add("active"); element.classList.remove("hidden"); element.classList.toggle("dark"); // Create const div = document.createElement("div"); parent.appendChild(div); parent.removeChild(child); // Events element.addEventListener("click", handler); element.removeEventListener("click", handler);

// Debounce const debounce = (fn, delay) => { let id; return (...args) => { clearTimeout(id); id = setTimeout(() => fn(...args), delay); }; }; // Throttle const throttle = (fn, limit) => { let inThrottle; return (...args) => { if (!inThrottle) { fn(...args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }; // Deep clone (simple) const deepClone = obj => JSON.parse(JSON.stringify(obj)); // Generate ID const uuid = () => crypto.randomUUID();