Home

JavaScript Cheatsheet

📦 Variables (let, const, var)

<script>
// var → function scoped (old way)
// let → block scoped (modern)
// const → cannot be reassigned
var a = 10;
let b = 20;
const c = 30;

console.log(a, b, c);
</script>

💡 Tip: Beginners: prefer let & const. Advanced: use const by default unless reassignment is required.

⚡ Functions (Normal & Arrow)

<script>
// Regular function
function greet(name) {
  return "Hello " + name;
}

// Arrow function
const greetArrow = (name) => `Hello ${name}`;

console.log(greet("Maxon"));
console.log(greetArrow("Poll"));
</script>

💡 Tip: Beginners: start with normal functions. Advanced: use arrow functions for callbacks & concise code.

🌐 DOM Manipulation

<div id="box">Hello</div>
<script>
document.getElementById("box").style.color = "red";
document.querySelector("#box").textContent = "Changed!";
</script>

💡 Tip: Beginners: use getElementById. Advanced: prefer querySelector for flexibility.

🎯 Events

<button id="btn">Click Me</button>

<script>
document.getElementById("btn").addEventListener("click", () => {
  alert("Button Clicked!");
});
</script>

💡 Tip: Beginners: use onclick. Advanced: always use addEventListener for multiple events.

🔁 Loops

<script>
const fruits = ["🍎","🍌","🍊"];

// for loop
for (let i=0; i<fruits.length; i++) {
  console.log(fruits[i]);
}

// for..of
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach
fruits.forEach(f => console.log(f));
</script>

💡 Tip: Beginners: start with for. Advanced: use forEach, map(), reduce().

📘 Objects

<script>
const user = {
  name: "Maxon",
  age: 25,
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

console.log(user.name);
user.greet();
</script>

💡 Tip: Beginners: objects store related data. Advanced: learn destructuring & object shorthand.

📚 Arrays & Methods

<script>
const numbers = [1,2,3,4,5];

console.log(numbers.map(n => n*2)); // [2,4,6,8,10]
console.log(numbers.filter(n => n%2===0)); // [2,4]
console.log(numbers.reduce((a,b) => a+b, 0)); // 15
</script>

💡 Tip: Beginners: use push, pop. Advanced: master map(), filter(), reduce().

⏳ Async / Await

<script>
async function fetchData() {
  try {
    let res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await res.json();
    console.log(data);
  } catch(err) {
    console.error("Error:", err);
  }
}
fetchData();
</script>

💡 Tip: Beginners: start with Promise.then(). Advanced: prefer async/await for cleaner async code.

🚀 ES6+ Features

<script>
// Template literals
const name = "Maxon";
console.log(`Hello, ${name}!`);

// Destructuring
const person = { age: 22, country: "India" };
const { age, country } = person;

// Spread & Rest
const nums = [1,2,3];
const more = [...nums, 4,5];

function sum(...args) { return args.reduce((a,b)=>a+b); }
console.log(sum(1,2,3,4));
</script>

💡 Tip: Beginners: start with let/const. Advanced: use destructuring, spread, rest, template strings.

🏗️ Classes (OOP in JS)

<script>
class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks!`);
  }
}

const d = new Dog("Rocky");
d.speak();
</script>

💡 Tip: Beginners: classes are blueprints. Advanced: use inheritance & static methods.

⚡ Debounce (Performance)

<input type="text" id="search" placeholder="Type here...">

<script>
function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const handleSearch = debounce((e) => {
  console.log("Searching:", e.target.value);
}, 500);

document.getElementById("search").addEventListener("input", handleSearch);
</script>

💡 Tip: Pro: Use debounce for search boxes, API calls, resize events.

⚡ Throttle (Performance)

<script>
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener("scroll", throttle(() => {
  console.log("Scroll event!");
}, 1000));
</script>

💡 Tip: Pro: Throttle limits function execution rate (e.g., scroll, mousemove).

💾 LocalStorage

<script>
// Save
localStorage.setItem("theme", "dark");

// Get
console.log(localStorage.getItem("theme"));

// Remove
localStorage.removeItem("theme");

// Clear all
localStorage.clear();
</script>

💡 Tip: Beginners: use for simple persistence. Pro: wrap in functions for structured storage (objects via JSON).

📦 JavaScript Modules (ES6)

// file: utils.js
export function greet(name) {
  return `Hello, ${name}`;
}

// file: app.js
import { greet } from "./utils.js";
console.log(greet("Maxon"));

💡 Tip: Pro: Organize reusable code with ES6 modules. Use bundlers (Vite, Webpack) for larger apps.

🌐 Fetch API

<script>
// GET request
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

// POST request
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "New Post", body: "Hello" })
});
</script>

💡 Tip: Beginners: use GET. Pro: handle errors, retries, and async/await.

🚨 Error Handling

<script>
try {
  let num = 10 / 0;
  throw new Error("Custom error message");
} catch (err) {
  console.error("Caught:", err.message);
} finally {
  console.log("Always runs");
}
</script>

💡 Tip: Pro: Always use try...catch in async code. Use custom error classes for complex apps.

📘 Set & Map

<script>
// Set (unique values)
const mySet = new Set([1,2,2,3]);
console.log(mySet); // {1,2,3}

// Map (key-value pairs)
const myMap = new Map();
myMap.set("name", "Maxon");
myMap.set("age", 25);
console.log(myMap.get("name"));
</script>

💡 Tip: Pro: Use Set for unique values, Map for key-value storage (better than objects when keys aren’t strings).

🔗 Promises

<script>
const asyncTask = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Done!"), 2000);
});

asyncTask
  .then(msg => console.log(msg))
  .catch(err => console.error(err));
</script>

💡 Tip: Beginners: understand async execution. Pro: chain multiple promises or use Promise.all.

⚙️ Generators

<script>
function* counter() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = counter();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
</script>

💡 Tip: Pro: Use generators for custom iterators & lazy evaluation.

🕵️ Proxy

<script>
const target = { message: "Hello" };

const handler = {
  get(obj, prop) {
    return prop in obj ? obj[prop] : "Not Found";
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // Hello
console.log(proxy.unknown); // Not Found
</script>

💡 Tip: Pro: Use Proxy for validation, logging, or reactive frameworks (Vue.js uses this internally).

Post a Comment