JavaScript Notes

JavaScript Cheat Sheet 2026 — Complete Quick Reference

A comprehensive JavaScript cheat sheet covering variables, data types, operators, strings, arrays, objects, functions, control flow, DOM, events, async programming, ES6+ features, error handling, and useful patterns. Perfect quick reference for beginners and experienced developers.

This is a comprehensive JavaScript quick-reference. Each section contains concise code snippets with their output — a perfect guide for revision and interviews.

2. Data Types

JavaScript has 8 data types — 7 primitives + 1 non-primitive:

js example

// Primitives
let str = "Hello";          // String
let num = 42;               // Number
let big = 9007199254740993n; // BigInt
let bool = true;            // Boolean
let undef = undefined;      // Undefined
let nul = null;             // Null
let sym = Symbol("id");     // Symbol

// Non-primitive
let obj = { key: "value" }; // Object (arrays, functions bhi objects hain)

// typeof operator
console.log(typeof str);    // "string"
console.log(typeof num);    // "number"
console.log(typeof bool);   // "boolean"
console.log(typeof undef);  // "undefined"
console.log(typeof nul);    // "object" (JS bug — legacy reason)
console.log(typeof sym);    // "symbol"
console.log(typeof obj);    // "object"
console.log(typeof big);    // "bigint"

Output

string
number
boolean
undefined
object
symbol
object
bigint

js example

// Type Conversion
console.log(Number("42"));      // 42
console.log(String(123));       // "123"
console.log(Boolean(0));        // false
console.log(Boolean("hello"));  // true
console.log(parseInt("3.14"));  // 3
console.log(parseFloat("3.14")); // 3.14

Output

42
123
false
true
3
3.14

3. Operators

Arithmetic

js example

console.log(10 + 3);   // 13
console.log(10 - 3);   // 7
console.log(10 * 3);   // 30
console.log(10 / 3);   // 3.333...
console.log(10 % 3);   // 1 (remainder)
console.log(2 ** 3);   // 8 (exponent)

Output

13
7
30
3.3333333333333335
1
8

Comparison

js example

console.log(5 == "5");    // true  (loose — type coercion)
console.log(5 === "5");   // false (strict — no coercion)
console.log(5 != "5");    // false
console.log(5 !== "5");   // true
console.log(10 > 5);     // true
console.log(10 <= 10);   // true

Output

true
false
false
true
true
true

Logical

Example

console.log(true && false); // false console.log(true || false); // true console.log(!true); // false // Short-circuit evaluation let user = null; console.log(user && user.name); // null (stops at falsy) console.log(user || "Guest"); // "Guest" (returns first truthy)

Output

false
true
false
null
Guest

Ternary & Assignment

js example

let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade);

// Assignment operators
let x = 10;
x += 5;  // x = 15
x -= 3;  // x = 12
x *= 2;  // x = 24
x /= 4;  // x = 6
x **= 2; // x = 36
console.log(x);

Output

B
36

4. Strings — Key Methods

Example

let str = "Hello, JavaScript!"; console.log(str.length); // 18 console.log(str.toUpperCase()); // "HELLO, JAVASCRIPT!" console.log(str.toLowerCase()); // "hello, javascript!" console.log(str.indexOf("Java")); // 7 console.log(str.includes("Script")); // true console.log(str.slice(7, 17)); // "JavaScript" console.log(str.replace("Hello", "Hi")); // "Hi, JavaScript!" console.log(str.split(", ")); // ["Hello", "JavaScript!"] console.log(str.trim()); // "Hello, JavaScript!" (removes whitespace) console.log(str.startsWith("Hello")); // true console.log(str.endsWith("!")); // true console.log(str.repeat(2)); // "Hello, JavaScript!Hello, JavaScript!" console.log(str.at(-1)); // "!"

Output

18
HELLO, JAVASCRIPT!
hello, javascript!
7
true
JavaScript
Hi, JavaScript!
["Hello", "JavaScript!"]
Hello, JavaScript!
true
true
Hello, JavaScript!Hello, JavaScript!
!

Template Literals

js example

let name = "Rahul";
let age = 22;
let msg = `My name is ${name} and I am ${age} years old.`;
console.log(msg);

// Multi-line
let html = `
<div>
  <h1>${name}</h1>
</div>`;
console.log(html.trim());

Output

My name is Rahul and I am 22 years old.
<div>
  <h1>Rahul</h1>
</div>

5. Arrays — Key Methods

Example

let arr = [1, 2, 3, 4, 5]; // Add / Remove arr.push(6); // end mein add → [1,2,3,4,5,6] arr.pop(); // end se remove → [1,2,3,4,5] arr.unshift(0); // start mein add → [0,1,2,3,4,5] arr.shift(); // start se remove → [1,2,3,4,5] arr.splice(2, 1, 99); // index 2 pe 1 remove, 99 add → [1,2,99,4,5] console.log(arr);

Output

[1, 2, 99, 4, 5]

Iteration Methods

Example

let nums = [1, 2, 3, 4, 5]; // map — transform each element let doubled = nums.map(n => n * 2); console.log(doubled); // filter — keep elements matching condition let evens = nums.filter(n => n % 2 === 0); console.log(evens); // reduce — accumulate to single value let sum = nums.reduce((acc, n) => acc + n, 0); console.log(sum); // find — first match let found = nums.find(n => n > 3); console.log(found); // findIndex console.log(nums.findIndex(n => n > 3)); // some / every console.log(nums.some(n => n > 4)); // true (at least one) console.log(nums.every(n => n > 0)); // true (all) // forEach nums.forEach(n => process.stdout.write(n + " "));

Output

[2, 4, 6, 8, 10]
[2, 4]
15
4
3
true
true
1 2 3 4 5

More Array Methods

Example

let arr = [3, 1, 4, 1, 5, 9]; console.log(arr.sort((a, b) => a - b)); // [1, 1, 3, 4, 5, 9] console.log(arr.reverse()); // [9, 5, 4, 3, 1, 1] console.log(arr.includes(5)); // true console.log(arr.flat()); // flattens nested arrays console.log([1, [2, [3]]].flat(Infinity)); // [1, 2, 3] console.log(Array.from("hello")); // ['h','e','l','l','o'] console.log([...new Set([1,1,2,3,3])]); // [1, 2, 3] — remove duplicates

Output

[1, 1, 3, 4, 5, 9]
[9, 5, 4, 3, 1, 1]
true
[9, 5, 4, 3, 1, 1]
[1, 2, 3]
['h', 'e', 'l', 'l', 'o']
[1, 2, 3]

6. Objects

Example

// Object creation let person = { name: "Amit", age: 28, greet() { return `Hi, I'm ${this.name}`; } }; console.log(person.name); // "Amit" console.log(person["age"]); // 28 console.log(person.greet()); // "Hi, I'm Amit" // Add / Modify / Delete person.city = "Delhi"; person.age = 29; delete person.city; console.log(Object.keys(person)); // ["name", "age", "greet"] console.log(Object.values(person)); // ["Amit", 29, ƒ] console.log(Object.entries(person)); // [["name","Amit"],["age",29],["greet",ƒ]]

Output

Amit
28
Hi, I'm Amit
["name", "age", "greet"]
["Amit", 29, ƒ]
[["name", "Amit"], ["age", 29], ["greet", ƒ]]

Object Methods

js example

// Object.assign — shallow copy / merge
let a = { x: 1 };
let b = { y: 2 };
let merged = Object.assign({}, a, b);
console.log(merged); // { x: 1, y: 2 }

// Spread merge (preferred)
let merged2 = { ...a, ...b, z: 3 };
console.log(merged2); // { x: 1, y: 2, z: 3 }

// Object.freeze — immutable
let config = Object.freeze({ api: "https://api.example.com" });
config.api = "changed"; // silently fails
console.log(config.api);

// Check property
console.log("x" in a);               // true
console.log(a.hasOwnProperty("x"));  // true

Output

{ x: 1, y: 2 }
{ x: 1, y: 2, z: 3 }
https://api.example.com
true
true

7. Functions

Function Declaration & Expression

js example

// Declaration (hoisted)
function add(a, b) {
  return a + b;
}
console.log(add(3, 4)); // 7

// Expression (NOT hoisted)
const multiply = function(a, b) {
  return a * b;
};
console.log(multiply(3, 4)); // 12

// Default parameters
function greet(name = "Guest") {
  return `Hello, ${name}!`;
}
console.log(greet());       // "Hello, Guest!"
console.log(greet("Priya")); // "Hello, Priya!"

Output

7
12
Hello, Guest!
Hello, Priya!

Arrow Functions

Example

// Basic arrow function const square = (x) => x * x; console.log(square(5)); // 25 // Multiple params const sum = (a, b) => a + b; console.log(sum(10, 20)); // 30 // Multi-line body (need explicit return) const factorial = (n) => { if (n <= 1) return 1; return n * factorial(n - 1); }; console.log(factorial(5)); // 120 // Arrow vs regular — `this` context const obj = { name: "JS", regular: function() { return this.name; }, arrow: () => this.name // `this` refers to outer scope, NOT obj }; console.log(obj.regular()); // "JS" console.log(obj.arrow()); // undefined

Output

25
30
120
JS
undefined

IIFE (Immediately Invoked Function Expression)

Example

// Classic IIFE — runs immediately, creates private scope (function() { let secret = "hidden"; console.log("IIFE executed:", secret); })(); // Arrow IIFE (() => { console.log("Arrow IIFE"); })(); // IIFE with return value const result = (() => { return 42; })(); console.log(result);

Output

IIFE executed: hidden
Arrow IIFE
42

8. Control Flow

if / else if / else

js example

let temp = 35;

if (temp > 40) {
  console.log("It is very hot! 🥵");
} else if (temp > 30) {
  console.log("Garmi hai ☀️");
} else if (temp > 20) {
  console.log("Suhana mausam 🌤️");
} else {
  console.log("Thanda hai ❄️");
}

Output

Garmi hai ☀️

for Loops

Example

// Classic for for (let i = 0; i < 3; i++) { process.stdout.write(i + " "); } console.log(); // for...of (arrays, strings — iterable values) for (let char of "Hi") { process.stdout.write(char + " "); } console.log(); // for...in (object keys) let car = { brand: "Tesla", year: 2026 }; for (let key in car) { console.log(`${key}: ${car[key]}`); }

Output

0 1 2
H i
brand: Tesla
year: 2026

while & do...while

Example

// while let i = 0; while (i < 3) { process.stdout.write(i + " "); i++; } console.log(); // do...while — executes at least once let j = 10; do { console.log("j =", j); j++; } while (j < 10);

Output

0 1 2
j = 10

switch

Example

let day = "Monday"; switch (day) { case "Monday": case "Tuesday": case "Wednesday": case "Thursday": case "Friday": console.log("Working day 💼"); break; case "Saturday": case "Sunday": console.log("Weekend 🎉"); break; default: console.log("Invalid day"); }

Output

Working day 💼

9. DOM Manipulation

Selectors

Example

// Select elements const el1 = document.getElementById("app"); const el2 = document.querySelector(".card"); // first match const el3 = document.querySelectorAll(".item"); // all matches (NodeList) const el4 = document.getElementsByClassName("btn"); // HTMLCollection const el5 = document.getElementsByTagName("p"); // querySelectorAll returns NodeList — iterate with forEach document.querySelectorAll("li").forEach(li => { console.log(li.textContent); });

Create, Modify & Remove

js example

// Create element
const div = document.createElement("div");
div.textContent = "Hello World";
div.className = "card";
div.id = "myCard";
div.setAttribute("data-id", "123");
div.style.color = "blue";
div.style.padding = "1rem";

// Append to DOM
document.body.appendChild(div);

// Insert before
const parent = document.getElementById("list");
const newItem = document.createElement("li");
newItem.textContent = "New Item";
parent.insertBefore(newItem, parent.firstChild);

// Remove
const old = document.getElementById("old");
old.remove(); // modern
// old.parentNode.removeChild(old); // legacy

// innerHTML vs textContent
el.innerHTML = "<strong>Bold</strong>"; // parses HTML
el.textContent = "<strong>Bold</strong>"; // plain text (safer)

Class & Attribute Manipulation

js example

const box = document.querySelector(".box");

// Classes
box.classList.add("active", "visible");
box.classList.remove("hidden");
box.classList.toggle("dark-mode");
console.log(box.classList.contains("active")); // true

// Attributes
box.setAttribute("role", "button");
console.log(box.getAttribute("role")); // "button"
box.removeAttribute("role");
console.log(box.dataset.userId); // reads data-user-id attribute

Output

true
button

10. Events

Example

// addEventListener (recommended) const btn = document.querySelector("#btn"); btn.addEventListener("click", (e) => { console.log("Clicked!", e.target.tagName); }); // Event with options btn.addEventListener("click", handler, { once: true }); // fires only once // Remove event function handler(e) { console.log("Handled"); } btn.addEventListener("click", handler); btn.removeEventListener("click", handler); // Event Delegation — handle child events on parent document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("Clicked item:", e.target.textContent); } }); // Prevent default & stop propagation const link = document.querySelector("a"); link.addEventListener("click", (e) => { e.preventDefault(); // link will not navigate e.stopPropagation(); // event won't reach the parent });

Common Events

Example

// Keyboard document.addEventListener("keydown", (e) => { console.log(`Key: ${e.key}, Code: ${e.code}`); }); // Form const form = document.querySelector("form"); form.addEventListener("submit", (e) => { e.preventDefault(); const data = new FormData(form); console.log(data.get("email")); }); // Input (real-time) const input = document.querySelector("input"); input.addEventListener("input", (e) => { console.log(e.target.value); }); // Load & DOMContentLoaded document.addEventListener("DOMContentLoaded", () => { console.log("DOM ready!"); }); window.addEventListener("load", () => { console.log("All resources loaded!"); });

11. Async JavaScript

Callbacks

Example

function fetchData(callback) { setTimeout(() => { callback("Data received!"); }, 1000); }

Continue the lesson path

Study next in this module

4 connected lessons

01NotesImportant JavaScript Concepts Every Developer Must Know in 2026Master the most important JavaScript concepts: closures, hoisting, prototype, event loop, scope, async/await, coercion, and ES6+. Deeply explained with examples and output.02NotesJavaScript One Shot Notes 2026 — Complete JS in One PageComplete JavaScript in one page. One-shot notes covering every JavaScript topic from basics to advanced — variables, functions, OOP, async, DOM, ES6+ for 2026 interviews.03NotesJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026Complete JavaScript quick revision notes covering all important concepts for interviews and exams. Rapid-fire key concepts with code examples and outputs for last-minute preparation.04Mini ProjectsBuild a JavaScript Notes App - Step by Step Project TutorialLearn to build a notes app in JavaScript with create, edit, delete, search, pin, and localStorage persistence. Covers markdown preview and color coding.

PreviousJavaScript Weather App Project — Fetch API & DOM Complete Tutorial 2026 NextImportant JavaScript Concepts Every Developer Must Know in 2026