JavaScript Study Guide

📖 Core Concepts ECMAScript – the official standard that all JavaScript engines implement. Dynamic typing – values have types; variables do not. A variable can hold a number now and a string later. Prototype‑based OOP – every object inherits from an internal prototype; class syntax is just sugar over this system. First‑class functions – functions can be stored in variables, passed as arguments, returned from other functions, and have their own properties (.call(), .bind()). Single‑threaded event loop – JavaScript processes one message at a time, creating a call‑stack frame for each; when the stack is empty the next queued message runs (“run‑to‑completion”). Asynchronous constructs – Promise methods (race, all, allSettled, any) and async/await let you write non‑blocking code that looks synchronous. Block scoping – let and const (ES2015) restrict a variable’s visibility to the nearest {} block. Sandbox & Same‑Origin Policy – browsers isolate script execution and forbid a page from reading data from a different origin. --- 📌 Must Remember + operator: concatenates if either operand is a string; otherwise adds numbers. - operator: always converts both operands to numbers before subtraction. var vs let/const: var is function‑scoped and can create an implicit global when omitted; let/const are block‑scoped. new + constructor function → creates an object whose internal prototype is the constructor’s prototype. Object.create(proto) creates an object with proto as its prototype without calling a constructor. Arrow functions: lexical this (inherits this from surrounding scope). async functions always return a Promise. Same‑origin rule: protocol + host + port must match for scripts to access each other’s data. XSS mitigation: sanitize HTML, use a Content Security Policy (CSP). CSRF mitigation: anti‑CSRF tokens, verify Referer header. --- 🔄 Key Processes Event‑Loop Cycle Message queue → pick next message → push call‑stack frame → execute → pop when done → repeat. Promise Resolution (Promise.all) Pass an iterable of promises → returns a new promise that fulfills when all input promises fulfill, or rejects on the first rejection. Creating an object with a constructor function Foo() { … } → new Foo() → creates empty object → sets internal [[Prototype]] to Foo.prototype → runs Foo with this bound to the new object → returns the object. Class syntax translation (syntactic sugar) class A extends B { constructor() { super(); } } → creates function A → sets A.prototype.proto = B.prototype. Variable declaration flow var → hoisted to function top (initialized as undefined). let/const → hoisted but uninitialized (Temporal Dead Zone) until the declaration line. --- 🔍 Key Comparisons var vs let / const var → function‑scoped, hoisted with default undefined. let / const → block‑scoped, hoisted but uninitialized (TDZ). + (addition) vs + (concatenation) If any operand is a string → concatenation. Otherwise → numeric addition. Arrow function vs regular function Arrow: no own this, arguments, super; inherits this lexically. Regular: own this (dynamic based on call), has arguments. Prototype inheritance vs class syntax Prototype: explicit Object.create / proto chains. class: syntactic sugar that still builds the same prototype chain. --- ⚠️ Common Misunderstandings “== does type coercion, === does not” – not covered in outline; stick to === for strict equality to avoid hidden conversions. async functions run in a separate thread – they still run on the single JS thread; they just return a Promise that resolves later. let makes a variable immutable – only const does that; let is mutable but block‑scoped. Object.create(null) creates a normal object – it creates an object without a prototype, so it lacks inherited methods like toString. --- 🧠 Mental Models / Intuition Event Loop = “Mailroom”: each message (task) sits in a queue; the clerk (call stack) handles one at a time, never multitasking. Prototype chain = “Family tree”: look up a property → first check own “genes”; if missing, ask parent, then grandparent, etc. Arrow function this = “Inherited name tag”: it wears the same name tag as the surrounding function, never gets its own. + operator = “Traffic rule”: if a car (operand) carries a sign that says “string”, the whole convoy becomes a string convoy; otherwise they stay numeric. --- 🚩 Exceptions & Edge Cases Implicit globals – assigning to an undeclared identifier creates a property on the global object (window). typeof null returns "object" – historic bug; treat null specially when checking types. Object.create(proto, properties) – can also define property descriptors (enumerable, writable, etc.). Promise.any resolves on the first fulfilled promise, ignoring rejections unless all reject. --- 📍 When to Use Which Choose let vs const – use const for values that never reassign; default to let when reassignment is needed. Use Promise.all when multiple independent async operations must all succeed before proceeding. Use Promise.race to implement time‑outs or take the first result that arrives. Prefer arrow functions for callbacks that need the surrounding this (e.g., array methods). Use class syntax for readability when building hierarchies; fall back to prototype methods for highly dynamic inheritance patterns. --- 👀 Patterns to Recognize “Callback‑Hell → Promise → async/await” progression: if you see nested callbacks, refactor with promises or async/await. Repeated new + constructor → likely a class‑like structure; check prototype methods for shared behavior. fetch(...).then(...).catch(...) → standard pattern for network I/O; look for error handling in the catch. document.querySelector(...).addEventListener(...) → typical DOM‑event binding; ensure the handler is not blocking. --- 🗂️ Exam Traps Choosing var because “it works” – exam may ask which declaration prevents accidental globals; answer: let or const. Assuming + always adds numbers – a string operand flips it to concatenation; watch for mixed‑type expressions. Thinking async creates a new thread – it does not; the code still runs on the single thread, only the continuation is deferred. Confusing Promise.allSettled with Promise.all – allSettled never rejects; it returns status for each promise. Misidentifying the sandbox limitation – the sandbox restricts file system access on the client; it does not prevent network requests to the same origin. ---