JavaScript Notes

JavaScript One Shot Notes 2026 — Complete JS in One Page

Complete JavaScript in one page. One-shot notes covering every JavaScript topic from basics to advanced — variables, functions, OOP, async, DOM, ES6+ for 2026 interviews.

Everything you need to know about JavaScript, organized for maximum retention. Read this once and you'll have a solid mental model of the entire language.

Part 2: Variables & Types

Declaration Keywords

js example

var x = 1;   // function-scoped, hoisted as undefined, legacy
let y = 2;   // block-scoped, TDZ, modern standard
const z = 3; // block-scoped, TDZ, immutable binding

All 8 Data Types

js example

// 7 Primitives (stored by value)
number:    42, 3.14, NaN, Infinity, -Infinity
string:    "hello", 'world', `template`
boolean:   true, false
undefined: declared but not assigned
null:      intentionally empty value
symbol:    Symbol("unique")
bigint:    9007199254740993n

// 1 Object type (stored by reference)
object: {}, [], function(){}, /regex/, new Date()

Checking Types

js example

typeof 42           // "number"
typeof null         // "object" ← BUG
Array.isArray([])   // true
x instanceof Array  // true

Part 3: Operators & Coercion

Equality

js example

1 == "1"          // true  (type coercion — avoid)
1 === "1"         // false (strict — always use this)
null == undefined // true  (special case)
NaN === NaN       // false (use Number.isNaN instead)

Logical Operators

Example

// Short-circuit: returns value, not just true/false "a" || "b" // "a" (first truthy) "" || "b" // "b" (fallback) "a" && "b" // "b" (last if all truthy) null && fn() // null (fn not called) // Nullish coalescing (only null/undefined triggers fallback) null ?? "default" // "default" 0 ?? "default" // 0 (!! difference from ||) "" ?? "default" // "" (!! difference from ||) // Optional chaining user?.address?.city // undefined if any link is null/undefined arr?.[0] // safe array access fn?.() // safe function call

Part 4: Functions — Everything

Example

// 1. Function Declaration — hoisted function add(a, b) { return a + b; } // 2. Function Expression — not hoisted const multiply = function(a, b) { return a * b; }; // 3. Arrow Function — concise, lexical 'this' const square = n => n * n; const greet = (name, greeting = "Hello") => `${greeting}, ${name}!`; // 4. IIFE — Immediately Invoked (function() { /* runs once */ })(); (() => { /* arrow IIFE */ })(); // 5. Generator — can pause/resume function* gen() { yield 1; yield 2; yield 3; } const g = gen(); g.next(); // { value: 1, done: false } // 6. Async Function — returns Promise async function fetchData() { const data = await fetch("/api"); return data.json(); }

Function Parameters

js example

// Default
function greet(name = "World") {}

// Rest (must be last)
function sum(first, ...rest) {}

// Destructured
function user({ name, age = 25 }) {}

// Arguments object (not in arrow functions)
function fn() { console.log(arguments); }

Part 5: Scope & Closures

Scope Types

text example

1. Global Scope    → accessible everywhere
2. Function Scope  → var lives within function
3. Block Scope     → let/const within {}
4. Module Scope    → top-level stays in module

Closure (The King of JS Concepts)

js example

// Closure = function + its lexical environment
function bank(initial) {
  let balance = initial; // PRIVATE
  return {
    deposit(n)  { balance += n; return balance; },
    withdraw(n) { balance = Math.max(0, balance - n); return balance; },
    check()     { return balance; }
  };
}

const account = bank(100);
account.deposit(50);  // 150
account.withdraw(30); // 120
account.check();      // 120
// account.balance → undefined (private!)

Classic Loop Trap

Example

// ❌ var — all share same i for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 3, 3, 3 } // ✅ let — new binding per iteration for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); // 0, 1, 2 }

Part 6: this & Prototypes

this Rules

text example

1. Default:  standalone fn → window (non-strict) / undefined (strict)
2. Method:   obj.fn() → obj
3. new:      new Fn() → new instance
4. Explicit: .call(ctx), .apply(ctx), .bind(ctx) → ctx
5. Arrow:    inherits from lexical scope

Prototype Chain

text example

instance
   → Constructor.prototype (shared methods)
      → Object.prototype (toString, hasOwnProperty...)
         → null

js example

// Constructor pattern
function Animal(name) { this.name = name; } // own property
Animal.prototype.speak = function() { return this.name; }; // shared

// Modern ES6 class
class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name; }
}

class Dog extends Animal {
  constructor(name) { super(name); }
  bark() { return "Woof!"; }
}

Part 7: Arrays — Essential Methods

Mutating

text example

push(x)        — add to end
pop()          — remove from end
unshift(x)     — add to start
shift()        — remove from start
splice(i,n,x)  — remove/insert at index
sort(fn)       — sort in-place
reverse()      — reverse in-place
fill(x,s,e)    — fill with value

Non-Mutating

text example

slice(s,e)         — extract portion
concat(arr)        — join arrays
map(fn)            — transform each
filter(fn)         — keep matching
reduce(fn, init)   — accumulate
find(fn)           — first match
findIndex(fn)      — index of first match
some(fn)           — any match?
every(fn)          — all match?
includes(x)        — contains?
indexOf(x)         — first index
flat(depth)        — flatten
flatMap(fn)        — map + flatten 1 level

Part 8: Objects — Essential Operations

Example

// Create const obj = { a: 1, b: 2 }; const obj2 = new Object({ a: 1 }); const obj3 = Object.create(proto); // Read obj.a // dot notation obj["a"] // bracket notation const { a } = obj; // destructuring // Add/Update obj.c = 3; Object.assign(obj, { d: 4 }); const merged = { ...obj, e: 5 }; // Delete delete obj.a; // Iterate Object.keys(obj) // ["b", "c", "d", "e"] Object.values(obj) // [2, 3, 4, 5] Object.entries(obj) // [["b",2], ...] for (const key in obj) {} // includes prototype keys! // Check "b" in obj // true (includes prototype) obj.hasOwnProperty("b") // true (own only) // Clone const shallow = { ...obj }; const deep = structuredClone(obj); // ES2022 // Freeze / Seal Object.freeze(obj) // no changes at all (shallow) Object.seal(obj) // no add/delete, can modify

Part 9: Promises & Async/Await

Promise Basics

Example

// Create const p = new Promise((resolve, reject) => { // executor runs SYNCHRONOUSLY setTimeout(() => resolve("data"), 1000); }); // Consume p.then(data => console.log(data)) .catch(err => console.error(err)) .finally(() => console.log("done")); // Static methods Promise.resolve("instant value") Promise.reject(new Error("instant fail")) Promise.all([p1, p2]) // all or fail fast Promise.allSettled([p1, p2]) // wait for all Promise.race([p1, p2]) // first to settle Promise.any([p1, p2]) // first to fulfill

async/await

Example

async function fn() { // async always returns a Promise const data = await fetchSomething(); // pauses fn return data; // resolves the Promise } // Error handling async function safe() { try { return await riskyOperation(); } catch (err) { console.error(err.message); return null; } } // Parallel const [a, b] = await Promise.all([fetch1(), fetch2()]); // Sequential const a = await step1(); const b = await step2(a);

Part 10: ES6+ Features

Destructuring

Example

// Array const [a, b, ...rest] = [1, 2, 3, 4, 5]; const [,, third] = arr; // skip with commas // Object const { name, age = 25, city: location } = user; const { a: { b: deepVal } } = nested; // Swap [x, y] = [y, x]; // Function params function fn({ name, role = "user" } = {}) {}

Spread & Rest

Example

// Spread (expand) const arr2 = [...arr1, ...arr3]; const obj2 = { ...obj1, override: "value" }; Math.max(...numbers); // Rest (collect) function fn(first, ...rest) {} const { a, ...remaining } = obj;

Map, Set, WeakMap, WeakSet

Example

// Map — any key type, preserves insertion order const map = new Map(); map.set("key", "value"); map.set(obj, "object as key!"); map.get("key"); map.has("key"); map.size; // Set — unique values const set = new Set([1, 2, 2, 3, 3]); // Set {1, 2, 3} [...new Set(arr)] // deduplicate array // WeakMap/WeakSet — keys are weakly held (GC-friendly) // Use for: private data, caching, DOM associations

Part 11: Classes (ES6+)

Example

class EventEmitter { #listeners = {}; // private field (ES2022) on(event, fn) { (this.#listeners[event] ??= []).push(fn); return this; } emit(event, ...args) { this.#listeners[event]?.forEach(fn => fn(...args)); return this; } static create() { return new EventEmitter(); } } class SpecialEmitter extends EventEmitter { constructor() { super(); this.type = "special"; } } const emitter = new SpecialEmitter(); emitter.on("click", data => console.log("Clicked:", data)); emitter.emit("click", { x: 100, y: 200 });

Output

Clicked: { x: 100, y: 200 }

Part 12: Error Handling

Example

// Basic try { const json = JSON.parse("bad json"); } catch (err) { if (err instanceof SyntaxError) { console.log("Parse error:", err.message); } else { throw err; // re-throw unexpected errors } } finally { cleanup(); // always runs } // Custom errors class AppError extends Error { constructor(message, code, statusCode = 500) { super(message); this.name = "AppError"; this.code = code; this.statusCode = statusCode; } } // Async error handling process.on("unhandledRejection", (reason) => { console.error("Unhandled:", reason); }); window.addEventListener("unhandledrejection", (e) => { console.error(e.reason); });

Part 13: DOM Essentials

Example

// Query document.querySelector("#id") document.querySelectorAll(".class") element.closest(".parent") // traverse up // Modify element.textContent = "text"; element.innerHTML = "<b>html</b>"; element.setAttribute("data-id", "1"); element.dataset.id // access data- attributes element.classList.add/remove/toggle/contains/replace // Events element.addEventListener("click", handler, { once: true }); element.removeEventListener("click", handler); // Event delegation (efficient) document.body.addEventListener("click", (e) => { if (e.target.matches(".btn")) handleButtonClick(e); }); // Create & insert const el = document.createElement("div"); parent.append(el); // after last child parent.prepend(el); // before first child sibling.before(el); // before sibling sibling.after(el); // after sibling el.remove(); // remove self

Part 14: Modules

js example

// Named exports
export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator {}

// Default export (one per file)
export default class App {}

// Import
import { PI, add } from "./math.js";
import App from "./app.js";
import * as Math from "./math.js";
import { add as sum } from "./math.js";

// Dynamic import (lazy loading)
const module = await import("./heavy.js");
module.default();

One-Shot Memory Map 🗺️

Example

JAVASCRIPT ├── Types: number, string, boolean, null, undefined, symbol, bigint, object ├── Scope: global → function → block → module ├── Hoisting: var(undefined), function(full), let/const(TDZ) ├── Closures: function + lexical env → private state ├── this: default/method/new/explicit/arrow ├── Prototype: [[Proto]] chain → inherited methods ├── Async: │ ├── Callbacks → Promises → async/await │ └── Event Loop: sync → microtasks → macrotasks ├── ES6+: class, arrow, destructure, spread, Map/Set, modules └── Patterns: closure, module, factory, observer, memoize, curry

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for JavaScript One Shot Notes 2026 — Complete JS in One Page.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, notes, one, shot

Continue learning this concept

NotesJavaScript Cheat Sheet 2026 — Complete Quick ReferenceA 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.NotesImportant 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.NotesJavaScript 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.Mini 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.Advanced JavascriptJavaScript apply() Method - Complete Guide with ExamplesMaster JavaScript apply() method with syntax, this binding, array arguments, function borrowing, real-world use cases, common mistakes, and interview Q&A.Advanced JavascriptJavaScript bind() Method - Complete Guide with ExamplesMaster JavaScript bind() with permanent this binding, partial application, event handlers, currying patterns, common mistakes, and top interview Q&A.

PreviousImportant JavaScript Concepts Every Developer Must Know in 2026 NextJavaScript Quick Revision Notes — Interview Prep in 30 Minutes 2026