30:"/_next/static/chunks/1xow4ra8nb-ek.js" 31:"/_next/static/chunks/2z2o31cylkf97.js" 32:"/_next/static/chunks/04zylv59e9ncy.js" 33:"/_next/static/chunks/0l8fy-a7jafrg.js" 34:"/_next/static/chunks/1em5v-0g_u4q8.js" 35:I[674021,["$1","$2","$3","$4","$5","$6","$7","$30","$31","$32","$33","$34"],"BlogPostClient"] 36:T19a54,## From Beginner to Expert Level # Table of Contents 1. **Beginner Level: JavaScript Fundamentals** - Introduction to JavaScript - Data Types and Variables - Operators and Expressions - Control Flow - Functions and Scope 2. **Intermediate Level: Objects, Arrays, and DOM** - Objects and Arrays - DOM Manipulation and Events - ES6+ Features 3. **Advanced Level: OOP and Advanced Patterns** - Object-Oriented Programming - Advanced Arrays and Objects - Memory and Performance 4. **Expert Level: Internals and Real-World Patterns** - JavaScript Internals - Design Patterns - Advanced Topics 5. **Interview Questions and Answers** 6. **Practical Exercises** 7. **Final Revision Checklist** --- # Part 1: Beginner Level — JavaScript Fundamentals --- ## 1. Introduction to JavaScript ### What is JavaScript? JavaScript (JS) is a high-level, interpreted programming language primarily used for web development. It enables dynamic behavior in web pages — interactivity, animations, data manipulation, and much more. **Simple definition:** JavaScript is the programming language that makes websites interactive. ### Why Does JavaScript Exist? JavaScript was created to make web pages dynamic and interactive, extending beyond static HTML and CSS. Without JavaScript, web pages would only display content — no clicking, no animations, no real-time updates. ### Where to Use JavaScript - **Web browsers (client-side):** Interactivity, DOM manipulation, form validation - **Node.js (server-side):** Backend APIs, file handling, real-time servers - **Mobile apps:** React Native, Ionic - **Desktop apps:** Electron - **Game development:** Browser games, Phaser.js ### Where NOT to Use JavaScript - Low-level hardware programming (use C/C++) - Real-time system programming without specific environments - CPU-intensive tasks without Web Workers (blocks UI) ### Common Mistakes - Confusing JavaScript with Java (they are completely different languages) - Thinking JavaScript is only for frontend - Ignoring type coercion pitfalls ### Best Practices - Keep code modular - Use `const` and `let` instead of `var` - Follow naming conventions (camelCase for variables, PascalCase for classes) - Write clean, readable code with meaningful variable names ### Accessibility Impact JavaScript can enhance accessibility (dynamic content, ARIA live regions) but poorly implemented JS can break screen readers. Always test with assistive technologies. ### SEO Impact Heavy JavaScript rendering can affect SEO if content is not server-side rendered or pre-rendered. Search engines may not execute all JavaScript. ### Performance - Avoid heavy synchronous JavaScript on the UI thread - Use debouncing/throttling for frequent events - Use async operations for I/O tasks ### Interview Question **"Is JavaScript compiled or interpreted?"** **Answer:** Modern JavaScript engines (V8, SpiderMonkey) use **Just-In-Time (JIT) compilation**. JavaScript is parsed, compiled to bytecode, and then optimized machine code is generated during execution. --- ## 2. Data Types in JavaScript ### Primitive Types | Type | Description | Example | |------|-------------|---------| | `Number` | Numeric values (integers and floats) | `42`, `3.14` | | `String` | Text values | `"hello"`, `'world'` | | `Boolean` | True or false | `true`, `false` | | `Null` | Intentional absence of value | `null` | | `Undefined` | Declared but not assigned | `undefined` | | `Symbol` | Unique identifier | `Symbol('id')` | | `BigInt` | Large integers | `9007199254740991n` | ### Non-Primitive Types | Type | Description | Example | |------|-------------|---------| | `Object` | Key-value pairs | `{name: "John"}` | | `Array` | Ordered collection | `[1, 2, 3]` | | `Function` | Reusable code block | `function() {}` | ### Primitive vs Reference Types | Feature | Primitive | Reference | |---------|-----------|-----------| | Storage | Stack | Heap | | Copy | Value is copied | Reference is copied | | Comparison | Compared by value | Compared by reference | | Mutability | Immutable | Mutable | ```js // Primitive let a = 10; let b = a; // b gets a copy b = 20; // a is still 10 // Reference let obj1 = {value: 10}; let obj2 = obj1; // obj2 references same object obj2.value = 20; // obj1.value is now 20 ``` ### Common Mistakes - Confusing `null` vs `undefined` - `typeof null` returns `"object"` (historical bug) - `typeof []` returns `"object"` (use `Array.isArray()`) ### Best Practices - Use `const` for constants - Prefer `let` over `var` - Use explicit type conversion when needed - Validate types before operations ### Interview Question **"What is the difference between primitive and reference types?"** **Answer:** Primitives are stored on the stack, copied by value, and immutable. Reference types are stored on the heap, copied by reference, and mutable. Modifying a reference type through one variable affects all references to it. --- ## 3. var, let, and const ### Comparison | Feature | `var` | `let` | `const` | |---------|-------|-------|---------| | Scope | Function | Block | Block | | Hoisting | Yes (initialized undefined) | Yes (TDZ) | Yes (TDZ) | | Reassignment | Yes | Yes | No | | Redeclaration | Yes | No | No | ### Scope Differences ```js // var — function scoped function test() { if (true) { var x = 10; } console.log(x); // 10 (accessible outside block) } // let — block scoped function test2() { if (true) { let y = 10; } console.log(y); // ReferenceError } ``` ### Temporal Dead Zone (TDZ) Variables declared with `let` and `const` are hoisted but not initialized. Accessing them before declaration throws a ReferenceError. ```js console.log(x); // ReferenceError: Cannot access 'x' before initialization let x = 5; ``` ### Best Practices - **Default to `const`** — use it unless you need to reassign - Use `let` only when reassignment is needed - Avoid `var` in modern JavaScript - Remember: `const` prevents reassignment, not mutation ```js const arr = [1, 2, 3]; arr.push(4); // OK — mutating contents // arr = [5, 6]; // Error — reassigning reference ``` ### Interview Question **"Why is `let` better than `var`?"** **Answer:** `let` is block-scoped (prevents accidental variable leakage), has temporal dead zone (catches use-before-declaration errors), and cannot be redeclared. `var` is function-scoped, hoisted with `undefined`, and allows redeclaration — all of which cause bugs. --- ## 4. == vs === ### Comparison | Operator | Name | Type Coercion | Example | |----------|------|---------------|---------| | `==` | Loose equality | Yes | `"5" == 5` → `true` | | `===` | Strict equality | No | `"5" === 5` → `false` | ### Common Coercion Examples ```js 0 == false; // true "" == false; // true null == undefined; // true null === undefined;// false NaN == NaN; // false [] == false; // true [] == ![]; // true (both coerce to "") ``` ### Best Practices - **Always use `===`** unless you intentionally want coercion - Use `== null` as a shortcut to check both `null` and `undefined` (acceptable exception) - Explicitly convert types instead of relying on coercion ### Interview Question **"What is `0 == false` and why?"** **Answer:** `true` because `==` performs type coercion. `false` is converted to `0`, and `0 == 0` is `true`. With `===`, it would be `false` because types differ. --- ## 5. Type Coercion ### What is Type Coercion? Automatic conversion of one type to another by JavaScript. ### Implicit vs Explicit ```js // Implicit coercion 5 + "5"; // "55" (number to string) "5" - 2; // 3 (string to number) true + 1; // 2 (boolean to number) // Explicit coercion Number("5"); // 5 String(5); // "5" Boolean(0); // false ``` ### Common Mistakes - Implicit coercion causing subtle bugs in comparisons - Not accounting for coercion in arithmetic operations ### Best Practices - Use explicit conversion: `Number()`, `String()`, `Boolean()` - Use `===` for comparisons - Validate input types before operations ### Interview Question **"What is `[] + []`?"** **Answer:** `""` (empty string). Both arrays are converted to empty strings, and string concatenation produces `""`. --- ## 6. Truthy and Falsy Values ### Falsy Values (only 6) ```js false 0 "" (empty string) null undefined NaN ``` ### Truthy Values Everything else, including: - `"0"` (non-empty string) - `"false"` (non-empty string) - `[]` (empty array) - `{}` (empty object) - `-1` (negative numbers) - `function() {}` ### Best Practices - Explicitly check boolean values when possible - Be careful with `"0"` and `"false"` (truthy strings) - Use `Boolean()` for explicit conversion ### Interview Question **"What is the result of `[] == true`?"** **Answer:** `false`. `true` coerces to `1`, `[]` coerces to `""`, and `""` coerces to `0`. Since `0 !== 1`, result is `false`. But `[] == false` is `true` (both coerce to `0`). --- ## 7. NaN (Not-a-Number) ### What is NaN? Result of invalid numeric operations. ```js Number("abc"); // NaN 0 / 0; // NaN parseInt("hello"); // NaN ``` ### Key Facts - `typeof NaN` → `"number"` - `NaN === NaN` → `false` (NaN is not equal to itself) - Use `Number.isNaN()` to check for NaN ```js Number.isNaN(NaN); // true Number.isNaN("abc"); // false (doesn't coerce) isNaN("abc"); // true (coerces — avoid this) ``` ### Best Practices - Use `Number.isNaN()` instead of global `isNaN()` - Validate inputs before arithmetic ### Interview Question **"Why is `typeof NaN` `"number"`?"** **Answer:** NaN is technically a special numeric value representing an invalid number. It is part of the Number type per the IEEE 754 spec, so `typeof` returns `"number"`. --- ## 8. Functions ### Function Declaration ```js function sum(a, b) { return a + b; } ``` ### Function Expression ```js const sum = function(a, b) { return a + b; }; ``` ### Key Difference: Hoisting - **Declarations** are hoisted (can be called before definition) - **Expressions** are not hoisted (must be defined before use) ```js greet(); // Works — declaration hoisted function greet() { console.log("Hello"); } greet2(); // TypeError: greet2 is not a function const greet2 = function() { console.log("Hello"); }; ``` ### Best Practices - Use arrow functions for concise syntax and callbacks - Use declarations for top-level functions (hoisting is useful) - Use expressions when you need to conditionally define functions ### Interview Question **"What is the difference in hoisting between function declaration and function expression?"** **Answer:** Function declarations are fully hoisted — you can call them before they appear in the code. Function expressions are not hoisted — only the variable is hoisted (as `undefined`), so calling before definition throws a TypeError. --- ## 9. undefined vs null ### Comparison | Feature | `undefined` | `null` | |---------|-------------|--------| | Meaning | Not assigned | Intentionally empty | | Type | `"undefined"` | `"object"` | | Default | Unassigned variables | Must be assigned | | JSON | Not serialized | Serialized as `null` | ```js let a; console.log(a); // undefined let b = null; console.log(b); // null console.log(typeof b); // "object" ``` ### Best Practices - Use `null` for intentional absence of value - Use `undefined` for uninitialized variables - Use `value == null` to check both --- ## 10. Global vs Local Variables ### Global Variables Accessible anywhere in the program. ```js var globalVar = "I'm global"; function test() { console.log(globalVar); // Accessible } ``` ### Local Variables Accessible only within their scope. ```js function test() { var localVar = "I'm local"; console.log(localVar); // Accessible } console.log(localVar); // ReferenceError ``` ### Best Practices - Minimize global variables (avoid pollution) - Use modules or IIFE to encapsulate code - Use `const`/`let` to avoid accidental globals --- ## 11. Floating-Point Arithmetic ### The Problem JavaScript uses IEEE 754 floating-point, causing precision issues. ```js 0.1 + 0.2; // 0.30000000000000004 0.1 + 0.2 === 0.3; // false ``` ### Solutions ```js // Using toFixed (for display) (0.1 + 0.2).toFixed(2); // "0.30" // Using Number.EPSILON (for comparison) Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true // Using integer arithmetic (for calculations) (0.1 * 10 + 0.2 * 10) / 10; // 0.3 ``` ### Best Practices - Never compare floats directly with `===` - Use `Number.EPSILON` for comparisons - Use integer arithmetic when precision matters (e.g., currency in cents) --- ## 12. window vs document ### window - Global object in browsers - Represents the browser window - Contains `document`, `location`, `history`, `localStorage`, `setTimeout` ### document - Represents the DOM tree - Contains `getElementById`, `querySelector`, `createElement` ```js window.document === document; // true ``` ### Common Mistake Assuming `document` exists in Node.js — it doesn't. Node.js has `global` instead of `window`. --- ## 13. JavaScript Comments ```js // Single-line comment /* Multi-line comment Cannot be nested */ ``` ### Best Practices - Comment "why" not "what" - Keep comments updated - Avoid obvious comments - Use JSDoc for functions ```js /** * Calculates the total price including tax. * @param {number} price - Base price * @param {number} taxRate - Tax rate (0.1 = 10%) * @returns {number} Total price with tax */ function totalPrice(price, taxRate) { return price * (1 + taxRate); } ``` --- ## 14. Adding JavaScript to HTML ### Inline ```html ``` ### Internal ```html ``` ### External ```html ``` ### Script Loading ```html ``` | Attribute | Blocking | Execution Order | |-----------|----------|-----------------| | None | Yes | In order | | `defer` | No | In order (after parsing) | | `async` | No | As loaded (any order) | **Best Practice:** Use `defer` for scripts that need the DOM. Use `async` for independent scripts (analytics). --- ## 15. Template Literals ### Syntax ```js const name = "John"; const greeting = `Hello, ${name}!`; ``` ### Benefits - String interpolation with `${}` - Multi-line strings without `\n` - Expression evaluation inside `${}` ```js const multiline = `Line 1 Line 2 Line 3`; const sum = `1 + 2 = ${1 + 2}`; // "1 + 2 = 3" ``` ### Nesting ```js const nested = `Outer ${`inner ${value}`}`; ``` ### Best Practices - Use template literals for dynamic strings - Use for multi-line strings - Avoid for simple static strings (concatenation is fine) --- ## 16. String Concatenation ```js // Old way const greeting = "Hello, " + name + "!"; // Modern way (preferred) const greeting = `Hello, ${name}!`; ``` ### Performance Note For very large strings, concatenation can be faster than template literals in some engines, but the difference is negligible in modern JavaScript. --- ## 17. parseInt vs Number() | Feature | `parseInt()` | `Number()` | |---------|--------------|------------| | Decimals | Truncates | Keeps | | Trailing chars | Stops at first non-digit | Returns NaN | | Empty string | NaN | 0 | | Radix | Supports second argument | Always base 10 | ```js parseInt("10.5"); // 10 parseInt("10abc"); // 10 parseInt("abc"); // NaN parseInt("10", 2); // 2 (binary) Number("10.5"); // 10.5 Number("10abc"); // NaN Number(""); // 0 Number("10"); // 10 ``` ### Best Practices - Use `parseInt()` when you want an integer - Use `Number()` for general number conversion - Always pass radix to `parseInt()`: `parseInt("10", 10)` - Use `parseFloat()` for decimals --- ## 18. Escape Characters | Escape | Meaning | |--------|---------| | `\n` | Newline | | `\t` | Tab | | `\\` | Backslash | | `\"` | Double quote | | `\'` | Single quote | | `\r` | Carriage return | ```js const text = "Line 1\nLine 2"; const quote = "She said \"Hello\""; const path = "C:\\Users\\John"; ``` --- ## 19. alert, console.log, prompt | Function | Purpose | Blocking | |----------|---------|----------| | `alert()` | Show popup message | Yes | | `prompt()` | Get user input | Yes | | `confirm()` | Yes/No dialog | Yes | | `console.log()` | Debug output | No | ### Best Practices - Use `console.log()` for debugging (not `alert`) - `alert`/`prompt` are rarely used in modern apps (use modals instead) - Remove `console.log` from production code --- ## 20. Checking Types ### typeof ```js typeof "hello"; // "string" typeof 42; // "number" typeof true; // "boolean" typeof undefined; // "undefined" typeof null; // "object" (bug!) typeof []; // "object" typeof {}; // "object" typeof function(){}; // "function" typeof Symbol(); // "symbol" typeof 10n; // "bigint" ``` ### Array.isArray() ```js Array.isArray([]); // true Array.isArray({}); // false Array.isArray("hello"); // false ``` ### instanceof ```js [] instanceof Array; // true {} instanceof Object; // true new Date() instanceof Date; // true ``` ### Best Practices - Use `Array.isArray()` for arrays - Use `typeof` for primitives - Use `instanceof` for custom classes - Use `Object.prototype.toString.call()` for precise type checking --- ## 21–35. Operators and Expressions ### 21. Operator Types | Type | Operators | |------|-----------| | Arithmetic | `+ - * / % **` | | Comparison | `== === != !== < > <= >=` | | Logical | `&& \|\| !` | | Assignment | `= += -= *= /= %=` | | Bitwise | `& \| ^ ~ << >> >>>` | | Ternary | `? :` | ### 22. Ternary Operator ```js const status = age >= 18 ? "adult" : "minor"; ``` ### 23. Increment/Decrement ```js let x = 5; console.log(++x); // 6 (increment then return) console.log(x++); // 6 (return then increment, x becomes 7) ``` ### 24. Bitwise Operators ```js 5 & 3; // 1 (AND) 5 | 3; // 7 (OR) 5 ^ 3; // 6 (XOR) ~5; // -6 (NOT) 5 << 1; // 10 (left shift) 5 >> 1; // 2 (right shift) ``` ### 25. && vs || ```js // && returns first falsy or last value true && "hello"; // "hello" false && "hello"; // false // || returns first truthy or last value false || "hello"; // "hello" true || "hello"; // true ``` ### 26. Short-Circuit Evaluation ```js // Prevents unnecessary evaluation const result = isValid && expensiveFunction(); // Default values const name = userInput || "Guest"; ``` ### 27. typeof vs instanceof ```js typeof []; // "object" [] instanceof Array; // true typeof "hello"; // "string" "hello" instanceof String; // false (primitives aren't instances) ``` ### 28. in vs hasOwnProperty ```js const obj = {a: 1}; "a" in obj; // true "toString" in obj; // true (inherited) obj.hasOwnProperty("a"); // true obj.hasOwnProperty("toString"); // false (not own) ``` ### 29. delete vs undefined ```js const obj = {a: 1, b: 2}; delete obj.a; // Removes property completely obj.b = undefined; // Property exists, value is undefined "a" in obj; // false "b" in obj; // true ``` ### 30. Optional Chaining (`?.`) ```js const user = {profile: {name: "John"}}; user?.profile?.name; // "John" user?.settings?.theme; // undefined (no error) // With function calls obj.method?.(); // Calls only if method exists // With array access arr?.[0]; ``` ### 31. Nullish Coalescing (`??`) ```js const value = null ?? "default"; // "default" const value2 = undefined ?? "default"; // "default" const value3 = 0 ?? "default"; // 0 (only null/undefined trigger) const value4 = "" ?? "default"; // "" (only null/undefined trigger) ``` **Difference from `||`:** ```js 0 || "default"; // "default" (0 is falsy) 0 ?? "default"; // 0 (0 is not null/undefined) ``` ### 32. Operator Precedence ```js 2 + 3 * 4; // 14 (multiplication first) (2 + 3) * 4; // 20 (parentheses first) ``` **Common precedence (high to low):** 1. `()` `[]` `.` (member access) 2. `!` `typeof` `++` `--` (unary) 3. `*` `/` `%` 4. `+` `-` 5. `<` `>` `<=` `>=` 6. `==` `!=` `===` `!==` 7. `&&` 8. `||` 9. `?:` 10. `=` `+=` etc. ### 33. `+` Operator Behavior ```js 1 + 2; // 3 (addition) "1" + 2; // "12" (concatenation) 1 + "2"; // "12" (concatenation) 1 + 2 + "3"; // "33" (left to right: 3, then "33") "1" + 2 + 3; // "123" (left to right: "12", then "123") ``` ### 34. Equality vs Inequality ```js 5 == "5"; // true (loose) 5 === "5"; // false (strict) 5 != "5"; // false (loose) 5 !== "5"; // true (strict) ``` ### 35. Safely Checking Variable Existence ```js // Bad — throws if x is not declared if (x) {} // Good — safe check if (typeof x !== 'undefined') {} // For object properties if (obj && obj.prop) {} // Modern if (obj?.prop) {} ``` --- ## 36–50. Control Flow ### 36. if, else if, else ```js if (score >= 90) { grade = "A"; } else if (score >= 80) { grade = "B"; } else { grade = "C"; } ``` **Best Practices:** - Always use braces `{}` even for single statements - Keep conditions simple - Avoid deep nesting (use early returns) ### 37. switch vs if-else ```js // switch — for discrete values switch (day) { case "Monday": console.log("Start of week"); break; case "Friday": console.log("End of week"); break; default: console.log("Midweek"); } // if-else — for ranges/complex conditions if (age >= 18 && age <= 65) { } ``` **Key differences:** | Feature | switch | if-else | |---------|--------|---------| | Values | Discrete | Any condition | | Fall-through | Yes (without break) | No | | Readability | Clean for many cases | Better for ranges | **Common mistake:** Forgetting `break` → fall-through to next case. ### 38. for Loop ```js for (let i = 0; i < 5; i++) { console.log(i); } ``` **Common mistakes:** - Infinite loops (forgetting increment) - Off-by-one errors (`<` vs `<=`) ### 39. for vs for...in ```js // for — array iteration by index for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } // for...in — object keys (and array indices!) for (const key in obj) { console.log(key, obj[key]); } ``` **Common mistake:** Using `for...in` on arrays — it iterates indices as strings and includes inherited properties. Use `for...of` or traditional `for` instead. ### 40. for...of Loop ```js for (const item of array) { console.log(item); } for (const char of "hello") { console.log(char); // h, e, l, l, o } ``` **Works with:** arrays, strings, maps, sets, any iterable **Does NOT work with:** plain objects (throws error) ### 41. while vs do...while ```js // while — checks condition first while (condition) { // runs 0+ times } // do...while — runs at least once do { // runs 1+ times } while (condition); // Note: semicolon ``` ### 42. break and continue ```js // break — exits loop for (let i = 0; i < 10; i++) { if (i === 5) break; // stops at 5 console.log(i); // 0, 1, 2, 3, 4 } // continue — skips current iteration for (let i = 0; i < 5; i++) { if (i === 2) continue; console.log(i); // 0, 1, 3, 4 } ``` ### 43. return vs break - `return` — exits the **function** - `break` — exits the **loop/switch** ```js function find(arr, target) { for (let i = 0; i < arr.length; i++) { if (arr[i] === target) return i; // exits function } return -1; } ``` ### 44. Labeled Statements ```js outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i === 1 && j === 1) break outer; console.log(i, j); } } ``` **Note:** Overusing labels reduces readability. ### 45. Nested Loops ```js for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { console.log(i, j); // 9 iterations } } ``` **Performance:** O(n²) or worse. Minimize nesting for large datasets. ### 46. Iterating Object Properties ```js // for...in for (const key in obj) { console.log(key, obj[key]); } // Object.keys Object.keys(obj).forEach(key => console.log(key, obj[key])); // Object.entries for (const [key, value] of Object.entries(obj)) { console.log(key, value); } ``` ### 47. Iterating Arrays Efficiently ```js // Traditional for (fastest) for (let i = 0; i < arr.length; i++) {} // for...of (modern) for (const item of arr) {} // forEach (functional) arr.forEach(item => console.log(item)); // map (for transformation) const doubled = arr.map(x => x * 2); ``` **Avoid:** `for...in` for arrays. ### 48. Array.prototype.forEach ```js arr.forEach((item, index, array) => { console.log(item, index); }); ``` **Limitations:** - Cannot `break` or `return` early - Returns `undefined` (not chainable) **Best for:** Side effects (logging, DOM updates) ### 49. map, filter, reduce ```js // map — transform each element const doubled = [1,2,3].map(x => x * 2); // [2,4,6] // filter — select elements const evens = [1,2,3,4].filter(x => x % 2 === 0); // [2,4] // reduce — aggregate to single value const sum = [1,2,3].reduce((acc, x) => acc + x, 0); // 6 ``` **Common mistakes:** - Forgetting to `return` in `map`/`reduce` - Using `map` for side effects (use `forEach`) - Forgetting initial value in `reduce` (first element used) ### 50. Exiting a Function Early ```js function process(user) { if (!user) return; // early exit if (!user.active) return; // early exit // Main logic console.log(user.name); } ``` **Best practice:** Use early returns to avoid deep nesting. --- ## 51–65. Functions and Scope ### 51. Scope Types | Scope | Description | Created By | |-------|-------------|------------| | Global | Accessible everywhere | Top-level code | | Function | Inside a function | `function` keyword | | Block | Inside `{}` | `let`, `const` | ```js var global = "global"; // Global scope function test() { var funcScoped = "func"; // Function scope if (true) { let blockScoped = "block"; // Block scope } } ``` ### 52. Hoisting JavaScript moves declarations to the top of their scope. ```js console.log(x); // undefined (var is hoisted) var x = 5; // let/const are hoisted but in TDZ console.log(y); // ReferenceError let y = 5; // Functions are fully hoisted greet(); // Works function greet() {} ``` ### 53. Closures A function that remembers variables from its outer scope even after the outer function returns. ```js function counter() { let count = 0; return function() { count++; return count; }; } const increment = counter(); increment(); // 1 increment(); // 2 ``` **Use cases:** - Data privacy (private variables) - Function factories - Event handlers with state - Partial application **Common mistake:** Memory leaks if closures hold large references. ### 54. Callback Functions A function passed as an argument to another function. ```js function fetchData(callback) { setTimeout(() => { callback({name: "John"}); }, 1000); } fetchData(data => console.log(data)); ``` **Common mistake:** Callback hell (nested callbacks) ```js getUser(id, user => { getPosts(user.id, posts => { getComments(posts[0].id, comments => { // deeply nested }); }); }); ``` **Solution:** Promises or async/await. ### 55. Arrow Functions ```js const add = (a, b) => a + b; const square = x => x * x; const greet = () => console.log("Hello"); ``` **Key differences from regular functions:** | Feature | Regular | Arrow | |---------|---------|-------| | `this` binding | Dynamic | Lexical | | `arguments` | Available | Not available | | Constructor | Yes | No | | Hoisting | Depends | Not hoisted | **Interview question:** "Why does `this` behave differently in arrow functions?" **Answer:** Arrow functions don't have their own `this`. They inherit `this` from the enclosing scope (lexical scoping). This is useful for callbacks but problematic for object methods. ### 56. arguments Object ```js function sum() { let total = 0; for (let i = 0; i < arguments.length; i++) { total += arguments[i]; } return total; } sum(1, 2, 3); // 6 ``` **Note:** Arrow functions don't have `arguments`. Use rest parameters instead: ```js const sum = (...args) => args.reduce((a, b) => a + b, 0); ``` ### 57. Default Parameters ```js function greet(name = "Guest") { return `Hello, ${name}!`; } greet(); // "Hello, Guest!" greet("John"); // "Hello, John!" ``` **Note:** Defaults only apply when argument is `undefined`, not `null`. ```js greet(null); // "Hello, null!" ``` ### 58. Rest and Spread ### Rest — collects into array ```js function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } sum(1, 2, 3); // 6 const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4] ``` ### Spread — expands from array/object ```js const arr = [1, 2, 3]; Math.max(...arr); // 3 const obj1 = {a: 1}; const obj2 = {b: 2}; const merged = {...obj1, ...obj2}; // {a: 1, b: 2} ``` **Trick question:** "What's the difference between rest and spread?" **Answer:** Rest **gathers** multiple values into an array (in function parameters or destructuring). Spread **expands** an array or object into individual values. ### 59. call, apply, bind ```js function greet(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; } const person = {name: "John"}; // call — args individually greet.call(person, "Hello", "!"); // "Hello, John!" // apply — args as array greet.apply(person, ["Hello", "!"]); // "Hello, John!" // bind — returns new function const boundGreet = greet.bind(person); boundGreet("Hello", "!"); // "Hello, John!" ``` **Comparison:** | Method | Invokes | Args | Returns | |--------|---------|------|---------| | `call` | Yes | Individual | Result | | `apply` | Yes | Array | Result | | `bind` | No | Individual | New function | ### 60. IIFE (Immediately Invoked Function Expression) ```js (function() { console.log("Runs immediately"); })(); // Arrow version (() => { console.log("Also runs immediately"); })(); ``` **Use cases:** - Encapsulate code (avoid global scope pollution) - Create private variables (module pattern) - Execute async code in loops (traditional fix before `let`) ### 61. Function Overloading JavaScript does not support classical function overloading (same name, different parameters). ```js // NOT possible in JS function add(a, b) {} function add(a, b, c) {} // Overwrites previous ``` **Simulation:** ```js function add() { if (arguments.length === 2) return arguments[0] + arguments[1]; if (arguments.length === 3) return arguments[0] + arguments[1] + arguments[2]; } ``` **Best practice:** Use optional parameters, rest params, or type checking instead. ### 62. Recursion A function that calls itself. ```js function factorial(n) { if (n <= 1) return 1; // base case return n * factorial(n - 1); // recursive case } factorial(5); // 120 ``` **Common mistakes:** - Missing base case → infinite recursion → stack overflow - Deep recursion causing stack overflow (use iteration for large inputs) ### 63. Functions as First-Class Objects Functions can be: - Assigned to variables - Passed as arguments - Returned from functions - Stored in data structures ```js const fn = function() { return 1; }; const obj = {method: fn}; [fn, fn].forEach(f => f()); function makeAdder(x) { return function(y) { return x + y; }; } ``` ### 64. Function Composition Combining functions where the output of one is the input of another. ```js const addOne = x => x + 1; const double = x => x * 2; const compose = (f, g) => x => f(g(x)); const addOneThenDouble = compose(double, addOne); addOneThenDouble(5); // double(addOne(5)) = double(6) = 12 ``` **Benefits:** Modular, reusable, testable code. ### 65. Memoization Caching function results to avoid redundant computation. ```js function memoize(fn) { const cache = {}; return function(...args) { const key = JSON.stringify(args); if (key in cache) return cache[key]; cache[key] = fn(...args); return cache[key]; }; } const slowSquare = n => { for (let i = 0; i < 1e7; i++) {} return n * n; }; const fastSquare = memoize(slowSquare); fastSquare(5); // slow fastSquare(5); // instant (cached) ``` **Common mistake:** Unbounded cache growth → memory leak. Use LRU cache or limit cache size. --- ## 66–80. Objects and Arrays ### 66. Creating Objects ```js // Object literal (most common) const obj = {name: "John", age: 30}; // Constructor const obj2 = new Object(); obj2.name = "John"; // Object.create (with prototype) const proto = {greet() { return "Hi"; }}; const obj3 = Object.create(proto); // Class (ES6) class Person { constructor(name) { this.name = name; } } const obj4 = new Person("John"); ``` **Best practice:** Use object literals for most cases. Use `Object.create` for inheritance. Use classes for complex models. ### 67. Object Literal vs Constructor Function ```js // Literal — single object const user = {name: "John", age: 30}; // Constructor — create multiple instances function User(name, age) { this.name = name; this.age = age; } const user1 = new User("John", 30); const user2 = new User("Jane", 25); ``` **Common mistake:** Forgetting `new` with constructor → `this` refers to global/window, properties lost. ### 68. Object Properties and Methods ```js const user = { name: "John", // property age: 30, // property greet() { // method return `Hi, ${this.name}`; } }; user.name; // "John" user.greet(); // "Hi, John" ``` **Common mistake:** Using `this` incorrectly in methods (especially with arrow functions). ### 69. Checking if Property Exists ```js const obj = {a: 1, b: undefined}; // 'in' — checks own + inherited "a" in obj; // true "b" in obj; // true "toString" in obj; // true (inherited) // hasOwnProperty — own only obj.hasOwnProperty("a"); // true obj.hasOwnProperty("toString"); // false // undefined check (unreliable) obj.a !== undefined; // true obj.b !== undefined; // false (but property exists!) obj.c !== undefined; // false ``` **Best practice:** Use `hasOwnProperty()` or `Object.hasOwn()` (ES2022) for own properties. ### 70. Object.keys, values, entries ```js const obj = {a: 1, b: 2, c: 3}; Object.keys(obj); // ["a", "b", "c"] Object.values(obj); // [1, 2, 3] Object.entries(obj); // [["a", 1], ["b", 2], ["c", 3]] // fromEntries — reverse of entries const entries = [["a", 1], ["b", 2]]; Object.fromEntries(entries); // {a: 1, b: 2} ``` **Use case:** Iterating and transforming objects. ```js // Double all values const doubled = Object.fromEntries( Object.entries(obj).map(([k, v]) => [k, v * 2]) ); ``` ### 71. Cloning Objects ```js const obj = {a: 1, b: {c: 2}}; // Shallow copy const shallow1 = Object.assign({}, obj); const shallow2 = {...obj}; // Deep copy const deep1 = JSON.parse(JSON.stringify(obj)); const deep2 = structuredClone(obj); // modern ``` **Common mistake:** Spread creates shallow copies — nested objects still shared. ```js const copy = {...obj}; copy.b.c = 99; console.log(obj.b.c); // 99 (also changed!) ``` ### 72. Shallow vs Deep Copy | Feature | Shallow | Deep | |---------|---------|------| | Top-level | Copied | Copied | | Nested objects | Shared reference | Fully copied | | Performance | Fast | Slower | | Use when | Immutable inner data | Fully independent copy | **Interview question:** "What's the difference between `{...obj}` and `JSON.parse(JSON.stringify(obj))`?" **Answer:** `{...obj}` is a shallow copy — nested objects are still shared. `JSON.parse(JSON.stringify(obj))` is a deep copy but has limitations: cannot handle functions, `undefined`, `Symbol`, `Date` (becomes string), `NaN` (becomes `null`), or circular references. ### 73. this in JavaScript ```js // Global context this === window; // true (browser, non-strict) // Object method const obj = { name: "John", greet() { return this.name; } }; obj.greet(); // "John" // Constructor function User(name) { this.name = name; } new User("John").name; // "John" // Arrow function — lexical this const obj2 = { name: "Jane", greet: () => this.name // `this` from outer scope, not obj2 }; // Event handler button.addEventListener("click", function() { this; // the button element }); ``` **Common mistake:** Using arrow functions as object methods when you need `this` to refer to the object. ### 74. Arrays vs Objects | Feature | Array | Object | |---------|-------|--------| | Order | Ordered (by index) | Unordered (key-based) | | Keys | Numeric indices | String/symbol keys | | Length | `length` property | No length | | Methods | Rich (map, filter, etc.) | Limited (Object.*) | | Use when | Order matters, numeric indexing | Key-value pairs, no order | ### 75. Checking if Variable is Array ```js Array.isArray([]); // true Array.isArray({}); // false Array.isArray("hello"); // false Array.isArray(new Array()); // true // Wrong typeof []; // "object" ``` **Best practice:** Always use `Array.isArray()`. It works across frames and realms. ### 76. Add/Remove Array Elements ```js const arr = [1, 2, 3]; // Add arr.push(4); // [1, 2, 3, 4] — end arr.unshift(0); // [0, 1, 2, 3, 4] — start arr.splice(2, 0, 99); // insert at index 2 // Remove arr.pop(); // removes last arr.shift(); // removes first arr.splice(1, 1); // removes 1 element at index 1 ``` ### 77. push, pop, shift, unshift | Method | Action | Mutates | Returns | |--------|--------|---------|---------| | `push()` | Add to end | Yes | New length | | `pop()` | Remove from end | Yes | Removed element | | `shift()` | Remove from start | Yes | Removed element | | `unshift()` | Add to start | Yes | New length | ```js const arr = [2, 3]; arr.push(4); // [2, 3, 4] arr.pop(); // [2, 3] arr.unshift(1); // [1, 2, 3] arr.shift(); // [2, 3] ``` ### 78. slice vs splice ```js const arr = [1, 2, 3, 4, 5]; // slice — non-mutating, returns new array arr.slice(1, 3); // [2, 3] — arr unchanged arr.slice(-2); // [4, 5] // splice — mutating, returns removed elements arr.splice(1, 2); // removes [2, 3], arr becomes [1, 4, 5] arr.splice(1, 0, 99); // insert 99 at index 1 ``` **Memory tip:** **s**lice = **s**tays (returns copy), **s**plice = **s**truts (mutates). ### 79. Array Destructuring ```js const arr = [1, 2, 3]; const [a, b] = arr; // a=1, b=2 const [first, ...rest] = arr; // first=1, rest=[2,3] const [, second] = arr; // second=2 // With defaults const [x = 10, y = 20] = [5]; // x=5, y=20 // Swapping variables let p = 1, q = 2; [p, q] = [q, p]; // p=2, q=1 ``` ### 80. Object Destructuring ```js const user = {name: "John", age: 30, city: "NYC"}; const {name, age} = user; const {name: userName} = user; // rename const {name = "Guest"} = {}; // default // Nested const {address: {city}} = user; // In function parameters function greet({name, age}) { return `${name}, ${age}`; } greet(user); ``` --- ## 81–100. DOM and Events ### 81. What is the DOM? The Document Object Model is a JavaScript representation of the HTML document. It allows dynamic access and manipulation of page content. ```js document.title = "New Title"; document.body.style.background = "black"; ``` ### 82. HTMLCollection vs NodeList | Feature | HTMLCollection | NodeList | |---------|----------------|----------| | Source | `getElementsBy*` | `querySelectorAll`, `childNodes` | | Live | Usually | Only `childNodes` | | Array methods | No | Partial (forEach) | | Contains | Elements only | All nodes | ```js const htmlColl = document.getElementsByClassName("item"); // live const nodeList = document.querySelectorAll(".item"); // static // Convert to array for full methods Array.from(nodeList).map(el => el.textContent); ``` ### 83. Selecting Elements ```js // Single element document.getElementById("id"); // fastest, by ID document.querySelector(".class"); // first match, CSS selector // Multiple elements document.getElementsByClassName("class"); // HTMLCollection document.getElementsByTagName("div"); // HTMLCollection document.querySelectorAll(".class"); // NodeList ``` ### 84. getElementById vs querySelector | Method | Returns | Speed | Flexibility | |--------|---------|-------|-------------| | `getElementById` | Single | Fastest | ID only | | `querySelector` | First match | Slower | Any CSS selector | | `querySelectorAll` | All matches | Slower | Any CSS selector | **Best practice:** Use `getElementById` for IDs (fastest). Use `querySelector(All)` for flexibility. ### 85. Changing Element Text/HTML ```js // Text only (safe) element.textContent = "Hello"; // HTML (can execute scripts — careful!) element.innerHTML = "Hello"; // Insert HTML without parsing (modern, safe) element.insertAdjacentHTML("beforeend", "Hello"); ``` **Security:** Never set `innerHTML` with user input (XSS vulnerability). ### 86. Changing CSS Styles ```js // Inline styles (specific, hard to override) element.style.color = "red"; element.style.backgroundColor = "blue"; // Class-based (preferred) element.classList.add("active"); element.classList.remove("active"); element.classList.toggle("active"); element.classList.replace("old", "new"); ``` **Best practice:** Use classes for styling, inline styles only for dynamic values (e.g., positions). ### 87. addEventListener / removeEventListener ```js function handleClick(event) { console.log("Clicked", event.target); } element.addEventListener("click", handleClick); element.removeEventListener("click", handleClick); // must pass same function ``` **Best practice:** Always remove listeners when elements are removed to prevent memory leaks. ### 88. Event Bubbling vs Capturing ```js // Bubbling (default) — child to parent element.addEventListener("click", handler); // bubbles // Capturing — parent to child element.addEventListener("click", handler, true); // captures ``` **Flow:** 1. Capturing phase (root → target) 2. Target phase 3. Bubbling phase (target → root) **Common mistake:** Forgetting the order affects event handling. ### 89. Event Delegation Attach listener to parent instead of individual children. ```js document.getElementById("list").addEventListener("click", (e) => { if (e.target.matches("li")) { console.log("Clicked:", e.target.textContent); } }); ``` **Benefits:** - Fewer listeners (memory) - Works with dynamically added elements - Simpler cleanup ### 90. preventDefault / stopPropagation ```js link.addEventListener("click", (e) => { e.preventDefault(); // stops navigation e.stopPropagation(); // stops bubbling to parents }); ``` | Method | Effect | |--------|--------| | `preventDefault()` | Stops default browser behavior | | `stopPropagation()` | Stops event from bubbling/capturing | | `stopImmediatePropagation()` | Stops other handlers on same element too | ### 91. Keyboard and Mouse Events ```js // Keyboard element.addEventListener("keydown", e => console.log(e.key)); element.addEventListener("keyup", e => console.log(e.key)); element.addEventListener("keypress", e => {}); // deprecated // Mouse element.addEventListener("click", handler); element.addEventListener("dblclick", handler); element.addEventListener("mousemove", handler); element.addEventListener("mouseenter", handler); element.addEventListener("mouseleave", handler); element.addEventListener("mouseover", handler); // bubbles element.addEventListener("mouseout", handler); // bubbles ``` ### 92. Input Change Events ```js // 'input' — fires on every change (typing, paste, etc.) input.addEventListener("input", e => console.log(e.target.value)); // 'change' — fires when value is committed (blur for text, immediate for select) input.addEventListener("change", e => console.log(e.target.value)); ``` **Best practice:** Use `input` for real-time feedback, `change` for validation. ### 93. focus and blur Events ```js input.addEventListener("focus", () => { /* gained focus */ }); input.addEventListener("blur", () => { /* lost focus */ }); // focusin/focusout — same but bubble form.addEventListener("focusin", handler); ``` ### 94. DOMContentLoaded vs load ```js document.addEventListener("DOMContentLoaded", () => { // DOM parsed (faster, doesn't wait for images) }); window.addEventListener("load", () => { // All assets loaded (images, styles, etc.) }); ``` | Event | When | Use for | |-------|------|---------| | `DOMContentLoaded` | DOM ready | DOM manipulation | | `load` | Everything loaded | Measuring image sizes | ### 95. Create and Append Elements ```js const div = document.createElement("div"); div.textContent = "Hello"; div.classList.add("box"); document.body.appendChild(div); // Modern alternative element.insertAdjacentHTML("beforeend", "

Hello

"); ``` ### 96. Remove Element ```js // Modern element.remove(); // Old element.parentNode.removeChild(element); ``` ### 97. Traversing DOM Nodes ```js element.parentNode; // parent element.children; // HTMLCollection of child elements element.childNodes; // NodeList (includes text nodes) element.nextSibling; // next node (any type) element.nextElementSibling; // next element only element.previousElementSibling; element.firstElementChild; element.lastElementChild; ``` ### 98. innerText vs textContent | Property | Respects CSS | Gets hidden text | Performance | |----------|--------------|------------------|-------------| | `textContent` | No | Yes | Faster | | `innerText` | Yes | No | Slower | ```html

Hello

``` ```js el.textContent; // "Hello hidden" el.innerText; // "Hello" (respects display:none) ``` **Best practice:** Use `textContent` unless you need rendered text. ### 99. innerHTML vs outerHTML ```html

Child

``` ```js const parent = document.getElementById("parent"); parent.innerHTML; // "

Child

" parent.outerHTML; // "

Child

" ``` ### 100. Toggle Classes ```js element.classList.toggle("active"); // Force add/remove element.classList.toggle("active", true); // force add element.classList.toggle("active", false); // force remove ``` **Best practice:** Use `classList.toggle()` for state toggles — cleaner and more reliable than checking `className`. --- # Part 2: Intermediate Level — ES6+ Features --- ## 101–120. ES6+ Features ### 101. let and const in ES6 Covered in detail in section 3. Key reminders: - `let` → block-scoped, mutable - `const` → block-scoped, cannot reassign - Both are hoisted but in Temporal Dead Zone - Use `const` by default **Interview question:** "What is the Temporal Dead Zone (TDZ)?" **Answer:** The period between when a `let`/`const` variable is hoisted and when it's initialized. Accessing the variable during TDZ throws a ReferenceError. ### 102. Template Literals ```js const name = "John"; const message = `Hello, ${name}!`; // Multi-line const html = `

${title}

`; ``` **Trick question:** "Can you nest template literals?" **Answer:** Yes: `` `Outer ${`inner ${value}`}` `` ### 103. Arrow Functions and Lexical this ```js // Traditional const obj1 = { name: "John", greet: function() { return this.name; } }; // Arrow (lexical this — doesn't refer to obj2) const obj2 = { name: "Jane", greet: () => this.name // `this` from outer scope }; // Arrow functions in callbacks const arr = [1, 2, 3]; arr.map(x => x * 2); // concise ``` **When NOT to use arrow functions:** - Object methods that use `this` - Constructors - Functions using `arguments` ### 104. Default Parameters ```js function greet(name = "Guest", greeting = "Hello") { return `${greeting}, ${name}`; } ``` **Common mistake:** Order matters — defaults should come after required params. ```js function f(a = 1, b) {} // valid but confusing f(undefined, 2); // a=1, b=2 ``` **Best practice:** Combine with destructuring: ```js function createUser({name = "Guest", age = 0} = {}) {} createUser(); // {} works createUser({name: "John"}); ``` ### 105. Destructuring Assignment ```js // Array const [a, b, ...rest] = [1, 2, 3, 4]; // Object const {name, age, address: {city}} = user; // With defaults const {name = "Guest"} = {}; // Rename const {name: userName} = {name: "John"}; // Swap let x = 1, y = 2; [x, y] = [y, x]; ``` **Use case:** Function parameters ```js function render({title, content, author = "Anonymous"}) { return `

${title}

${content}

`; } ``` ### 106. Rest and Spread Operators ```js // Rest — collect args function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } // Rest in destructuring const [first, ...others] = [1, 2, 3]; // Spread — expand Math.max(...[1, 2, 3]); const merged = [...arr1, ...arr2]; const cloned = {...obj}; ``` **Key difference:** | Rest | Spread | |------|--------| | Gathers | Expands | | Function params | Function args, arrays, objects | | Left side of `=` | Right side of `=`, in calls | ### 107. Modules in ES6 ```js // math.js export function add(a, b) { return a + b; } export const PI = 3.14; // app.js import { add, PI } from "./math.js"; ``` **Benefits:** - Encapsulation (avoid globals) - Reusability - Dependency management - Tree-shaking (bundle only used code) ### 108. export default vs Named Exports ```js // Default — one per file export default function() {} // Import (name is arbitrary) import anything from "./module"; // Named — multiple per file export const x = 1; export function y() {} // Import (name must match) import { x, y } from "./module"; ``` | Feature | Default | Named | |---------|---------|-------| | Per file | 1 | Multiple | | Import braces | No | Yes | | Rename on import | Freely | `as` needed | ### 109. Import/Export ```js // Named imports import { add, subtract } from "./math.js"; // Rename import { add as sum } from "./math.js"; // All as namespace import * as math from "./math.js"; math.add(1, 2); // Side effects only import "./styles.css"; ``` ### 110. for...of Loop ```js for (const item of [1, 2, 3]) { console.log(item); } for (const char of "abc") { console.log(char); } for (const [key, value] of Object.entries(obj)) { console.log(key, value); } ``` **Cannot use on plain objects** (not iterable). Use `Object.entries()` or `for...in`. ### 111. Map and Set ### Map — key-value store with any key type ```js const map = new Map(); map.set("name", "John"); map.set(42, "answer"); map.set({id: 1}, "object key"); map.get("name"); // "John" map.has(42); // true map.delete(42); map.size; ``` ### Set — collection of unique values ```js const set = new Set([1, 2, 2, 3]); // {1, 2, 3} set.add(4); set.has(2); // true set.delete(1); set.size; ``` ### 112. Map vs Object | Feature | Map | Object | |---------|-----|--------| | Key types | Any | String/symbol | | Insertion order | Preserved | Mostly | | Size | `size` property | Manual | | Prototype | No | Yes | | Iteration | Direct (`for...of`) | `Object.*` | | Performance | Faster for frequent add/delete | Faster for small static | **Use Map for:** Dynamic key-value data, non-string keys **Use Object for:** Static config, JSON data ### 113. Set vs Array | Feature | Set | Array | |---------|-----|-------| | Duplicates | Not allowed | Allowed | | Order | Insertion | Indexed | | Access by index | No | Yes | | Performance | O(1) lookup | O(n) lookup | ```js // Remove duplicates const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3] // Check existence efficiently set.has(value); // O(1) arr.includes(value); // O(n) ``` ### 114. WeakMap and WeakSet - Keys must be objects (WeakMap) or all entries objects (WeakSet) - Weak references: if no other reference exists, garbage collected - Not iterable - No size property ```js const wm = new WeakMap(); let key = {}; wm.set(key, "value"); key = null; // can be GC'd const ws = new WeakSet(); ``` **Use for:** Caching, private data, avoiding memory leaks ### 115. Promise Represents a future value from async operation. ```js const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("done"), 1000); }); promise .then(result => console.log(result)) .catch(error => console.error(error)); ``` **States:** - Pending → initial - Fulfilled → resolved with value - Rejected → rejected with reason ### 116. Async/Await Syntactic sugar over promises for cleaner async code. ```js async function fetchData() { try { const response = await fetch(url); const data = await response.json(); return data; } catch (error) { console.error(error); } } ``` **Rules:** - `async` always returns a Promise - `await` pauses execution until Promise resolves - Use `try/catch` for errors - `await` only works inside `async` functions (or top-level in modules) ### 117. Promise.all vs Promise.race ```js // Promise.all — all must succeed const [a, b] = await Promise.all([fetchA(), fetchB()]); // Promise.race — first to settle wins const result = await Promise.race([fetchA(), fetchB()]); // Promise.allSettled — all settle (success or fail) const results = await Promise.allSettled([fetchA(), fetchB()]); // Promise.any — first to resolve wins const first = await Promise.any([fetchA(), fetchB()]); ``` | Method | Waits For | Fails If | |--------|-----------|----------| | `all` | All resolve | Any rejects | | `race` | First settle | First is rejection | | `allSettled` | All settle | Never | | `any` | First resolve | All reject | ### 118. Optional Chaining (`?.`) Safe access to nested properties. ```js const user = {profile: {name: "John"}}; user?.profile?.name; // "John" user?.settings?.theme; // undefined (no error) // With method calls user.greet?.(); // calls only if exists // With array access arr?.[0]; // With nullish coalescing const name = user?.name ?? "Guest"; ``` **Does not work with:** `user?.profile.name` if `profile` is undefined (only `?.` chain works). ### 119. Nullish Coalescing (`??`) Returns right value only if left is `null` or `undefined`. ```js null ?? "default"; // "default" undefined ?? "default"; // "default" 0 ?? "default"; // 0 "" ?? "default"; // "" false ?? "default"; // false ``` **Difference from `||`:** ```js 0 || "default"; // "default" (falsy) 0 ?? "default"; // 0 (only null/undefined) ``` ### 120. Tagged Template Literals A function that processes a template literal. ```js function highlight(strings, ...values) { return strings.reduce((result, str, i) => { return result + str + (values[i] ? `${values[i]}` : ""); }, ""); } const name = "John"; highlight`Hello ${name}, welcome!`; // "Hello John, welcome!" ``` **Use cases:** - i18n (internationalization) - Sanitization (HTML escaping) - Custom string processing - Styled-components (CSS-in-JS) --- # Part 3: Advanced Level — OOP and Patterns --- ## 161–180. OOP and Advanced Concepts ### 161. Classical vs Prototypal Inheritance | Feature | Classical | Prototypal | |---------|-----------|------------| | Model | Class-based | Object-based | | Inheritance | Class extends class | Object links to object | | Languages | Java, C++, C# | JavaScript | | Flexibility | Static | Dynamic | **Interview question:** "Why does JS use prototypal inheritance?" **Answer:** JavaScript uses prototypes for flexibility and memory efficiency. Objects inherit directly from other objects via `[[Prototype]]` chain, allowing dynamic extension and modification at runtime without rigid class hierarchies. ### 162. Prototype Chain Objects link to other objects via `__proto__`. ```js const parent = {a: 1}; const child = Object.create(parent); child.a; // 1 (inherited) child.hasOwnProperty("a"); // false "a" in child; // true (via chain) // Chain: child → parent → Object.prototype → null ``` **Lookup order:** instance → prototype → prototype's prototype → ... → null ### 163. Object.create() Creates new object with specified prototype. ```js const animal = { speak() { return "sound"; } }; const dog = Object.create(animal); dog.speak(); // "sound" ``` **Benefits:** - Clean inheritance - Can create null-prototype objects: `Object.create(null)` — useful for dictionaries (no inherited methods) ### 164. Class vs Constructor Function ```js // Constructor function (pre-ES6) function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hi, ${this.name}`; }; // Class (ES6 syntax sugar) class PersonClass { constructor(name) { this.name = name; } greet() { return `Hi, ${this.name}`; } } ``` **Under the hood:** Classes use prototypes. They are syntax sugar with stricter rules (no calling without `new`, methods are non-enumerable). ### 165. super in Classes Calls parent class constructor or methods. ```js class Animal { constructor(name) { this.name = name; } speak() { return `${this.name} makes a sound`; } } class Dog extends Animal { constructor(name, breed) { super(name); // must call before `this` this.breed = breed; } speak() { return `${super.speak()} — woof!`; } } ``` **Rule:** Must call `super()` before accessing `this` in derived constructors. ### 166. Instance vs Static Methods ```js class MathHelper { // Instance method — requires `new` double(n) { return n * 2; } // Static — called on class static square(n) { return n * n; } } const helper = new MathHelper(); helper.double(5); // 10 MathHelper.square(5); // 25 helper.square(5); // TypeError (static not on instances) ``` **Use static for:** Utility functions, factory methods **Use instance for:** Behaviors specific to an object ### 167. Getters and Setters ```js class Person { constructor(name) { this._name = name; } get name() { return this._name; } set name(value) { if (!value) throw new Error("Name required"); this._name = value; } } const p = new Person("John"); p.name; // "John" (calls getter) p.name = "Jane"; // calls setter ``` **Use for:** Validation, computed properties, encapsulation ### 168. Encapsulation Hiding internal state and exposing only necessary interface. ```js // Using closures function createCounter() { let count = 0; // private return { increment: () => ++count, get: () => count }; } // Using private fields (ES2022) class Counter { #count = 0; increment() { return ++this.#count; } get count() { return this.#count; } } ``` ### 169. Polymorphism Same interface, different implementations. ```js class Shape { area() { return 0; } } class Circle extends Shape { constructor(r) { super(); this.r = r; } area() { return Math.PI * this.r ** 2; } } class Square extends Shape { constructor(s) { super(); this.s = s; } area() { return this.s ** 2; } } [new Circle(5), new Square(4)].forEach(shape => { console.log(shape.area()); // polymorphic }); ``` ### 170. Inheritance in JS ```js class Animal { constructor(name) { this.name = name; } speak() { return `${this.name} makes a sound`; } } class Dog extends Animal { speak() { return `${this.name} barks`; } } const dog = new Dog("Rex"); dog.speak(); // "Rex barks" dog instanceof Dog; // true dog instanceof Animal; // true ``` **Caution:** Deep inheritance chains are brittle. Prefer composition. ### 171. extends vs Object.setPrototypeOf() ```js // extends — declarative, optimized class Child extends Parent {} // setPrototypeOf — dynamic, slow (deoptimizes) Object.setPrototypeOf(obj, newProto); ``` **Best practice:** Use `extends` for class inheritance. Avoid `setPrototypeOf` (performance hit). ### 172. Private Fields in JS Classes ```js class Person { #age; // private field constructor(age) { this.#age = age; } getAge() { return this.#age; } } const p = new Person(30); p.#age; // SyntaxError (can't access outside class) ``` **Benefits:** True encapsulation (not just convention like `_name`). ### 173. Symbol vs String ```js // String — collision risk const obj = { "key": 1 }; // Symbol — always unique const sym = Symbol("key"); const obj2 = { [sym]: 1 }; obj2[sym]; // 1 obj2["key"]; // undefined ``` **Use case:** Preventing property name collisions, especially in libraries. ### 174. Object.freeze() Makes object immutable. ```js const obj = Object.freeze({a: 1}); obj.a = 2; // silently fails (or throws in strict mode) obj.b = 3; // no effect ``` **Note:** Shallow only — nested objects still mutable. ```js const obj = Object.freeze({nested: {x: 1}}); obj.nested.x = 2; // works! ``` ### 175. Object.seal vs Object.freeze | Feature | Seal | Freeze | |---------|------|--------| | Add properties | No | No | | Remove properties | No | No | | Modify values | Yes | No | ```js const sealed = Object.seal({a: 1}); sealed.a = 2; // OK sealed.b = 3; // no effect const frozen = Object.freeze({a: 1}); frozen.a = 2; // no effect ``` ### 176. Read-Only Properties ```js const obj = {}; Object.defineProperty(obj, "x", { value: 10, writable: false, configurable: false }); obj.x = 20; // no effect ``` **Use case:** Constants, config objects ### 177. Mixins Reusable behaviors without inheritance. ```js const canFly = { fly() { return `${this.name} flies`; } }; const canSwim = { swim() { return `${this.name} swims`; } }; class Duck { constructor(name) { this.name = name; } } Object.assign(Duck.prototype, canFly, canSwim); const duck = new Duck("Donald"); duck.fly(); // "Donald flies" duck.swim(); // "Donald swims" ``` **Benefits:** Flexibility, compose behaviors ### 178. Composition vs Inheritance ```js // Inheritance (is-a) — rigid class Bird extends Animal {} class Penguin extends Bird {} // problem: can't fly! // Composition (has-a) — flexible class Penguin { constructor() { this.flyer = new NonFlyer(); // or null this.swimmer = new Swimmer(); } } ``` **Interview answer:** "Favor composition over inheritance" because it's more flexible, avoids fragile hierarchies, and allows mixing behaviors. ### 179. Method Chaining Returning `this` to enable chaining. ```js class QueryBuilder { constructor() { this.query = ""; } select(fields) { this.query += `SELECT ${fields} `; return this; } from(table) { this.query += `FROM ${table} `; return this; } where(condition) { this.query += `WHERE ${condition}`; return this; } } new QueryBuilder() .select("id, name") .from("users") .where("age > 18"); ``` **Use case:** Fluent APIs, jQuery, lodash chains ### 180. Duck Typing Type determined by behaviors, not type name. ```js function makeItQuack(duck) { if (typeof duck.quack === "function") { duck.quack(); } } makeItQuack({ quack: () => console.log("Quack!") }); // works makeItQuack({ squawk: () => console.log("Squawk!") }); // ignored ``` **"If it walks like a duck and quacks like a duck, it's a duck."** --- ## 181–200. Advanced Arrays and Objects ### 181. How reduce Works ```js arr.reduce(callback(accumulator, currentValue, index, array), initialValue) ``` **Without initial value:** First element is accumulator, iteration starts at index 1. ```js [1, 2, 3, 4].reduce((acc, val) => acc + val, 0); // 10 [1, 2, 3, 4].reduce((acc, val) => acc + val); // 10 (same, but starts acc=1) ``` **Edge case:** Empty array without initial value throws TypeError. ```js [].reduce((a, b) => a + b); // TypeError [].reduce((a, b) => a + b, 0); // 0 ``` ### 182. map vs filter vs reduce | Method | Returns | Use case | |--------|---------|----------| | `map` | Array of same length | Transform each element | | `filter` | Array of subset | Select matching elements | | `reduce` | Any value | Aggregate, transform, group | ```js const nums = [1, 2, 3, 4, 5]; nums.map(n => n * 2); // [2, 4, 6, 8, 10] nums.filter(n => n % 2 === 0); // [2, 4] nums.reduce((sum, n) => sum + n, 0); // 15 ``` **Common mistake:** Using `map` for side effects (use `forEach`). ### 183. some vs every ```js const arr = [1, 2, 3, 4]; arr.some(n => n > 3); // true (any match) arr.every(n => n > 0); // true (all match) arr.every(n => n > 3); // false (not all > 3) ``` **Performance:** Both short-circuit (stop on first match/non-match). ### 184. Flatten Arrays ```js // flat(depth) [1, [2, 3], [4, [5]]].flat(); // [1, 2, 3, 4, [5]] [1, [2, 3], [4, [5]]].flat(Infinity); // [1, 2, 3, 4, 5] // Alternative (recursive) const flatten = arr => arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? flatten(item) : item), []); ``` ### 185. Shallow vs Deep Copy Covered in detail in section 72. **Quick reference:** ```js // Shallow const shallow = [...arr]; const shallow2 = {...obj}; const shallow3 = Object.assign({}, obj); // Deep const deep = structuredClone(obj); // modern const deep2 = JSON.parse(JSON.stringify(obj)); // limited ``` ### 186. Merging Objects ```js const obj1 = {a: 1, b: 2}; const obj2 = {b: 3, c: 4}; // Object.assign (mutates first arg) Object.assign(obj1, obj2); // {a: 1, b: 3, c: 4} // Spread (creates new object) const merged = {...obj1, ...obj2}; // {a: 1, b: 3, c: 4} ``` **Note:** Both are shallow. Later keys overwrite earlier ones. **Deep merge:** Requires custom logic or library (lodash `merge`). ### 187. Remove Duplicates ```js // Set (cleanest) const unique = [...new Set(arr)]; // filter + indexOf const unique2 = arr.filter((v, i) => arr.indexOf(v) === i); // reduce const unique3 = arr.reduce((acc, v) => acc.includes(v) ? acc : [...acc, v], []); ``` **Performance:** Set is fastest for large arrays. ### 188. indexOf vs includes vs find ```js const arr = [1, 2, 3]; arr.indexOf(2); // 1 (index or -1) arr.includes(2); // true (boolean) arr.find(n => n > 1); // 2 (element or undefined) arr.findIndex(n => n > 1); // 1 (index or -1) ``` | Method | Returns | Best for | |--------|---------|----------| | `indexOf` | Index | Need position | | `includes` | Boolean | Existence check | | `find` | Element | Finding object | | `findIndex` | Index | Need position by condition | **Common mistake:** `indexOf` uses `===` — objects compare by reference. ```js [{a: 1}].indexOf({a: 1}); // -1 (different reference) ``` ### 189. Sort Arrays of Objects ```js const users = [ {name: "John", age: 30}, {name: "Jane", age: 25}, {name: "Bob", age: 35} ]; // Ascending users.sort((a, b) => a.age - b.age); // Descending users.sort((a, b) => b.age - a.age); // By string users.sort((a, b) => a.name.localeCompare(b.name)); ``` **Common mistake:** Without compare function, array sorts as strings. ```js [10, 2, 1].sort(); // [1, 10, 2] (string sort!) ``` ### 190. Group Array Items ```js const groupBy = (arr, key) => arr.reduce((acc, item) => { const group = item[key]; if (!acc[group]) acc[group] = []; acc[group].push(item); return acc; }, {}); const users = [ {name: "John", role: "admin"}, {name: "Jane", role: "user"}, {name: "Bob", role: "admin"} ]; groupBy(users, "role"); // { admin: [...], user: [...] } ``` **Modern:** `Object.groupBy()` (ES2024) ### 191. Set in Arrays ```js // Remove duplicates const unique = [...new Set(arr)]; // Check existence (O(1)) const set = new Set(arr); set.has(value); // Intersection const intersect = [...new Set(a)].filter(x => new Set(b).has(x)); // Union const union = [...new Set([...a, ...b])]; ``` ### 192. Mutable vs Immutable Objects ```js // Mutable — direct modification const arr = [1, 2, 3]; arr.push(4); // changed original // Immutable — create new const newArr = [...arr, 4]; // original unchanged ``` **Why immutability matters:** - Predictable state (React/Redux) - Safer change detection - Avoids unintended side effects ### 193. Deep Freeze ```js function deepFreeze(obj) { Object.values(obj).forEach(v => { if (typeof v === "object" && v !== null) { deepFreeze(v); } }); return Object.freeze(obj); } const obj = deepFreeze({nested: {x: 1}}); obj.nested.x = 2; // no effect ``` ### 194. JSON.stringify vs JSON.parse ```js JSON.stringify({a: 1, b: [2, 3]}); // '{"a":1,"b":[2,3]}' JSON.parse('{"a":1}'); // {a: 1} ``` **Limitations of stringify:** - Functions → omitted - `undefined` → omitted (in objects) or `null` (in arrays) - `Symbol` → omitted - `Date` → converted to ISO string - Circular references → throws TypeError **Replacements:** `structuredClone()` (modern), lodash `cloneDeep`. ### 195. Filter Falsy Values ```js const arr = [0, 1, "", "hello", null, undefined, NaN, false]; arr.filter(Boolean); // [1, "hello"] ``` **Why it works:** `Boolean` is a function that returns truthy/falsy — perfect for `filter`. ### 196. Array Destructuring with Defaults ```js const [a = 1, b = 2] = [10]; // a=10, b=2 const [c = 1] = [null]; // c=null (not 1) ``` **Common mistake:** Defaults only apply when value is `undefined`, not `null`. ### 197. Deep Clone an Array ```js // Modern const clone = structuredClone(nestedArr); // JSON (limited) const clone2 = JSON.parse(JSON.stringify(nestedArr)); // Recursive (custom) const deepClone = arr => arr.map(item => Array.isArray(item) ? deepClone(item) : item); ``` **Caution:** JSON method fails on `Date`, `undefined`, functions, circular refs. ### 198. forEach vs map | Feature | `forEach` | `map` | |---------|-----------|-------| | Returns | `undefined` | New array | | Chainable | No | Yes | | Use case | Side effects | Transformation | | Break | No | No | ```js [1, 2, 3].forEach(n => console.log(n)); // logs const doubled = [1, 2, 3].map(n => n * 2); // [2, 4, 6] ``` **Interview question:** "Can you break out of `forEach`?" **Answer:** No — `forEach` cannot be broken. Use `for...of`, `some`, `every`, or `find` for early exit. ### 199. Object.entries Usage ```js const obj = {a: 1, b: 2}; // Iterate key-value pairs for (const [key, value] of Object.entries(obj)) { console.log(key, value); } // Transform const doubled = Object.fromEntries( Object.entries(obj).map(([k, v]) => [k, v * 2]) ); // {a: 2, b: 4} // Filter const filtered = Object.fromEntries( Object.entries(obj).filter(([k, v]) => v > 1) ); // {b: 2} ``` ### 200. Pick Certain Keys ```js // Using destructuring const {a, b} = obj; const picked = {a, b}; // Using pick function const pick = (obj, keys) => Object.fromEntries(keys.map(k => [k, obj[k]])); pick({a: 1, b: 2, c: 3}, ["a", "c"]); // {a: 1, c: 3} // Omit (opposite) const omit = (obj, keys) => Object.fromEntries( Object.entries(obj).filter(([k]) => !keys.includes(k)) ); ``` --- ## 201–220. Memory and Performance ### 201. Garbage Collection Automatic memory management that frees objects no longer referenced. **Algorithms:** - Mark-and-sweep (modern) - Reference counting (legacy) **Common memory leaks:** - Unremoved event listeners - Unremoved timers (`setInterval`) - Closures holding large references - Global variables ### 202. JS Memory Management - **Stack:** Primitive values, function calls (LIFO, fast) - **Heap:** Objects, arrays (dynamic, slower) - **GC:** Automatically frees unreachable objects ### 203. Stack vs Heap | Feature | Stack | Heap | |---------|-------|------| | Size | Small | Large | | Speed | Fast | Slower | | Stores | Primitives, refs | Objects, arrays | | Structure | LIFO | Unstructured | | Lifetime | Function call | Until GC | ### 204. Avoid Memory Leaks ```js // Bad — listener never removed element.addEventListener("click", handler); // Good — remove when no longer needed element.removeEventListener("click", handler); // Bad — interval never cleared setInterval(() => {}, 1000); // Good — clear when done const id = setInterval(() => {}, 1000); clearInterval(id); ``` **Checklist:** - Remove listeners - Clear timers - Nullify large object references - Avoid global variable accumulation - Watch out for closures holding DOM nodes ### 205. Closure Memory Problem ```js function createLargeClosure() { const largeData = new Array(1000000).fill(0); return function() { // closure retains `largeData` forever return largeData.length; }; } const leak = createLargeClosure(); // 8MB held // when done: leak = null; ``` **Fix:** Nullify unused references, or structure to avoid capturing large data. ### 206. Optimize Loops ```js // Cache length (rarely matters now) for (let i = 0, len = arr.length; i < len; i++) {} // Faster iteration for (const item of arr) {} // modern, fast // Avoid heavy work in loop condition // Bad: for (let i = 0; i < expensive(); i++) {} // Good: const limit = expensive(); for (let i = 0; i < limit; i++) {} ``` ### 207. let vs var in Memory - `let`/`const` → block-scoped, freed after block exits - `var` → function-scoped, persists for entire function **Preference:** `let`/`const` — smaller footprint, clearer lifetime. ### 208. Debounce Delay execution until inactivity. ```js function debounce(fn, delay) { let timer; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } // Usage: search input const search = debounce(query => fetchResults(query), 300); input.addEventListener("input", e => search(e.target.value)); ``` **Use for:** Search, resize, validation (after user stops typing) ### 209. Throttle Limit function calls to once per interval. ```js function throttle(fn, interval) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= interval) { lastTime = now; fn.apply(this, args); } }; } // Usage: scroll handler window.addEventListener("scroll", throttle(updateUI, 100)); ``` **Use for:** Scroll, mousemove, frequent events ### 210. Lazy Load Scripts ```html ``` ### 211. Optimize DOM Manipulation ```js // Bad — multiple reflows for (let i = 0; i < 1000; i++) { container.appendChild(document.createElement("div")); } // Good — batch with fragment const fragment = document.createDocumentFragment(); for (let i = 0; i < 1000; i++) { fragment.appendChild(document.createElement("div")); } container.appendChild(fragment); ``` **Tips:** - Batch DOM reads/writes - Use `requestAnimationFrame` for animations - Avoid layout thrashing ### 212. Virtual DOM JavaScript representation of the DOM used by frameworks like React. **How it works:** 1. State changes → new virtual DOM tree 2. Diffing with previous tree 3. Minimal real DOM updates **Benefits:** Fast updates, predictable rendering **Trade-off:** Overhead for simple changes (direct DOM might be faster). ### 213. Prevent Reflows/Repaints **Reflow triggers (layout):** - `width`, `height`, `margin`, `padding` - `top`, `left`, `right`, `bottom` - `position`, `display`, `font-size` **Repaint triggers (visual only):** - `color`, `background`, `box-shadow` **Composite only (cheap):** - `transform`, `opacity` **Tips:** - Animate `transform` and `opacity` - Use `classList` over `style` - Batch DOM changes - Avoid reading layout in loops (layout thrashing) ```js // Bad — forces reflow for (let i = 0; i < 10; i++) { el.style.width = el.offsetWidth + 10 + "px"; } // Good — read once const width = el.offsetWidth; for (let i = 0; i < 10; i++) { el.style.width = width + (i * 10) + "px"; } ``` ### 214. JS Engine Optimizations Engines like V8 optimize using: - **Hidden classes:** Same shape objects are optimized. Changing properties deoptimizes. - **Inline caching:** Caches property lookups - **JIT compilation:** Hot code compiled to machine code ```js // Fast (same shape) function Point(x, y) { this.x = x; this.y = y; } // Slow (changing shape) const p = {}; p.x = 1; // new shape p.y = 2; // new shape ``` ### 215. Sync vs Async Performance ```js // Sync — blocks UI function syncFetch() { const data = blockingRequest(); // UI freezes } // Async — non-blocking async function asyncFetch() { const data = await fetch(url); // UI remains responsive } ``` **Best practice:** Use async for I/O, network, files. Keep main thread free. ### 216. Measure Performance ```js // High-resolution timing const start = performance.now(); doSomething(); const end = performance.now(); console.log(`Took ${end - start}ms`); // With marks performance.mark("start"); doSomething(); performance.mark("end"); performance.measure("duration", "start", "end"); ``` **Tools:** Chrome DevTools Performance tab, Lighthouse ### 217. Reduce API Call Overhead ```js // Parallel requests const [users, posts] = await Promise.all([ fetch("/users"), fetch("/posts") ]); // Caching const cache = new Map(); async function getUser(id) { if (cache.has(id)) return cache.get(id); const user = await fetch(`/users/${id}`).then(r => r.json()); cache.set(id, user); return user; } // Debounce search const search = debounce(query => fetch(`/search?q=${query}`), 300); ``` ### 218. Caching vs Memoization | Feature | Caching | Memoization | |---------|---------|-------------| | Scope | Data (API responses, files) | Function results | | Key | Usually URL, ID | Function arguments | | Invalidation | TTL, manual | Manual or LRU | | Use case | Network | Heavy computation | ```js // Caching (data) const apiCache = new Map(); // Memoization (function) const memoize = fn => { const cache = new Map(); return (...args) => { const key = JSON.stringify(args); if (!cache.has(key)) cache.set(key, fn(...args)); return cache.get(key); }; }; ``` ### 219. Event Loop Delay Single-threaded JS — long tasks block everything. ```js // Bad — blocks for 3 seconds function blockUI() { const start = Date.now(); while (Date.now() - start < 3000) {} } // Good — yields control async function chunkedWork() { for (let i = 0; i < 1000; i++) { doWork(i); if (i % 10 === 0) { await new Promise(r => setTimeout(r, 0)); // yield } } } ``` **Tools:** `setTimeout`, `requestAnimationFrame`, `requestIdleCallback`, `queueMicrotask` ### 220. Profiling Memory and CPU **Chrome DevTools:** 1. **Performance tab:** Record timeline, see long tasks, reflows 2. **Memory tab:** Heap snapshots, allocation timeline 3. **Coverage tab:** Find unused code **Workflow:** 1. Reproduce slow/leaky scenario 2. Record 3. Analyze hotspots 4. Optimize 5. Re-measure **Key metrics:** - FCP (First Contentful Paint) - LCP (Largest Contentful Paint) - TBT (Total Blocking Time) - CLS (Cumulative Layout Shift) --- ## 221–235. JavaScript Internals and Patterns ### 221. Event Loop Mechanism allowing single-threaded JS to handle async operations. **Components:** 1. **Call stack:** Executes sync code 2. **Web APIs:** Handles async operations (timers, fetch, DOM events) 3. **Task queues:** - **Microtask queue:** Promises, `queueMicrotask`, MutationObserver - **Macrotask queue:** `setTimeout`, `setInterval`, I/O, UI events 4. **Event loop:** Moves tasks from queues to stack when stack is empty **Priority:** Microtasks > Macrotasks **Steps of one loop iteration:** 1. Execute all microtasks 2. Render (if needed) 3. Take one macrotask, execute 4. Repeat ### 222. Call Stack vs Microtasks vs Macrotasks ```js console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve().then(() => console.log("3")); console.log("4"); // Output: 1, 4, 3, 2 ``` **Why:** Sync first (`1`, `4`), then microtasks (`3`), then macrotasks (`2`). **Rules:** - Call stack executes all sync code first - After each task, all microtasks run - Then rendering (browser) - Then next macrotask **Trick question:** "Why does `setTimeout(0)` not run immediately?" **Answer:** It's scheduled as a macrotask — must wait for current stack + all microtasks to finish. Also, minimum delay in most browsers is ~4ms. ### 223. JavaScript Concurrency Single-threaded, but concurrent through: - **Event loop:** Cooperative multitasking - **Web Workers:** True parallelism (separate thread) - **Async I/O:** Non-blocking operations **Model:** Concurrency, not parallelism (in the main thread). ### 224. Sync, Async, Non-Blocking | Concept | Meaning | Example | |---------|---------|---------| | Synchronous | Runs immediately, blocking | `alert()`, loops | | Asynchronous | Scheduled, runs later | `setTimeout`, `fetch` | | Non-blocking | Doesn't stop other code | Async I/O | **Note:** Async is not always non-blocking. `await fetch()` inside an async function still blocks that function's progression. ### 225. Modules and Why They're Useful ```js // math.js export function add(a, b) { return a + b; } // app.js import { add } from "./math.js"; ``` **Benefits:** - Encapsulation (private scope) - Reusability - Dependency management - Tree-shaking - Lazy loading ### 226. Module Bundlers **Webpack:** - Powerful, flexible - Heavy config - Good for complex projects **Vite:** - Modern, uses ES modules natively - Fast dev server (HMR) - Rollup for production **Rollup:** - Library-focused - Great tree-shaking **esbuild:** - Extremely fast (Go-based) **What bundlers do:** - Combine modules - Transpile (Babel) - Minify - Split chunks - Asset processing ### 227. CommonJS vs ES6 Modules | Feature | CommonJS | ES6 Modules | |---------|----------|-------------| | Syntax | `require` / `module.exports` | `import` / `export` | | Loading | Sync | Async (static) | | Analysis | Runtime | Static | | Tree-shaking | No | Yes | | Environment | Node.js | Browser + Node | | `this` at top | `module.exports` | `undefined` | ```js // CommonJS const { add } = require("./math"); module.exports = { add }; // ES6 import { add } from "./math.js"; export { add }; export default fn; ``` ### 228. Design Patterns in JS | Pattern | Purpose | |---------|---------| | Module | Encapsulation | | Singleton | One instance | | Observer | Event system | | Factory | Object creation | | Prototype | Clone objects | | Decorator | Add behavior | | Strategy | Swappable algorithms | | MVC/MVVM | UI architecture | ### 229. Revealing Module Pattern ```js const Counter = (function() { let count = 0; // private function increment() { count++; } function getCount() { return count; } return { increment, getCount }; })(); Counter.increment(); Counter.getCount(); // 1 Counter.count; // undefined (private) ``` **Benefits:** Clear public API, true privacy. ### 230. Observer Pattern ```js class Subject { constructor() { this.observers = []; } subscribe(observer) { this.observers.push(observer); } unsubscribe(observer) { this.observers = this.observers.filter(o => o !== observer); } notify(data) { this.observers.forEach(o => o.update(data)); } } const subject = new Subject(); subject.subscribe({ update: data => console.log("A:", data) }); subject.subscribe({ update: data => console.log("B:", data) }); subject.notify("Hello"); // "A: Hello", "B: Hello" ``` **Use case:** Event emitters, reactive frameworks (RxJS, Vue). ### 231. Singleton Pattern ```js class Database { constructor() { if (Database.instance) return Database.instance; this.connection = "connected"; Database.instance = this; } } const db1 = new Database(); const db2 = new Database(); db1 === db2; // true ``` **Use case:** Config, logger, DB connection, state store. ### 232. Factory vs Constructor ```js // Factory — returns object, no `new` function createUser(name) { return { name, greet() { return `Hi, ${name}`; } }; } // Constructor — uses `new` function User(name) { this.name = name; } // Class (modern constructor) class User2 { constructor(name) { this.name = name; } } ``` | Feature | Factory | Constructor | |---------|---------|-------------| | `new` needed | No | Yes | | `instanceof` | No (plain object) | Yes | | Flexible | Yes (can return anything) | No | | Use for | Simple objects, conditionals | Inheritance | ### 233. Functional Programming in JS **Core principles:** - Pure functions (no side effects) - Immutability - First-class functions - Function composition ```js // Pure const add = (a, b) => a + b; // Impure let total = 0; function addToTotal(n) { total += n; } // side effect // Immutable const newArr = [...arr, 4]; // Function composition const compose = (f, g) => x => f(g(x)); const toUpper = s => s.toUpperCase(); const exclaim = s => s + "!"; const shout = compose(exclaim, toUpper); shout("hello"); // "HELLO!" ``` ### 234. Currying Transform multi-arg function into sequence of single-arg functions. ```js const add = a => b => c => a + b + c; add(1)(2)(3); // 6 // Generic curry helper const curry = fn => function curried(...args) { if (args.length >= fn.length) return fn(...args); return (...next) => curried(...args, ...next); }; const multiply = curry((a, b, c) => a * b * c); multiply(2)(3)(4); // 24 multiply(2, 3)(4); // 24 multiply(2)(3, 4); // 24 ``` **Use cases:** Function composition, partial application, reusable predicates. ### 235. Partial Application Pre-fill some arguments of a function. ```js function multiply(a, b, c) { return a * b * c; } const doubleTriple = multiply.bind(null, 2, 3); doubleTriple(4); // 24 // Manual partial const partial = (fn, ...preset) => (...later) => fn(...preset, ...later); const tripler = partial(multiply, 1, 3); tripler(5); // 15 ``` **Currying vs Partial:** | Feature | Currying | Partial Application | |---------|----------|---------------------| | Arity | Always 1-arg chain | Any arity | | Input | All args distributed | Pre-fills some | | Use | Functional pipelines | Configuration | --- # Part 4: Expert Level — Advanced Topics --- ## 236–250. Real-World JavaScript ### 236. this in Different Contexts ```js // 1. Global (non-strict) → window / global console.log(this); // 2. Method → the object const obj = { name: "John", greet() { return this.name; } }; obj.greet(); // "John" // 3. Constructor → new instance function User(name) { this.name = name; } new User("John"); // 4. Arrow → lexical const arrow = () => this; // captures outer `this` // 5. Explicit → call/apply/bind greet.call(person); // 6. Event handler → element button.addEventListener("click", function() { this; // button }); ``` **Trick question:** "What is `this` in a standalone function call?" **Answer:** In non-strict mode → global object. In strict mode → `undefined`. ### 237. JS Engine and Runtime **Engine:** Parses, compiles, executes JS (V8, SpiderMonkey, JavaScriptCore) **Runtime:** Environment providing APIs: - **Browser:** `window`, `document`, `fetch`, `setTimeout` - **Node.js:** `global`, `fs`, `http`, `process` **Why separated:** JS spec defines language; runtime defines environment-specific APIs. ### 238. Weak References `WeakMap` and `WeakSet` hold weak references. ```js const wm = new WeakMap(); let key = {}; wm.set(key, "value"); key = null; // object can be garbage collected // entry automatically removed from WeakMap ``` **Use cases:** - Private data association - DOM element metadata (no leak when element removed) - Caching (entries auto-cleanup) **Limitations:** - Not iterable - No `.size` - Keys must be objects ### 239. Proxy and Reflect **Proxy** intercepts operations on objects. ```js const target = { name: "John" }; const proxy = new Proxy(target, { get(obj, prop) { return prop in obj ? obj[prop] : "default"; }, set(obj, prop, value) { if (typeof value !== "string") throw new TypeError(); obj[prop] = value; return true; } }); proxy.name; // "John" proxy.age; // "default" proxy.name = "Jane"; // OK proxy.age = 30; // TypeError ``` **Reflect:** Provides default behavior for handlers. ```js const proxy2 = new Proxy(target, { get(obj, prop) { console.log(`Accessing ${prop}`); return Reflect.get(obj, prop); } }); ``` **Use cases:** - Validation - Logging - Reactive frameworks (Vue 3) - Virtual properties ### 240. Symbol.iterator and Iterable Protocol Makes object usable with `for...of`, spread, destructuring. ```js const iterable = { data: [1, 2, 3], [Symbol.iterator]() { let i = 0; return { next: () => ({ value: this.data[i], done: i++ >= this.data.length }) }; } }; [...iterable]; // [1, 2, 3] for (const x of iterable) console.log(x); ``` ### 241. Custom Iterators ```js function range(start, end) { return { [Symbol.iterator]() { let current = start; return { next() { if (current <= end) { return { value: current++, done: false }; } return { value: undefined, done: true }; } }; } }; } [...range(1, 5)]; // [1, 2, 3, 4, 5] ``` **Better:** Use generators. ### 242. Generator Functions and yield ```js function* counter() { yield 1; yield 2; yield 3; } const gen = counter(); gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 3, done: false } gen.next(); // { value: undefined, done: true } ``` **Use cases:** - Custom iterables - Lazy evaluation - Infinite sequences - Async flow (before async/await) ### 243. Generator vs Async Generator ```js // Generator — sync function* gen() { yield 1; } // Async Generator — async async function* asyncGen() { yield await Promise.resolve(1); yield await Promise.resolve(2); } for await (const x of asyncGen()) { console.log(x); } ``` **Use case:** Streaming data, paginated APIs. ### 244. Handling Large Data with Streams Node.js streams process data chunk by chunk. ```js const fs = require("fs"); const readStream = fs.createReadStream("large.txt", "utf8"); readStream.on("data", chunk => process(chunk)); readStream.on("end", () => console.log("Done")); ``` **Benefits:** Constant memory usage, even for GB-size files. **Browser equivalent:** `ReadableStream` API. ### 245. Memory Leaks in Closures ```js // Bad function attach() { const largeData = new Array(1e6).fill(0); document.getElementById("btn").addEventListener("click", () => { console.log(largeData.length); // held forever }); } // Better function attach2() { const dataSize = 1e6; document.getElementById("btn").addEventListener("click", () => { console.log(dataSize); // only number captured }); } ``` **Detect with:** Chrome DevTools Memory tab, heap snapshots, compare before/after. ### 246. Optimize Long-Running JS ```js // Chunk work async function processLargeArray(items) { for (let i = 0; i < items.length; i++) { process(items[i]); if (i % 1000 === 0) { await new Promise(r => setTimeout(r, 0)); } } } // Or use requestIdleCallback function idleWork(deadline) { while (deadline.timeRemaining() > 0 && tasks.length) { tasks.shift()(); } if (tasks.length) requestIdleCallback(idleWork); } ``` **Or Web Workers:** True parallelism. ### 247. Web Workers Background thread — cannot access DOM. ```js // main.js const worker = new Worker("worker.js"); worker.postMessage({ data: [1, 2, 3] }); worker.onmessage = e => console.log(e.data); // worker.js self.onmessage = e => { const result = e.data.data.map(x => x * 2); self.postMessage(result); }; ``` **Use cases:** - Image processing - Large data computations - Parsing - Encryption ### 248. Service Workers vs Web Workers | Feature | Web Worker | Service Worker | |---------|------------|----------------| | Purpose | Background JS | Network proxy, caching | | DOM | No | No | | Lifespan | While page open | Persistent (even closed) | | HTTPS | No | Required | | Use | CPU work | Offline, push, cache | ```js // Service Worker registration navigator.serviceWorker.register("/sw.js"); // In sw.js — cache assets self.addEventListener("install", e => { e.waitUntil( caches.open("v1").then(cache => cache.addAll(["/", "/app.js"])) ); }); ``` ### 249. Secure JS in Production **Client-side security:** - Never trust client code (users can modify) - Never store secrets in JS (API keys, tokens) - Use HTTPS only - Content Security Policy (CSP) ```html ``` **Prevent XSS:** ```js // Bad el.innerHTML = userInput; // Good el.textContent = userInput; // Or sanitize with DOMPurify el.innerHTML = DOMPurify.sanitize(userInput); ``` **Other practices:** - Minify/obfuscate (deterrence only) - Use Subresource Integrity (SRI) - Avoid `eval` and `new Function` ### 250. High-Performance JS Best Practices **DOM:** - Batch updates - Use `DocumentFragment` - Event delegation - Avoid layout thrashing - Use `requestAnimationFrame` for visuals **Memory:** - Clean up listeners and timers - Watch for closure leaks - Use `WeakMap`/`WeakSet` - Profile with DevTools **Async:** - Use `async/await` for readability - Parallelize with `Promise.all` - Debounce/throttle frequently-called functions - Offload heavy work to Web Workers **General:** - Use efficient data structures (`Map`, `Set`) - Avoid global variables - Cache expensive computations (memoization) - Lazy load modules - Tree-shake unused code - Code-split for large apps - Use modern syntax (engines optimize better) --- # Part 5: Practical Exercises --- ## Exercise 1: Debounce Function **Task:** Implement `debounce` from scratch. ```js function debounce(fn, delay) { let timer; return function(...args) { const context = this; clearTimeout(timer); timer = setTimeout(() => fn.apply(context, args), delay); }; } // Test const search = debounce(q => console.log("Search:", q), 300); search("a"); search("ab"); search("abc"); // Only logs "Search: abc" after 300ms ``` --- ## Exercise 2: Deep Clone **Task:** Write a recursive deep clone. ```js function deepClone(value) { if (value === null || typeof value !== "object") return value; if (value instanceof Date) return new Date(value); if (Array.isArray(value)) return value.map(deepClone); const clone = {}; for (const key in value) { if (value.hasOwnProperty(key)) { clone[key] = deepClone(value[key]); } } return clone; } const original = {a: 1, b: {c: 2}, d: [1, 2]}; const copy = deepClone(original); copy.b.c = 99; console.log(original.b.c); // 2 (unchanged) ``` **Note:** For production, use `structuredClone()`. --- ## Exercise 3: Flatten Array **Task:** Flatten nested array to any depth. ```js // Built-in const flat = arr => arr.flat(Infinity); // Recursive function flatten(arr) { return arr.reduce((acc, item) => acc.concat(Array.isArray(item) ? flatten(item) : item), []); } // With iteration (avoid stack overflow) function flattenIterative(arr) { const result = []; const stack = [...arr]; while (stack.length) { const item = stack.shift(); if (Array.isArray(item)) stack.unshift(...item); else result.push(item); } return result; } flatten([1, [2, [3, [4]]]]); // [1, 2, 3, 4] ``` --- ## Exercise 4: Event Emitter **Task:** Implement a simple event emitter class. ```js class EventEmitter { constructor() { this.events = {}; } on(event, listener) { if (!this.events[event]) this.events[event] = []; this.events[event].push(listener); return () => this.off(event, listener); } off(event, listener) { if (!this.events[event]) return; this.events[event] = this.events[event].filter(l => l !== listener); } once(event, listener) { const wrapper = (...args) => { listener(...args); this.off(event, wrapper); }; this.on(event, wrapper); } emit(event, ...args) { (this.events[event] || []).forEach(l => l(...args)); } } // Test const emitter = new EventEmitter(); const off = emitter.on("hello", name => console.log("Hi", name)); emitter.emit("hello", "John"); // Hi John off(); emitter.emit("hello", "John"); // (nothing) ``` --- ## Exercise 5: Group By **Task:** Group array of objects by a key. ```js function groupBy(arr, keyFn) { return arr.reduce((acc, item) => { const key = typeof keyFn === "function" ? keyFn(item) : item[keyFn]; (acc[key] = acc[key] || []).push(item); return acc; }, {}); } const users = [ {name: "John", age: 30}, {name: "Jane", age: 25}, {name: "Bob", age: 30} ]; groupBy(users, "age"); // { 25: [...], 30: [...] } groupBy(users, u => u.age > 28 ? "senior" : "junior"); // { senior: [...], junior: [...] } ``` --- ## Exercise 6: Currying Function **Task:** Implement generic curry. ```js function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function(...next) { return curried.apply(this, [...args, ...next]); }; }; } const add3 = curry((a, b, c) => a + b + c); add3(1)(2)(3); // 6 add3(1, 2)(3); // 6 add3(1, 2, 3); // 6 ``` --- ## Exercise 7: Memoize **Task:** Cache function results. ```js function memoize(fn) { const cache = new Map(); return function(...args) { const key = JSON.stringify(args); if (cache.has(key)) { console.log("cached"); return cache.get(key); } const result = fn.apply(this, args); cache.set(key, result); return result; }; } const slowAdd = (a, b) => { for (let i = 0; i < 1e7; i++) {} return a + b; }; const fastAdd = memoize(slowAdd); fastAdd(2, 3); // slow fastAdd(2, 3); // fast (cached) ``` --- ## Exercise 8: Promise Polyfill **Task:** Implement a simplified Promise. ```js class MyPromise { constructor(executor) { this.state = "pending"; this.value = undefined; this.callbacks = []; const resolve = value => { if (this.state !== "pending") return; this.state = "fulfilled"; this.value = value; this.callbacks.forEach(cb => cb.onFulfilled(value)); }; const reject = reason => { if (this.state !== "pending") return; this.state = "rejected"; this.value = reason; this.callbacks.forEach(cb => cb.onRejected(reason)); }; try { executor(resolve, reject); } catch (err) { reject(err); } } then(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { const handle = () => { try { if (this.state === "fulfilled") { resolve(onFulfilled ? onFulfilled(this.value) : this.value); } else if (this.state === "rejected") { if (onRejected) resolve(onRejected(this.value)); else reject(this.value); } } catch (err) { reject(err); } }; if (this.state === "pending") { this.callbacks.push({ onFulfilled: handle, onRejected: handle }); } else { setTimeout(handle, 0); } }); } catch(onRejected) { return this.then(null, onRejected); } } // Test new MyPromise((resolve) => resolve(42)) .then(v => v * 2) .then(v => console.log(v)); // 84 ``` --- ## Exercise 9: Array.prototype.map Polyfill ```js Array.prototype.myMap = function(callback) { const result = []; for (let i = 0; i < this.length; i++) { if (i in this) { // skip holes result[i] = callback(this[i], i, this); } } return result; }; [1, 2, 3].myMap(x => x * 2); // [2, 4, 6] ``` --- ## Exercise 10: Flatten Object **Task:** Flatten nested object to flat keys. ```js function flattenObject(obj, prefix = "") { return Object.keys(obj).reduce((acc, key) => { const newKey = prefix ? `${prefix}.${key}` : key; if (typeof obj[key] === "object" && obj[key] !== null && !Array.isArray(obj[key])) { Object.assign(acc, flattenObject(obj[key], newKey)); } else { acc[newKey] = obj[key]; } return acc; }, {}); } flattenObject({a: {b: {c: 1}}, d: 2}); // {"a.b.c": 1, d: 2} ``` --- # Part 6: Final Revision Checklist --- ## Beginner Checklist - [ ] Data types: primitives vs reference - [ ] `var` vs `let` vs `const` — scope, hoisting, TDZ - [ ] `==` vs `===` — type coercion - [ ] Truthy/falsy values - [ ] `typeof` and its quirks (`typeof null` → `"object"`) - [ ] Function declaration vs expression — hoisting - [ ] `null` vs `undefined` - [ ] Floating-point issues (`0.1 + 0.2`) - [ ] Template literals - [ ] `parseInt` vs `Number` ## Intermediate Checklist - [ ] Arrow functions and lexical `this` - [ ] Destructuring (array + object, defaults, rename) - [ ] Rest vs spread - [ ] `map`, `filter`, `reduce` — when to use each - [ ] `forEach` vs `map` (side effects vs transform) - [ ] `slice` vs `splice` - [ ] `some` vs `every` - [ ] Closures — what, why, gotchas - [ ] `call`, `apply`, `bind` — differences - [ ] `Promise` — states, `then`, `catch`, `finally` - [ ] `async/await` — try/catch, error handling - [ ] `Promise.all` vs `race` vs `allSettled` vs `any` - [ ] Optional chaining `?.` and nullish coalescing `??` - [ ] Map vs Object - [ ] Set vs Array - [ ] Shallow vs deep copy - [ ] Object destructuring vs array destructuring ## Advanced Checklist - [ ] Prototype chain - [ ] `Object.create` vs `class extends` - [ ] Class fields (public/private `#`) - [ ] Static vs instance methods - [ ] Getters/setters - [ ] Encapsulation (closure vs `#` fields) - [ ] `Object.freeze` vs `Object.seal` - [ ] Currying vs partial application - [ ] Memoization - [ ] Event delegation - [ ] Event bubbling vs capturing - [ ] `preventDefault` vs `stopPropagation` - [ ] `innerText` vs `textContent` - [ ] `HTMLCollection` vs `NodeList` - [ ] `DOMContentLoaded` vs `load` ## Expert Checklist - [ ] Event loop — microtasks vs macrotasks - [ ] Call stack behavior - [ ] `this` binding — 6 contexts - [ ] WeakMap/WeakSet — use cases - [ ] Proxy and Reflect - [ ] Iterators and iterables - [ ] Generator functions - [ ] Async generators - [ ] Web Workers vs Service Workers - [ ] Memory leaks — closures, listeners, timers - [ ] Debounce vs throttle - [ ] Reflow vs repaint - [ ] Debounce vs throttle implementation - [ ] Module systems (CommonJS vs ES6) - [ ] Bundlers (Webpack, Vite, Rollup) - [ ] Design patterns (Singleton, Observer, Module, Factory) - [ ] Functional programming (pure, immutable, compose) - [ ] Security: XSS, CSP, sanitization --- ## Common Interview Traps | Trap Question | Key Answer | |---------------|------------| | `typeof null` | `"object"` (historical bug) | | `[] == false` | `true` (coercion to `""` → `0`) | | `NaN === NaN` | `false` (use `Number.isNaN`) | | `0.1 + 0.2 === 0.3` | `false` (floating point) | | `setTimeout(0)` order | After all microtasks | | `var` in loop with closures | All closures share same variable | | `this` in arrow function | Lexical, from outer scope | | `[1, 10, 2].sort()` | `[1, 10, 2]` (string sort by default) | | `parseInt("10abc")` | `10` (stops at non-digit) | | `"5" - 2` | `3` (coerces to number) | | `delete` an array element | Leaves hole, doesn't shift | | `arr.length = 0` | Empties array (mutates!) | | `Array(3)` | Array of length 3, all holes | | `JSON.stringify(undefined)` | `undefined` (not string!) | | `console.log` order with Promises | Sync → micro → macro | --- ## Final Interview Tips 1. **Explain your reasoning** — don't just give answers 2. **Write code** — even pseudocode helps 3. **Mention trade-offs** — no solution is perfect 4. **Watch for edge cases** — empty arrays, `null`, `undefined`, `NaN` 5. **Modern syntax matters** — show you know ES6+ 6. **Mention performance** — event loop, reflows, memory 7. **Security awareness** — XSS, sanitization 8. **Don't guess** — say "I'm not sure, but I'd approach it like..." 9. **Prepare examples** — real projects, GitHub repos 10. **Practice aloud** — most interviews are conversational --- # Conclusion This guide covers JavaScript from fundamentals to expert internals. Use it to: - **Learn step by step** — work through sections in order - **Practice exercises** — write the code, don't just read - **Prepare for interviews** — focus on checklists and traps - **Build projects** — real understanding comes from building **Remember:** JavaScript is best learned by doing. Read, code, debug, repeat. Good luck with your JavaScript journey! 🚀37:Tb616,## From Beginner to Advanced # Table of Contents 1. **Beginner Level: TypeScript Fundamentals** 2. **Intermediate Level: Practical TypeScript** 3. **Advanced Level: Expert TypeScript** 4. **JavaScript and TypeScript Relationship** 5. **Interview Questions and Answers** 6. **Practical Code Examples** 7. **Real-World TypeScript Development** 8. **Practical Exercises** 9. **Important Comparisons** 10. **Final Interview Preparation** --- # Part 1: Beginner Level — TypeScript Fundamentals --- ## 1. Introduction to TypeScript ### What is TypeScript? TypeScript is a programming language built on top of JavaScript. It adds **static typing** to JavaScript. This means you can define what type of data a variable, function parameter, or object property should hold. **Simple definition:** TypeScript is JavaScript with extra type safety. ### Why Use TypeScript? - **Catches errors early:** Type errors are found at compile time, not runtime - **Better code documentation:** Types act as built-in documentation - **Improved IDE support:** Autocomplete, refactoring, and navigation work better - **Easier refactoring:** The compiler warns you when changes break something - **Better collaboration:** Types make code easier to understand ### TypeScript vs JavaScript | Feature | JavaScript | TypeScript | |---------|------------|------------| | Typing | Dynamic (runtime) | Static (compile time) | | Errors | Found at runtime | Found at compile time | | Compilation | Not needed | Compiles to JavaScript | | Tooling | Basic | Rich (IntelliSense) | | Learning curve | Easier | Steeper | | File extension | `.js` | `.ts` / `.tsx` | ### Installation and Setup ```bash # Install TypeScript globally npm install -g typescript # Check version tsc --version # Initialize a project tsc --init # Compile a file tsc app.ts ``` ### The TypeScript Compiler (tsc) The compiler converts `.ts` files to `.js` files. It also performs type checking and reports errors. ```bash # Compile single file tsc app.ts # Compile with watch mode tsc --watch # Compile entire project (uses tsconfig.json) tsc ``` ### tsconfig.json This file controls how TypeScript compiles your code. ```json { "compilerOptions": { "target": "ES2020", "module": "commonjs", "strict": true, "outDir": "./dist", "rootDir": "./src", "esModuleInterop": true, "skipLibCheck": true }, "include": ["src/**/*"], "exclude": ["node_modules"] } ``` **Important options:** | Option | Purpose | |--------|---------| | `strict` | Enables all strict type checks | | `target` | JavaScript version to output | | `module` | Module system to use | | `outDir` | Output directory for compiled files | | `rootDir` | Source directory | | `noImplicitAny` | Error on implicit `any` | | `strictNullChecks` | Treat `null`/`undefined` as distinct types | --- ## 2. Basic Types and Annotations ### Type Annotations You can explicitly tell TypeScript what type a variable should have. ```typescript let name: string = "John"; let age: number = 30; let isActive: boolean = true; let nothing: null = null; let notDefined: undefined = undefined; ``` ### Type Inference TypeScript can often figure out the type without explicit annotation. ```typescript let name = "John"; // inferred as string let age = 30; // inferred as number let isActive = true; // inferred as boolean ``` **Best practice:** Let TypeScript infer simple types. Annotate when the type isn't obvious or when you want to enforce a specific type. ### Primitive Types ```typescript // String let greeting: string = "Hello"; // Number (includes integers and floats) let count: number = 42; let price: number = 19.99; // Boolean let isDone: boolean = false; // Null and Undefined (only with strictNullChecks) let empty: null = null; let notSet: undefined = undefined; // Symbol let sym: symbol = Symbol("key"); // BigInt let big: bigint = 9007199254740991n; ``` ### Arrays ```typescript // Two syntaxes (both work the same) let numbers: number[] = [1, 2, 3]; let strings: Array = ["a", "b", "c"]; // Mixed types let mixed: (string | number)[] = ["hello", 42]; ``` ### Tuples Tuples are fixed-length arrays where each element has a specific type. ```typescript let person: [string, number] = ["John", 30]; // Access elements person[0]; // string person[1]; // number // Error: person[2] does not exist // Error: person = [30, "John"] (wrong order) ``` **Use cases:** Return multiple values, coordinate pairs, fixed data structures. ### Objects ```typescript // Inline type let user: { name: string; age: number } = { name: "John", age: 30 }; // Optional properties let config: { debug?: boolean } = {}; // Readonly properties let point: { readonly x: number; readonly y: number } = { x: 0, y: 0 }; // point.x = 10; // Error ``` ### Functions ```typescript // Parameter and return types function add(a: number, b: number): number { return a + b; } // Arrow function const multiply = (a: number, b: number): number => a * b; // Optional parameters function greet(name: string, greeting?: string): string { return `${greeting || "Hello"}, ${name}`; } // Default parameters function greet2(name: string, greeting: string = "Hello"): string { return `${greeting}, ${name}`; } ``` ### Union Types A value can be one of several types. ```typescript let id: string | number; id = "abc"; // OK id = 123; // OK // id = true; // Error ``` ### Literal Types Specific values as types. ```typescript let direction: "left" | "right" | "up" | "down"; direction = "left"; // OK // direction = "forward"; // Error // Combine with other types type Status = "success" | "error" | "loading"; ``` ### Type Aliases Create reusable type names. ```typescript type User = { name: string; age: number; }; type ID = string | number; type Callback = (error: Error | null, data?: string) => void; ``` ### Interfaces Define the shape of objects. ```typescript interface User { name: string; age: number; email?: string; // optional } const user: User = { name: "John", age: 30 }; ``` ### Enums Named constants. ```typescript enum Direction { Up, Down, Left, Right } let dir: Direction = Direction.Up; // String enums enum Status { Success = "SUCCESS", Error = "ERROR" } ``` **Note:** Many modern codebases prefer union types over enums for simpler output. ```typescript // Alternative to enum type Direction = "Up" | "Down" | "Left" | "Right"; ``` ### The `any` Type Disables type checking. **Avoid when possible.** ```typescript let data: any = "hello"; data = 42; // OK data = true; // OK data.foo.bar; // OK (no error, but may fail at runtime) ``` ### The `unknown` Type Safer alternative to `any`. Must check type before use. ```typescript let data: unknown = "hello"; // data.toUpperCase(); // Error if (typeof data === "string") { data.toUpperCase(); // OK } ``` ### The `never` Type Represents values that never occur. ```typescript // Function that always throws function fail(message: string): never { throw new Error(message); } // Function with infinite loop function infiniteLoop(): never { while (true) {} } ``` ### The `void` Type Return type for functions that don't return a value. ```typescript function log(message: string): void { console.log(message); } ``` ### Type Assertions Tell TypeScript "trust me, I know the type." ```typescript // Angle bracket syntax let value: unknown = "hello"; let length = (value).length; // as syntax (preferred) let length2 = (value as string).length; ``` **Warning:** Assertions do not perform runtime checks. Use carefully. ### Type Narrowing TypeScript narrows types based on checks. ```typescript function process(value: string | number) { if (typeof value === "string") { // TypeScript knows value is string here console.log(value.toUpperCase()); } else { // TypeScript knows value is number here console.log(value.toFixed(2)); } } ``` **Common narrowing techniques:** - `typeof` (for primitives) - `instanceof` (for classes) - `in` (for property existence) - Equality checks - Truthiness checks ### Basic Error Handling ```typescript function parseJSON(text: string): unknown { try { return JSON.parse(text); } catch (error) { if (error instanceof Error) { console.error("Parse failed:", error.message); } return null; } } ``` **Note:** In `catch` blocks, TypeScript types errors as `unknown` (with `strict` mode). Always check before using. --- # Part 2: Intermediate Level — Practical TypeScript --- ## 3. Advanced Function Types ### Function Type Expressions ```typescript type GreetFunction = (name: string) => string; const greet: GreetFunction = (name) => `Hello, ${name}`; ``` ### Function Overloads Multiple signatures for the same function. ```typescript function makeDate(timestamp: number): Date; function makeDate(year: number, month: number, day: number): Date; function makeDate(yearOrTimestamp: number, month?: number, day?: number): Date { if (month !== undefined && day !== undefined) { return new Date(yearOrTimestamp, month - 1, day); } return new Date(yearOrTimestamp); } makeDate(1234567890); // OK makeDate(2024, 1, 15); // OK // makeDate(2024, 1); // Error (no matching overload) ``` **Use case:** Functions that accept different argument combinations. ### Optional Properties ```typescript interface Config { url: string; timeout?: number; // optional headers?: Record; } const config: Config = { url: "https://api.example.com" }; // OK ``` ### Readonly Properties ```typescript interface Point { readonly x: number; readonly y: number; } const p: Point = { x: 10, y: 20 }; // p.x = 30; // Error // Readonly arrays let arr: readonly number[] = [1, 2, 3]; // arr.push(4); // Error ``` ### Index Signatures For objects with dynamic keys. ```typescript interface StringMap { [key: string]: string; } const map: StringMap = {}; map["name"] = "John"; // OK map["age"] = "30"; // OK (values must be string) // With specific known keys interface Config { name: string; [key: string]: string | number; } ``` ### Intersection Types Combine multiple types into one. ```typescript type Person = { name: string }; type Employee = { company: string }; type WorkingPerson = Person & Employee; const wp: WorkingPerson = { name: "John", company: "Acme" }; ``` --- ## 4. Type Guards and Discriminated Unions ### Type Guards Functions or checks that narrow types. ```typescript // Custom type guard with `is` function isString(value: unknown): value is string { return typeof value === "string"; } function process(value: unknown) { if (isString(value)) { value.toUpperCase(); // OK } } ``` ### Discriminated Unions Unions with a common property (discriminant) used for narrowing. ```typescript interface LoadingState { status: "loading"; } interface SuccessState { status: "success"; data: string[]; } interface ErrorState { status: "error"; message: string; } type State = LoadingState | SuccessState | ErrorState; function render(state: State) { switch (state.status) { case "loading": return "Loading..."; case "success": return state.data.join(", "); // data exists case "error": return state.message; // message exists } } ``` **Why it's powerful:** Makes impossible states impossible. You can't access `state.data` when status is `"loading"`. **Senior interview question:** "How would you design a discriminated union for API responses with loading, success, and error states?" --- ## 5. Generics ### What Are Generics? Generics allow you to write reusable code that works with multiple types while preserving type information. **Simple definition:** Generics are type variables. ### Generic Functions ```typescript // Without generics (loses type info) function identity(arg: any): any { return arg; } // With generics (preserves type) function identity(arg: T): T { return arg; } const result = identity("hello"); // type: string ``` **The `any` vs generic difference:** With `any`, you lose the connection between input and output. With generics, TypeScript knows the output type matches the input type. ### Generic Interfaces ```typescript interface Box { value: T; } const stringBox: Box = { value: "hello" }; const numberBox: Box = { value: 42 }; ``` ### Generic Constraints Restrict what types can be used. ```typescript interface Lengthwise { length: number; } function logLength(arg: T): T { console.log(arg.length); // OK, T has length return arg; } logLength("hello"); // OK (string has length) logLength([1, 2, 3]); // OK (array has length) // logLength(42); // Error (number has no length) ``` **Using type parameters in constraints:** ```typescript function getProperty(obj: T, key: K): T[K] { return obj[key]; } const user = { name: "John", age: 30 }; getProperty(user, "name"); // string getProperty(user, "age"); // number // getProperty(user, "invalid"); // Error ``` ### Generic Classes ```typescript class Stack { private items: T[] = []; push(item: T): void { this.items.push(item); } pop(): T | undefined { return this.items.pop(); } } const numberStack = new Stack(); numberStack.push(1); numberStack.push(2); // numberStack.push("string"); // Error ``` ### Generic Parameter Defaults ```typescript function create(): T { return document.createElement("div") as T; } ``` --- ## 6. Utility Types TypeScript provides built-in generic types for common transformations. ### Partial Makes all properties optional. ```typescript interface User { name: string; age: number; } const partialUser: Partial = { name: "John" }; // age optional ``` ### Required Makes all properties required. ```typescript const fullUser: Required> = { name: "John", age: 30 }; ``` ### Readonly Makes all properties readonly. ```typescript const readOnlyUser: Readonly = { name: "John", age: 30 }; // readOnlyUser.name = "Jane"; // Error ``` ### Pick Select specific properties. ```typescript type UserName = Pick; // { name: string } ``` **Interview task:** "Recreate the `Pick` utility type." ```typescript type MyPick = { [P in K]: T[P]; }; ``` ### Omit Exclude specific properties. ```typescript type UserWithoutAge = Omit; // { name: string } ``` ### Record Create object type with specific keys and value type. ```typescript type PageInfo = Record; const pages: PageInfo = { home: { title: "Home", url: "/" }, about: { title: "About", url: "/about" } }; ``` ### ReturnType Get the return type of a function. ```typescript function getUser() { return { name: "John", age: 30 }; } type User = ReturnType; // { name: string; age: number } ``` ### Parameters Get parameter types as a tuple. ```typescript function greet(name: string, age: number) {} type GreetParams = Parameters; // [string, number] ``` ### Exclude Remove types from a union. ```typescript type T = Exclude; // string | number ``` ### Extract Keep only matching types from a union. ```typescript type T = Extract; // string | number ``` --- ## 7. keyof and typeof Operators ### keyof Gets the union of all property names of a type. ```typescript interface User { name: string; age: number; } type UserKeys = keyof User; // "name" | "age" function getValue(user: User, key: keyof User) { return user[key]; } getValue(user, "name"); // OK // getValue(user, "email"); // Error ``` ### typeof Gets the type of a value (in type position). ```typescript const user = { name: "John", age: 30 }; type UserType = typeof user; // { name: string; age: number } // With function function greet() { return "hello"; } type GreetReturn = ReturnType; ``` ### Indexed Access Types Access types of properties. ```typescript interface User { name: string; address: { city: string; zip: string }; } type NameType = User["name"]; // string type AddressType = User["address"]; // { city: string; zip: string } type CityType = User["address"]["city"]; // string type Union = User["name" | "address"]; // string | { city: string; zip: string } ``` --- ## 8. Conditional Types ### Basic Conditional Types ```typescript type IsString = T extends string ? true : false; type A = IsString<"hello">; // true type B = IsString<42>; // false ``` ### The `infer` Keyword Extract types within conditional types. ```typescript type ReturnType = T extends (...args: any[]) => infer R ? R : never; type Fn = () => string; type Result = ReturnType; // string // Extract array element type type ElementType = T extends (infer E)[] ? E : never; type Elem = ElementType; // string ``` ### Distributive Conditional Types Conditional types distribute over unions. ```typescript type ToArray = T extends any ? T[] : never; type Result = ToArray; // string[] | number[] (not (string | number)[]) ``` **To prevent distribution:** Wrap in tuple. ```typescript type ToArrayNonDist = [T] extends [any] ? T[] : never; ``` --- ## 9. Mapped Types Create new types by transforming each property. ```typescript type Readonly = { readonly [P in keyof T]: T[P]; }; type Partial = { [P in keyof T]?: T[P]; }; // Custom mapped type type Nullable = { [P in keyof T]: T[P] | null; }; // With modifiers type Mutable = { -readonly [P in keyof T]: T[P]; // removes readonly }; ``` ### Key Remapping (as) ```typescript type Getters = { [P in keyof T as `get${Capitalize}`]: () => T[P]; }; interface Person { name: string; age: number; } type PersonGetters = Getters; // { getName: () => string; getAge: () => number } ``` --- ## 10. Template Literal Types ```typescript type Greeting = `Hello, ${string}`; const g: Greeting = "Hello, World"; // OK // const bad: Greeting = "Hi"; // Error // Combine with unions type Size = "small" | "medium" | "large"; type ButtonClass = `btn-${Size}`; // "btn-small" | "btn-medium" | "btn-large" ``` **Use cases:** CSS class names, API endpoint paths, event names. --- ## 11. Classes and Inheritance ### Basic Class ```typescript class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } greet(): string { return `Hello, ${this.name}`; } } ``` ### Access Modifiers ```typescript class User { public name: string; // accessible anywhere (default) private password: string; // only within class protected email: string; // class and subclasses constructor(name: string, password: string, email: string) { this.name = name; this.password = password; this.email = email; } } ``` ### Parameter Properties Shorthand for constructor parameters. ```typescript class User { constructor( public name: string, private password: string, protected email: string ) {} } // Automatically creates and assigns properties ``` ### Inheritance ```typescript class Animal { constructor(public name: string) {} speak(): string { return `${this.name} makes a sound`; } } class Dog extends Animal { speak(): string { return `${this.name} barks`; } } ``` ### Abstract Classes Cannot be instantiated directly; must be extended. ```typescript abstract class Shape { abstract area(): number; describe(): string { return `Area: ${this.area()}`; } } class Circle extends Shape { constructor(private radius: number) { super(); } area(): number { return Math.PI * this.radius ** 2; } } ``` ### Static Members Belong to the class, not instances. ```typescript class MathUtil { static PI = 3.14159; static add(a: number, b: number): number { return a + b; } } MathUtil.PI; // OK MathUtil.add(1, 2); // OK // new MathUtil().add; // Error ``` ### Getters and Setters ```typescript class Temperature { private _celsius: number = 0; get celsius(): number { return this._celsius; } set celsius(value: number) { if (value < -273.15) throw new Error("Too cold"); this._celsius = value; } get fahrenheit(): number { return this._celsius * 9/5 + 32; } } ``` --- ## 12. Modules and Namespaces ### ES Modules ```typescript // math.ts export function add(a: number, b: number): number { return a + b; } export const PI = 3.14; export default class Calculator {} // app.ts import Calculator, { add, PI } from "./math"; ``` ### Namespaces Older TypeScript feature for organizing code. ```typescript namespace Validation { export function isEmail(text: string): boolean { return text.includes("@"); } } Validation.isEmail("test@example.com"); ``` **Note:** Modern codebases use ES modules. Namespaces are mainly for legacy or declaration files. --- ## 13. Structural Typing TypeScript uses structural typing: types are compatible if their shapes match. ```typescript interface Point { x: number; y: number; } function logPoint(p: Point) { console.log(p.x, p.y); } const point = { x: 10, y: 20, z: 30 }; logPoint(point); // OK (has x and y) ``` **"Duck typing":** If it looks like a duck and quacks like a duck, TypeScript considers it a duck. --- ## 14. Declaration Files (.d.ts) Files that describe types for JavaScript code. ```typescript // my-library.d.ts declare function greet(name: string): string; declare const version: string; declare module "untyped-lib" { export function doSomething(): void; } ``` **Use case:** Working with untyped third-party libraries. --- # Part 3: Advanced Level — Expert TypeScript --- ## 15. Advanced Generics ### Generic Constraints with keyof ```typescript function pluck(obj: T, keys: K[]): T[K][] { return keys.map(key => obj[key]); } const user = { name: "John", age: 30, city: "NYC" }; pluck(user, ["name", "age"]); // (string | number)[] ``` ### Conditional Types with Generics ```typescript type NonNullable = T extends null | undefined ? never : T; type Result = NonNullable; // string ``` ### Recursive Types ```typescript type Json = string | number | boolean | null | Json[] | { [key: string]: Json }; type DeepReadonly = { readonly [P in keyof T]: T[P] extends object ? DeepReadonly : T[P]; }; ``` --- ## 16. Advanced Type Manipulation ### The `infer` Keyword in Depth ```typescript // Extract function parameter types type FirstParam = T extends (first: infer F, ...rest: any[]) => any ? F : never; type Fn = (name: string, age: number) => void; type First = FirstParam; // string // Extract promise value type Awaited = T extends Promise ? U : T; ``` ### Distributive Conditional Types ```typescript type ToArray = T extends any ? T[] : never; type Result = ToArray; // string[] | number[] // Prevent distribution type ToArrayNonDist = [T] extends [any] ? T[] : never; type Result2 = ToArrayNonDist; // (string | number)[] ``` ### Variance TypeScript uses structural typing with specific variance rules. ```typescript // Covariance (output positions) type Producer = () => T; // Contravariance (input positions) type Consumer = (value: T) => void; ``` --- ## 17. Branded Types Create nominal-like types for stronger type safety. ```typescript type UserId = string & { readonly __brand: "UserId" }; type OrderId = string & { readonly __brand: "OrderId" }; function createUserId(id: string): UserId { return id as UserId; } const userId = createUserId("user-123"); const orderId = "order-456" as OrderId; // function processUser(id: UserId) {} // processUser(orderId); // Error: OrderId not assignable to UserId ``` **Use case:** Preventing accidental mixing of ID types, validated data vs unvalidated data. --- ## 18. Type Predicates and Assertion Functions ### Type Predicates ```typescript function isDefined(value: T | undefined): value is T { return value !== undefined; } const arr: (number | undefined)[] = [1, undefined, 3]; const defined = arr.filter(isDefined); // number[] ``` ### Assertion Functions Throw errors and narrow types. ```typescript function assertIsString(value: unknown): asserts value is string { if (typeof value !== "string") { throw new Error("Not a string"); } } function process(value: unknown) { assertIsString(value); value.toUpperCase(); // OK } ``` --- ## 19. The `satisfies` Operator Validates a value against a type without widening the type. ```typescript type Palette = Record; const palette = { red: [255, 0, 0], green: "#00ff00" } satisfies Palette; // TypeScript knows red is a tuple, not string palette.red.at(0); // OK ``` **Difference from type annotation:** ```typescript // Annotation: type is widened const withType: Palette = { red: [255, 0, 0] }; // withType.red is string | [number, number, number] // satisfies: type is preserved const withSatisfies = { red: [255, 0, 0] } satisfies Palette; // withSatisfies.red is [number, number, number] ``` --- ## 20. Const Assertions Preserve literal types. ```typescript // Without as const const config = { mode: "dark" }; // type: { mode: string } // With as const const config = { mode: "dark" } as const; // type: { readonly mode: "dark" } // Arrays const directions = ["left", "right"] as const; // type: readonly ["left", "right"] ``` **const type parameters (TS 5.0+):** ```typescript function head(arr: T): T[0] { return arr[0]; } head(["a", "b"]); // type: "a" (without as const) ``` --- ## 21. Declaration Merging Interfaces with the same name merge. ```typescript interface User { name: string; } interface User { age: number; } // Merged: { name: string; age: number } ``` **Use case:** Extending third-party types. ### Module Augmentation ```typescript // express.d.ts import { Request } from "express"; declare module "express" { interface Request { user?: { id: string; role: string }; } } ``` ### Global Augmentation ```typescript declare global { interface Window { myGlobal: string; } } ``` --- ## 22. Decorators (TypeScript 5.x) Decorators modify class behavior. ```typescript function logged any>( target: T, context: ClassDecoratorContext ) { return class extends target { constructor(...args: any[]) { super(...args); console.log(`${target.name} created`); } }; } @logged class UserService { constructor(private db: Database) {} } ``` **Types of decorators:** - Class decorators - Method decorators - Property decorators - Accessor decorators - Parameter decorators **Note:** TypeScript 5.0 adopted standard TC39 decorators. The experimental version (`experimentalDecorators: true`) differs. --- ## 23. Strict Mode The `strict` flag enables all strict checks. | Flag | Purpose | |------|---------| | `strictNullChecks` | `null` and `undefined` are distinct types | | `noImplicitAny` | Error on implicit `any` | | `strictFunctionTypes` | Stricter function parameter checking | | `strictBindCallApply` | Type-check `bind`, `call`, `apply` | | `strictPropertyInitialization` | Class properties must be initialized | | `noImplicitThis` | Error on implicit `any` for `this` | **Best practice:** Always use `strict: true`. --- ## 24. Advanced Compiler Options | Option | Purpose | |--------|---------| | `noUncheckedIndexedAccess` | Array/object access returns `T \| undefined` | | `exactOptionalPropertyTypes` | `undefined` not allowed for optional properties | | `noPropertyAccessFromIndexSignature` | Force bracket notation for index signatures | | `verbatimModuleSyntax` | Clear distinction between type and value imports | | `isolatedModules` | Ensure each file can be transpiled independently | --- # Part 4: JavaScript and TypeScript Relationship --- ## How TypeScript Works with JavaScript TypeScript is a **superset** of JavaScript. All valid JavaScript is valid TypeScript (with some exceptions for older code). ``` TypeScript = JavaScript + Type System + Modern Features ``` ### Compilation Process 1. TypeScript source (`.ts`) is type-checked 2. Type information is stripped 3. JavaScript output (`.js`) is generated 4. Source maps may be created for debugging **Important:** Type errors do **not** prevent compilation by default. TypeScript still outputs JavaScript even with type errors (unless `noEmitOnError: true`). ### Compile-Time vs Runtime Features | Feature | Exists at Runtime? | |---------|-------------------| | Type annotations | No (stripped) | | Interfaces | No (stripped) | | Type aliases | No (stripped) | | Generics | No (stripped) | | Enums | Yes (compiled to objects) | | Classes | Yes (compiled) | | Decorators | Yes (compiled) | | Namespaces | Yes (compiled to IIFE) | ### Gradual Adoption You can add TypeScript to a JavaScript project incrementally: 1. Install TypeScript 2. Add `tsconfig.json` with `allowJs: true` 3. Rename files one at a time (`.js` → `.ts`) 4. Add types gradually 5. Enable stricter options over time ```json { "compilerOptions": { "allowJs": true, "checkJs": false, "strict": false } } ``` **Senior interview question:** "How would you handle a legacy JavaScript codebase migration to TypeScript without blocking ongoing feature delivery?" --- # Part 5: Interview Questions and Answers --- ## Beginner Questions ### Q1: What is TypeScript? **Answer:** TypeScript is a superset of JavaScript that adds static typing. It compiles to plain JavaScript and catches type errors at compile time rather than runtime. ### Q2: TypeScript vs JavaScript? **Answer:** JavaScript is dynamically typed and runs directly in browsers/Node.js. TypeScript adds static types, must be compiled to JavaScript, and catches errors early. TypeScript is better for large projects; JavaScript is simpler for small scripts. ### Q3: What are the basic types in TypeScript? **Answer:** `string`, `number`, `boolean`, `null`, `undefined`, `symbol`, `bigint`, `object`, `array`, `tuple`, `enum`, `any`, `unknown`, `never`, `void`. ### Q4: What is type inference? **Answer:** TypeScript automatically determines types based on values when no explicit annotation is provided. ```typescript let name = "John"; // inferred as string ``` ### Q5: What is the difference between `any` and `unknown`? **Answer:** `any` disables type checking completely — you can do anything with it. `unknown` is safe — you must check the type before using it. Prefer `unknown` when the type is truly unknown. ### Q6: What are interfaces? **Answer:** Interfaces define the shape of objects. They can be extended and merged. ```typescript interface User { name: string; age: number; } ``` ### Q7: What are type aliases? **Answer:** Type aliases create new names for types. They can represent unions, intersections, primitives, and objects. ```typescript type ID = string | number; ``` ### Q8: What is an enum? **Answer:** An enum is a set of named constants. TypeScript enums compile to JavaScript objects. ```typescript enum Color { Red, Green, Blue } ``` --- ## Intermediate Questions ### Q9: Difference between `interface` and `type`? **Answer:** | Feature | Interface | Type | |---------|-----------|------| | Object shapes | Yes | Yes | | Unions/intersections | No (can extend) | Yes | | Declaration merging | Yes | No | | Extends | `extends` keyword | `&` operator | | Implements | Yes | No | **Guidance:** Use `interface` for object shapes and public APIs (better error messages, mergeable). Use `type` for unions, intersections, and complex compositions. ### Q10: What are generics? **Answer:** Generics are type variables that let you write reusable components that work with multiple types while preserving type information. ```typescript function identity(arg: T): T { return arg; } ``` **Senior interview question:** "How do generics improve type safety in reusable utilities like `useFetch()`?" ### Q11: What are type guards? **Answer:** Type guards narrow types based on runtime checks. ```typescript function isString(val: unknown): val is string { return typeof val === "string"; } ``` ### Q12: What is a discriminated union? **Answer:** A union of types with a common literal property (discriminant) that TypeScript uses for narrowing. ```typescript type Result = | { status: "success"; data: string } | { status: "error"; message: string }; ``` ### Q13: What are utility types? **Answer:** Built-in generic types for common transformations: `Partial`, `Required`, `Readonly`, `Pick`, `Omit`, `Record`, `ReturnType`, `Parameters`, `Exclude`, `Extract`. ### Q14: What is `keyof`? **Answer:** `keyof` produces a union of an object type's keys. ```typescript type UserKeys = keyof { name: string; age: number }; // "name" | "age" ``` ### Q15: What are conditional types? **Answer:** Types that choose based on a condition. ```typescript type IsString = T extends string ? true : false; ``` --- ## Advanced Questions ### Q16: Explain the `infer` keyword. **Answer:** `infer` extracts types within conditional types. ```typescript type ReturnType = T extends (...args: any[]) => infer R ? R : never; ``` ### Q17: What are mapped types? **Answer:** Types that transform each property of another type. ```typescript type Readonly = { readonly [P in keyof T]: T[P]; }; ``` ### Q18: What is the `satisfies` operator? **Answer:** `satisfies` validates a value against a type without widening its type. It preserves the original narrow type while ensuring compatibility. ```typescript const config = { mode: "dark" } satisfies { mode: string }; // config.mode is "dark", not string ``` ### Q19: What are branded types? **Answer:** Types that create nominal-like distinctions using intersection with a unique marker. ```typescript type UserId = string & { __brand: "UserId" }; ``` **Use case:** Preventing accidental mixing of structurally identical types. ### Q20: What is declaration merging? **Answer:** Multiple declarations with the same name merge into one. Interfaces merge; classes and namespaces can also merge. ### Q21: How do you type a function that returns different types based on input? **Answer:** Use function overloads or conditional types. ```typescript function process(input: string): string[]; function process(input: number): number[]; function process(input: string | number): string[] | number[] { return typeof input === "string" ? [input] : [input]; } ``` **Senior interview question:** "Can you explain how to type a function that returns different types depending on input parameters?" ### Q22: What is the difference between `never` and `void`? **Answer:** `void` means a function returns nothing (or returns `undefined`). `never` means a function never returns (throws or infinite loop). --- # Part 6: Practical Code Examples --- ## Example 1: Type-Safe API Response ```typescript interface ApiResponse { success: boolean; data: T; error?: string; } async function fetchUser(id: string): Promise> { const response = await fetch(`/api/users/${id}`); const data = await response.json(); return data; } interface User { id: string; name: string; email: string; } ``` ## Example 2: Generic Utility Function ```typescript function groupBy( items: T[], key: K ): Record { return items.reduce((acc, item) => { const group = String(item[key]); (acc[group] = acc[group] || []).push(item); return acc; }, {} as Record); } const users = [ { name: "John", role: "admin" }, { name: "Jane", role: "user" } ]; const byRole = groupBy(users, "role"); // { admin: [...], user: [...] } ``` ## Example 3: Discriminated Union for State ```typescript type State = | { status: "idle" } | { status: "loading" } | { status: "success"; data: T } | { status: "error"; error: Error }; function renderState(state: State, render: (data: T) => string) { switch (state.status) { case "idle": return "Ready"; case "loading": return "Loading..."; case "success": return render(state.data); case "error": return `Error: ${state.error.message}`; } } ``` ## Example 4: Type-Safe Event Emitter ```typescript type EventMap = { userLoggedIn: { userId: string }; userLoggedOut: { userId: string; reason: string }; }; class TypedEmitter> { private listeners: { [K in keyof T]?: ((data: T[K]) => void)[] } = {}; on(event: K, listener: (data: T[K]) => void) { (this.listeners[event] ??= []).push(listener); } emit(event: K, data: T[K]) { this.listeners[event]?.forEach(fn => fn(data)); } } const emitter = new TypedEmitter(); emitter.on("userLoggedIn", ({ userId }) => console.log(userId)); emitter.emit("userLoggedIn", { userId: "123" }); ``` --- # Part 7: Real-World TypeScript Development --- ## TypeScript with React ### Typing Props ```typescript interface ButtonProps { label: string; onClick: () => void; variant?: "primary" | "secondary"; disabled?: boolean; } function Button({ label, onClick, variant = "primary", disabled }: ButtonProps) { return ; } ``` ### Generic Components ```typescript interface ListProps { items: T[]; renderItem: (item: T) => React.ReactNode; } function List({ items, renderItem }: ListProps) { return

{renderItem(item)}

; } ``` ### Typing Custom Hooks ```typescript interface FetchState { data: T | null; loading: boolean; error: Error | null; } function useFetch(url: string): FetchState { // implementation } ``` **Senior React interview:** "How do you type Higher-Order Components?" ## TypeScript with Node.js ### Typing Express Middleware ```typescript import { Request, Response, NextFunction } from "express"; function authMiddleware(req: Request, res: Response, next: NextFunction) { const token = req.headers.authorization; if (!token) { return res.status(401).json({ error: "Unauthorized" }); } next(); } ``` ### Declaration Merging for Custom Request Properties ```typescript declare module "express" { interface Request { user?: { id: string }; } } ``` ## Type-Safe Environment Variables ```typescript interface Env { API_URL: string; NODE_ENV: "development" | "production" | "test"; } function getEnv(): Env { return { API_URL: process.env.API_URL!, NODE_ENV: (process.env.NODE_ENV as Env["NODE_ENV"]) || "development" }; } ``` --- # Part 8: Practical Exercises --- ## Beginner Exercises ### Exercise 1: Type the Variables ```typescript // Add types let name = "John"; let age = 30; let isActive = true; let scores = [90, 85, 88]; // Solution let name: string = "John"; let age: number = 30; let isActive: boolean = true; let scores: number[] = [90, 85, 88]; ``` ### Exercise 2: Function with Optional Parameter ```typescript // Complete the function type function greet(name: string, greeting?: string): string { return `${greeting || "Hello"}, ${name}`; } ``` --- ## Intermediate Exercises ### Exercise 3: Generic Function **Task:** Write a function that returns the first element of an array, preserving the type. ```typescript function first(arr: T[]): T | undefined { return arr[0]; } const num = first([1, 2, 3]); // number | undefined const str = first(["a", "b"]); // string | undefined ``` ### Exercise 4: Type Guard **Task:** Write a type guard for `string[]`. ```typescript function isStringArray(value: unknown): value is string[] { return Array.isArray(value) && value.every(item => typeof item === "string"); } ``` ### Exercise 5: Discriminated Union **Task:** Create a type for API results. ```typescript type ApiResult = | { success: true; data: T } | { success: false; error: string }; function handleResult(result: ApiResult) { if (result.success) { console.log(result.data); // T } else { console.log(result.error); // string } } ``` --- ## Advanced Exercises ### Exercise 6: Implement `Pick` ```typescript type MyPick = { [P in K]: T[P]; }; ``` ### Exercise 7: Deep Readonly ```typescript type DeepReadonly = { readonly [P in keyof T]: T[P] extends object ? T[P] extends Function ? T[P] : DeepReadonly : T[P]; }; ``` ### Exercise 8: Extract Function Return Types ```typescript type MyReturnType = T extends (...args: any[]) => infer R ? R : never; function getUser() { return { name: "John" }; } type User = MyReturnType; // { name: string } ``` --- # Part 9: Important Comparisons --- ## type vs interface | Feature | type | interface | |---------|------|-----------| | Object shape | Yes | Yes | | Union | Yes | No | | Intersection | Yes (`&`) | Extends | | Declaration merging | No | Yes | | `implements` | Yes | Yes | | Error messages | Less detailed | More detailed | **Recommendation:** Use `interface` for public APIs and object shapes. Use `type` for unions, complex compositions, and utility types. ## any vs unknown | Feature | any | unknown | |---------|-----|---------| | Type checking | Disabled | Enforced | | Property access | Allowed | Error until narrowed | | Assignment to typed variable | Allowed | Error until narrowed | | Safety | Unsafe | Safe | **Recommendation:** Prefer `unknown`. Use `any` only as a last resort. ## void vs never | Feature | void | never | |---------|------|-------| | Meaning | Returns nothing | Never returns | | Function type | Normal return | Throws or infinite loop | | Assignable to | undefined | Nothing | ## enum vs union type | Feature | enum | union | |---------|------|-------| | Runtime | Exists (object) | Erased | | Bundle size | Larger | Smaller | | Type safety | Good | Good | | Reverse mapping | Yes (numeric) | No | **Recommendation:** Prefer union types for simpler, smaller output. Use enums when you need named constants at runtime. ## Type assertion vs satisfies | Feature | `as` | `satisfies` | |---------|------|-------------| | Type checking | Bypassed | Enforced | | Type preservation | Widened | Preserved | | Safety | Unsafe | Safe | | Use when | You know better than compiler | Validate without widening | ## readonly vs const | Feature | `readonly` | `const` | |---------|------------|---------| | Applies to | Properties | Variables | | Enforced at | Compile time | Compile time | | Nested | No | No | | Use for | Object properties | Variable bindings | --- # Part 10: Final Interview Preparation --- ## Most Frequently Asked Questions 1. TypeScript vs JavaScript 2. `type` vs `interface` 3. `any` vs `unknown` vs `never` 4. Generics — what, why, how 5. Type guards and narrowing 6. Discriminated unions 7. Utility types (Partial, Pick, Omit, Record) 8. `keyof` and `typeof` 9. Conditional types and `infer` 10. Mapped types 11. `satisfies` operator 12. Declaration merging 13. Strict mode 14. Generic constraints 15. Function overloads ## Top Concepts Every Developer Should Know - Structural typing - Type inference vs annotation - Union and intersection types - Type guards and assertion functions - Generic constraints (`extends`) - Utility types - `keyof` operator - Discriminated unions - `satisfies` operator - Declaration merging - Branded types - Conditional types with `infer` ## Common Mistakes | Mistake | Solution | |---------|----------| | Using `any` everywhere | Use `unknown` and narrow | | Ignoring `strict` mode | Enable all strict flags | | Over-annotating obvious types | Let inference work | | Using enums for everything | Prefer union types | | Not using utility types | Learn Partial, Pick, Omit, etc. | | Forgetting to export types | Use `export type` for type-only exports | | Not narrowing `unknown` | Always check before use | | Overusing type assertions | Prefer type guards | ## Final Checklist **Beginner:** - [ ] Understand TypeScript vs JavaScript - [ ] Know all primitive types - [ ] Can write typed functions - [ ] Understand interfaces and type aliases - [ ] Know union types - [ ] Can use optional and readonly properties - [ ] Understand type inference **Intermediate:** - [ ] Can write generics - [ ] Understand generic constraints - [ ] Know utility types (Partial, Pick, Omit, Record) - [ ] Can use type guards - [ ] Understand discriminated unions - [ ] Know `keyof` and `typeof` - [ ] Can work with classes and inheritance **Advanced:** - [ ] Can write conditional types - [ ] Understand `infer` - [ ] Can write mapped types - [ ] Understand `satisfies` - [ ] Know branded types - [ ] Can do declaration merging - [ ] Understand variance - [ ] Can design type-safe APIs ## Self-Assessment Questions 1. Can you explain why `unknown` is safer than `any`? 2. Can you write a generic function that constrains its type parameter? 3. Can you implement `Pick` and `Omit` from scratch? 4. Can you design a discriminated union for a complex state? 5. Can you explain the difference between `readonly` and `Readonly`? 6. Can you write a type guard that narrows to a specific object shape? 7. Can you explain how `satisfies` differs from `as`? 8. Can you create a branded type and explain why it's useful? 9. Can you extract a function's return type using `infer`? 10. Can you migrate a JavaScript file to TypeScript step by step? --- # Conclusion This guide covers TypeScript from fundamentals to expert internals. Use it to: - **Learn step by step** — work through levels in order - **Practice with code** — write and test examples - **Prepare for interviews** — focus on comparisons and checklists - **Build real projects** — apply concepts in React, Node.js, and APIs **Remember:** TypeScript is learned by writing it. Read, code, make type errors, fix them, repeat. Good luck with your TypeScript interview!38:T14ae5, ## From Beginner to Advanced --- # Table of Contents 1. **Beginner Level** - Introduction to CSS - CSS Syntax and Rules - Ways to Add CSS - Selectors and Combinators - Colors, Backgrounds, and Borders - Text and Font Properties - The Box Model - Width, Height, Margin, and Padding - Display Property - Position Property - Units in CSS - Pseudo-Classes and Pseudo-Elements - Specificity, Inheritance, and Cascade 2. **Intermediate Level** - Flexbox - CSS Grid - Responsive Web Design - Media Queries - Advanced Positioning - Overflow and Visibility - Z-Index and Stacking Context - Transitions and Transforms - Animations and Keyframes - CSS Variables - CSS Functions - Advanced Selectors - Object-Fit and Object-Position - Gradients and Shadows - CSS Architecture - Cross-Browser Compatibility 3. **Advanced Level** - Advanced Flexbox and Grid - Container Queries - Modern CSS Features - CSS Nesting - Cascade Layers - Advanced Specificity and Cascade - Custom Properties and Theming - CSS Performance Optimization - Rendering and Browser Behavior - Accessibility in CSS - Logical Properties - CSS Containment - Common Layout Problems and Solutions 4. **Interview Questions and Answers** 5. **Practical Exercises** 6. **Final Revision Checklist** --- # Part 1: Beginner Level --- ## 1. Introduction to CSS ### What is CSS? CSS stands for **Cascading Style Sheets**. It is a stylesheet language used to describe how HTML elements should look on screen. CSS controls colors, fonts, spacing, layout, animations, and more. **Simple definition:** CSS is the language that makes websites look good. ### Why Do We Use CSS? - To separate content (HTML) from presentation (styles) - To make websites look attractive and readable - To create responsive layouts that work on all devices - To add animations and visual effects - To maintain consistent design across many pages ### Where NOT to Use CSS - CSS cannot add logic or functionality (use JavaScript) - CSS cannot store or manage data - CSS cannot change the actual HTML structure ### Common Mistakes - Using inline styles everywhere instead of external stylesheets - Ignoring the cascade and specificity rules - Using fixed units (px) for everything instead of relative units ### Best Practices - Use external stylesheets for better organization - Use meaningful class names - Keep CSS DRY (Don't Repeat Yourself) - Organize styles using modular approaches like BEM --- ## 2. CSS Syntax and Rules ### Basic CSS Syntax ```css selector { property: value; property: value; } ``` **Example:** ```css p { color: blue; font-size: 16px; } ``` ### Parts of a CSS Rule | Part | Description | Example | |------|-------------|---------| | Selector | Targets HTML elements | `p`, `.class`, `#id` | | Property | The style attribute to change | `color`, `font-size` | | Value | The setting for the property | `red`, `16px` | | Declaration | Property + value pair | `color: red;` | | Rule | Selector + declarations | `p { color: red; }` | --- ## 3. Ways to Add CSS There are three ways to add CSS to an HTML document: ### 1. Inline CSS CSS is written directly inside the HTML element using the `style` attribute. ```html

This is a paragraph.

``` **When to use:** - Quick testing - HTML emails - Small one-time style changes **When NOT to use:** - Large websites - Projects that need maintainability **Problems:** - Hard to maintain - Mixes content with presentation - High specificity makes overriding difficult ### 2. Internal CSS CSS is written inside a ` ``` **When to use:** - Single-page websites - Small demos or prototypes **When NOT to use:** - Multi-page websites - Large projects **Problems:** - Cannot be reused across pages - Makes HTML file larger ### 3. External CSS CSS is written in a separate `.css` file and linked to the HTML document. ```html ``` ```css /* styles.css */ p { color: green; font-size: 16px; } ``` **When to use:** - Almost always in real projects - Multi-page websites - Large applications **Benefits:** - Reusable across many pages - Browser can cache the file for faster loading - Easy to maintain and update ### Priority Order (Which CSS Wins?) When multiple CSS sources style the same element: 1. **Inline styles** (highest priority, unless `!important` is used elsewhere) 2. **Internal styles** 3. **External styles** 4. **Browser default styles** (lowest priority) **Trick Question:** "Which CSS has the highest priority?" **Answer:** Inline styles have the highest priority, but external CSS with `!important` can override them. --- ## 4. Selectors and Combinators ### What Are Selectors? Selectors are patterns used to target HTML elements for styling. ### Basic Selectors | Selector Type | Syntax | Example | What It Selects | |---------------|--------|---------|-----------------| | Type (Tag) | `element` | `p` | All `

` elements | | Class | `.classname` | `.btn` | All elements with `class="btn"` | | ID | `#idname` | `#header` | The element with `id="header"` | | Universal | `*` | `*` | All elements | | Attribute | `[attr=value]` | `[type="text"]` | Elements with matching attribute | | Group | `selector1, selector2` | `h1, h2, h3` | All listed selectors | ### Class vs ID vs Tag Selectors | Selector | Symbol | Usage | Specificity | Best For | |----------|--------|-------|-------------|----------| | ID | `#` | One unique element | High (100) | Unique page elements | | Class | `.` | Multiple elements | Medium (10) | Reusable styles | | Tag | none | All elements of a type | Low (1) | Base element styles | **Common Mistakes:** - Using IDs for multiple elements (IDs must be unique) - Overusing tag selectors (affects all elements globally) - Confusing `.` (class) with `#` (id) ### Combinators Combinators define relationships between selectors. | Combinator | Syntax | Meaning | Example | |------------|--------|---------|---------| | Descendant | `A B` | Any B inside A (at any depth) | `div p` | | Child | `A > B` | Direct child only | `ul > li` | | Adjacent Sibling | `A + B` | The next sibling immediately after A | `h1 + p` | | General Sibling | `A ~ B` | Any sibling after A | `h1 ~ p` | **Examples:** ```css /* Descendant: all paragraphs inside divs */ div p { color: blue; } /* Child: only direct li children of ul */ ul > li { list-style: none; } /* Adjacent sibling: the first p right after h1 */ h1 + p { font-weight: bold; } /* General sibling: all p elements after h1 */ h1 ~ p { color: gray; } ``` **Trick Question:** "What is the difference between `A B` and `A > B`?" **Answer:** `A B` selects any B inside A (at any depth). `A > B` selects only direct children B of A. **Best Practices:** - Keep combinators minimal - Prefer classes over long selector chains - Avoid deeply nested selectors for performance --- ## 5. Colors, Backgrounds, and Borders ### Color Formats | Format | Example | Transparency | Notes | |--------|---------|--------------|-------| | Named | `red`, `blue` | No | Limited options | | HEX | `#ff0000` | No | Common, concise | | RGB | `rgb(255, 0, 0)` | No | Red, Green, Blue values | | RGBA | `rgba(255, 0, 0, 0.5)` | Yes | RGB + Alpha (opacity) | | HSL | `hsl(0, 100%, 50%)` | No | Hue, Saturation, Lightness | | HSLA | `hsla(0, 100%, 50%, 0.5)` | Yes | HSL + Alpha | **Best Practices:** - Use RGBA or HSLA for transparency - Use HSL for easy color adjustments (dark mode, themes) ### Background Properties ```css .element { background-color: #f0f0f0; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } ``` **Shorthand:** ```css .element { background: #f0f0f0 url('image.jpg') no-repeat center center / cover; } ``` ### Border Properties ```css .element { border-width: 2px; border-style: solid; border-color: #333; } ``` **Shorthand:** ```css .element { border: 2px solid #333; } ``` **Border Styles:** - `solid` - solid line - `dashed` - dashed line - `dotted` - dotted line - `double` - double line - `none` - no border ### Border Radius ```css .element { border-radius: 10px; } .circle { border-radius: 50%; } ``` --- ## 6. Text and Font Properties ### Font Properties | Property | Description | Example | |----------|-------------|---------| | `font-family` | Sets the typeface | `font-family: Arial, sans-serif;` | | `font-size` | Sets text size | `font-size: 16px;` | | `font-weight` | Sets text thickness | `font-weight: bold;` or `700` | | `font-style` | Italic, normal, oblique | `font-style: italic;` | | `line-height` | Space between lines | `line-height: 1.5;` | | `letter-spacing` | Space between letters | `letter-spacing: 1px;` | | `word-spacing` | Space between words | `word-spacing: 2px;` | | `text-align` | Horizontal alignment | `text-align: center;` | | `text-decoration` | Underline, line-through | `text-decoration: underline;` | | `text-transform` | Uppercase, lowercase | `text-transform: uppercase;` | ### Font Stacks Always provide fallback fonts: ```css body { font-family: 'Helvetica Neue', Arial, sans-serif; } ``` If the first font is not available, the browser tries the next one. ### Web-Safe Fonts vs Custom Fonts **Web-safe fonts** are available on most devices: - Arial - Helvetica - Times New Roman - Georgia - Verdana **Custom fonts** are loaded using `@font-face` or services like Google Fonts: ```css @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); } body { font-family: 'MyFont', sans-serif; } ``` **Common Mistakes:** - Using non-web-safe fonts without fallbacks - Using only `px` for font sizes (affects accessibility) **Best Practices:** - Use `rem` for font sizes (scales with user settings) - Always include fallback fonts - Limit the number of font families (performance) ### Text Overflow with Ellipsis To truncate text with `...`: ```css .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` **Requirements:** - `overflow: hidden` (or `clip`) - `white-space: nowrap` - `text-overflow: ellipsis` **Limitation:** Does not work for multi-line text natively. Use `-webkit-line-clamp` for multi-line: ```css .multiline-truncate { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } ``` --- ## 7. The Box Model ### What is the Box Model? Every HTML element is a rectangular box. The box model describes how the size of this box is calculated. ### Parts of the Box Model From inside to outside: 1. **Content** - The actual text, image, or child elements 2. **Padding** - Space between content and border (inside the element) 3. **Border** - The line around padding and content 4. **Margin** - Space outside the border (between elements) ``` +-------------------------------------------+ | Margin | | +-------------------------------------+ | | | Border | | | | +-------------------------------+ | | | | | Padding | | | | | | +-------------------------+ | | | | | | | Content | | | | | | | +-------------------------+ | | | | | +-------------------------------+ | | | +-------------------------------------+ | +-------------------------------------------+ ``` ### Calculating Total Width **With `content-box` (default):** ``` Total width = width + padding-left + padding-right + border-left + border-right ``` **With `border-box`:** ``` Total width = width (includes padding and border) ``` ### Example Calculation A div has `width: 200px`, `padding: 20px`, and `border: 5px solid black`. **With `content-box`:** - Total width = 200 + 20 + 20 + 5 + 5 = **250px** **With `border-box`:** - Total width = **200px** ### box-sizing Property | Value | Behavior | |-------|----------| | `content-box` | Width/height apply to content only (default) | | `border-box` | Width/height include padding and border | **Best Practice:** Apply `border-box` globally: ```css *, *::before, *::after { box-sizing: border-box; } ``` **Why?** Makes layout calculations easier and more predictable. ### Margin Collapse When two vertical margins meet, they collapse into one margin (the larger one). ```css .box1 { margin-bottom: 30px; } .box2 { margin-top: 20px; } /* The gap between them is 30px, not 50px */ ``` **Note:** Margin collapse does not happen with flexbox or grid items. --- ## 8. Width, Height, Margin, and Padding ### Width and Height ```css .element { width: 300px; height: 200px; max-width: 100%; min-height: 100px; } ``` | Property | Description | |----------|-------------| | `width` | Element width | | `height` | Element height | | `max-width` | Maximum width | | `min-width` | Minimum width | | `max-height` | Maximum height | | `min-height` | Minimum height | ### Margin Margin is the space **outside** the border. ```css .element { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } ``` **Shorthand:** ```css .element { margin: 10px 20px; /* top/bottom right/left */ margin: 10px 20px 30px; /* top right/left bottom */ margin: 10px 20px 30px 40px; /* top right bottom left */ } ``` **Auto Margin for Centering:** ```css .container { width: 80%; margin: 0 auto; /* Centers horizontally */ } ``` ### Padding Padding is the space **inside** the border (between content and border). ```css .element { padding: 20px; padding: 10px 20px; padding: 10px 20px 30px 40px; } ``` ### Key Difference - **Margin:** Space outside the element (between elements) - **Padding:** Space inside the element (around content) --- ## 9. Display Property ### Common Display Values | Value | Behavior | Example Elements | |-------|----------|------------------| | `block` | Takes full width, starts on new line | `

`, `

` | | `inline` | Takes only needed width, stays in flow | ``, `` | | `inline-block` | Inline flow but respects width/height | ``, styled buttons | | `none` | Hidden, removed from layout | Any element | | `flex` | Flex container | Any element | | `grid` | Grid container | Any element | ### Block vs Inline vs Inline-Block | Feature | Block | Inline | Inline-Block | |---------|-------|--------|--------------| | Starts new line | Yes | No | No | | Full width | Yes | No | No | | Respects width/height | Yes | No | Yes | | Respects margin/padding | Yes | Horizontal only | Yes | | Can contain block elements | Yes | No | Yes | ### display: none vs visibility: hidden | Property | Element Visible | Takes Space | Accessible | |----------|-----------------|-------------|------------| | `display: none` | No | No | No | | `visibility: hidden` | No | Yes | No | | `opacity: 0` | No | Yes | Yes (still clickable) | Best Practice: - Use `display: none` to completely remove from layout - Use `visibility: hidden` to hide but keep space - Use `opacity: 0` for fade animations --- ## 10. Position Property ### Position Values | Value | Behavior | |-------|----------| | `static` | Default, normal document flow | | `relative` | Offset from normal position, keeps space | | `absolute` | Positioned relative to nearest positioned ancestor | | `fixed` | Positioned relative to viewport | | `sticky` | Relative until scroll threshold, then fixed | ### position: relative - Element stays in normal flow - Can be moved with `top`, `right`, `bottom`, `left` - Original space is preserved - Creates a positioning context for absolute children ```css .relative { position: relative; top: 10px; left: 20px; } ``` ### position: absolute - Removed from normal flow - Positioned relative to nearest positioned ancestor (not static) - If no positioned ancestor, positioned relative to initial containing block (usually viewport) ```css .parent { position: relative; } .child { position: absolute; top: 0; right: 0; } ``` Common Mistake: Forgetting `position: relative` on the parent. The absolute element will position relative to the viewport or body instead. ### position: fixed - Removed from normal flow - Positioned relative to viewport - Stays in place when scrolling ```css .fixed-header { position: fixed; top: 0; left: 0; width: 100%; } ``` ### position: sticky - Behaves like `relative` until a scroll threshold - Then behaves like `fixed` within its parent - Requires `top`, `bottom`, `left`, or `right` to work ```css .sticky-header { position: sticky; top: 0; } ``` Limitations: - Only works if parent is taller than the sticky element - Does not work if any ancestor has `overflow: hidden`, `overflow: auto`, or `overflow: scroll` ### Sticky vs Fixed | Feature | Sticky | Fixed | |---------|--------|-------| | Initial behavior | Relative | Fixed | | Scrolls with page | Until threshold | No | | Stays within parent | Yes | No | | Relative to | Parent + viewport | Viewport only | Trick Question: "Difference between sticky and fixed?" Answer: Sticky scrolls with the page until it reaches a threshold, then stays fixed within its parent. Fixed is always relative to the viewport and never scrolls. --- ## 11. Units in CSS ### Absolute Units | Unit | Description | Use Case | |------|-------------|----------| | `px` | Pixels | Borders, icons, fixed sizes | | `pt` | Points (1/72 inch) | Print styles | | `cm`, `mm`, `in` | Physical units | Print styles | ### Relative Units | Unit | Relative To | Use Case | |------|-------------|----------| | `%` | Parent element | Widths, heights | | `em` | Parent font-size | Nested scaling | | `rem` | Root (html) font-size | Consistent sizing | | `vw` | 1% of viewport width | Full-width layouts | | `vh` | 1% of viewport height | Full-height sections | | `vmin` | 1% of smaller viewport dimension | Responsive sizing | | `vmax` | 1% of larger viewport dimension | Responsive sizing | | `ch` | Width of "0" character | Text-based sizing | | `ex` | Height of "x" character | Rarely used | ### em vs rem `em`: Relative to the parent's font-size ```css .parent { font-size: 20px; } .child { font-size: 1.5em; /* 1.5 × 20px = 30px / } ``` Nested em problem: ```css .parent { font-size: 20px; } .child { font-size: 1.5em; / 30px / } .grandchild { font-size: 1.5em; / 1.5 × 30px = 45px (not 30px!) / } ``` `rem`: Relative to the root (html) font-size ```css html { font-size: 16px; } .element { font-size: 1.5rem; / 1.5 × 16px = 24px (always) / } ``` Best Practice: - Use `rem` for font sizes (consistent, accessible) - Use `em` for spacing that should scale with the element's font size - Use `%` for widths - Use `vw`/`vh` carefully (can cause issues on mobile) ### Calculation Example If `html { font-size: 16px; }` and `.parent { font-size: 1.5em; }` and `.child { font-size: 2em; }`: Child font-size = 16 × 1.5 × 2 = 48px --- ## 12. Pseudo-Classes and Pseudo-Elements ### Pseudo-Classes Pseudo-classes style elements based on state or position. | Pseudo-Class | Description | Example | |--------------|-------------|---------| | `:hover` | When mouse is over element | `a:hover { color: red; }` | | `:focus` | When element is focused | `input:focus { border-color: blue; }` | | `:active` | When element is being clicked | `button:active { transform: scale(0.98); }` | | `:visited` | When link has been visited | `a:visited { color: purple; }` | | `:first-child` | First child of parent | `li:first-child { font-weight: bold; }` | | `:last-child` | Last child of parent | `li:last-child { border: none; }` | | `:nth-child(n)` | nth child of parent | `li:nth-child(2n) { background: #eee; }` | | `:nth-child(odd)` | Odd children | `tr:nth-child(odd) { background: #f9f9f9; }` | | `:nth-child(even)` | Even children | `tr:nth-child(even) { background: #fff; }` | | `:not()` | Excludes selector | `div:not(.active) { opacity: 0.5; }` | | `:is()` | Matches any selector | `:is(h1, h2, h3) { margin: 0; }` | | `:has()` | Parent with matching child | `div:has(img) { padding: 10px; }` | | `:disabled` | Disabled form elements | `input:disabled { opacity: 0.5; }` | | `:checked` | Checked checkbox/radio | `input:checked + label { font-weight: bold; }` | | `:required` | Required form elements | `input:required { border-left: 3px solid red; }` | Note: `nth-child` counting starts at 1, not 0. ### Pseudo-Elements Pseudo-elements style part of an element or insert content. | Pseudo-Element | Description | Example | |----------------|-------------|---------| | `::before` | Inserts content before element | `p::before { content: '→ '; }` | | `::after` | Inserts content after element | `p::after { content: ' ✓'; }` | | `::first-letter` | First letter of text | `p::first-letter { font-size: 2em; }` | | `::first-line` | First line of text | `p::first-line { font-weight: bold; }` | | `::selection` | Selected text | `::selection { background: yellow; }` | | `::placeholder` | Placeholder text | `input::placeholder { color: gray; }` | Important: `::before` and `::after` require the `content` property to work. ```css .icon::before { content: '★'; color: gold; } ``` ### Pseudo-Class vs Pseudo-Element | Feature | Pseudo-Class | Pseudo-Element | |---------|--------------|----------------| | Purpose | Styles based on state | Styles part of element | | Syntax | Single colon `:` | Double colon `::` | | Example | `:hover`, `:focus` | `::before`, `::after` | | In DOM | Element exists | Not in DOM | Trick Question: "What is the difference between `:before` and `::before`?" Answer: `::before` is the CSS3 standard. `:before` is the older CSS2 syntax. Both work, but `::` is recommended. Trick Question: "Can pseudo-elements receive click events?" Answer: No, pseudo-elements do not exist in the DOM and cannot receive events. ### Advanced Selectors ```css / :not() - excludes / div:not(.active) { opacity: 0.5; } / :is() - matches any in list / :is(h1, h2, h3) { margin-bottom: 10px; } / :has() - parent with matching child / .card:has(img) { padding: 0; } / :where() - like :is() but 0 specificity / :where(h1, h2, h3) { margin: 0; } / Attribute selectors / input[type="text"] { background: #f0f0f0; } a[href^="https"] { color: green; } a[href$=".pdf"] { color: red; } a[href="example"] { font-weight: bold; } ``` Note: `:has()` is not supported in older browsers. --- ## 13. Specificity, Inheritance, and Cascade ### What is Specificity? Specificity determines which CSS rule applies when multiple rules target the same element. ### Specificity Calculation | Selector Type | Weight | Example | |---------------|--------|---------| | Inline styles | 1000 | `style="color: red;"` | | ID selectors | 100 | `#header` | | Class, pseudo-class, attribute | 10 | `.btn`, `:hover`, `[type="text"]` | | Element, pseudo-element | 1 | `p`, `::before` | | Universal (``) | 0 | `` | Example: ```css #id .class p { color: red; } /* Specificity = 100 + 10 + 1 = 111 / .class p { color: blue; } / Specificity = 10 + 1 = 11 / ``` The first rule wins because 111 > 11. ### Same Specificity: Source Order Wins ```css p { color: red; } p { color: blue; } ``` The paragraph is blue because the second rule comes later. ### What is Inheritance? Some CSS properties pass from parent to child automatically. Inherited properties (examples): - `color` - `font-family` - `font-size` - `line-height` - `text-align` - `visibility` Non-inherited properties (examples): - `margin` - `padding` - `border` - `background` - `width` - `height` Example: ```css body { color: #333; font-family: Arial, sans-serif; } / All text inside body inherits these styles / ``` ### What is the Cascade? The cascade is the algorithm that determines which CSS rule wins when there are conflicts. Cascade order (highest to lowest priority): 1. `!important` rules 2. Inline styles 3. Author stylesheets (your CSS) 4. Browser default styles Within same origin: 1. Specificity 2. Source order ### !important `!important` overrides all other rules regardless of specificity. ```css p { color: red !important; } #special p { color: blue; / Loses to !important / } ``` When to use: - Almost never - User accessibility overrides - Third-party library overrides (last resort) Problems: - Makes CSS hard to maintain - Creates specificity wars - Hard to override without another `!important` Trick Question: "Does `!important` override inline styles?" Answer: Only if the inline style does not also have `!important`. Inline `!important` beats external `!important`. ### CSS Variables and Inheritance CSS variables (custom properties) inherit by default. ```css :root { --primary-color: blue; } .button { background: var(--primary-color); } .child { / Inherits --primary-color from parent / } ``` Best Practice: Define variables in `:root` for global scope. Use fallback values: ```css color: var(--primary-color, blue); ``` --- # Part 2: Intermediate Level --- ## 1. Flexbox ### What is Flexbox? Flexbox (Flexible Box Layout) is a one-dimensional layout system for arranging items in rows or columns. It handles spacing, alignment, and sizing dynamically. ### When to Use Flexbox - One-dimensional layouts (row OR column) - Centering content - Equal-height columns - Navigation bars - Card layouts - Any layout where items need to flex and fill space ### When NOT to Use Flexbox - Two-dimensional layouts (rows AND columns) → use CSS Grid - Complex page layouts → use Grid ### Flex Container vs Flex Items Flex container: The parent element with `display: flex` Flex items: The direct children of the flex container ```css .container { display: flex; } .item { / Flex item properties / } ``` ### Main Axis vs Cross Axis | Axis | Direction | Controlled By | |------|-----------|---------------| | Main axis | Direction of `flex-direction` | `justify-content` | | Cross axis | Perpendicular to main axis | `align-items` | If `flex-direction: row` (default): - Main axis = horizontal - Cross axis = vertical If `flex-direction: column`: - Main axis = vertical - Cross axis = horizontal ### Flex Container Properties | Property | Description | Values | |----------|-------------|--------| | `display` | Enables flex | `flex`, `inline-flex` | | `flex-direction` | Main axis direction | `row`, `row-reverse`, `column`, `column-reverse` | | `flex-wrap` | Wrap items | `nowrap`, `wrap`, `wrap-reverse` | | `justify-content` | Align along main axis | `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly` | | `align-items` | Align along cross axis | `stretch`, `flex-start`, `flex-end`, `center`, `baseline` | | `align-content` | Align multiple lines | `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `stretch` | | `gap` | Space between items | Any length | ### justify-content Values | Value | Description | |-------|-------------| | `flex-start` | Items at start | | `flex-end` | Items at end | | `center` | Items centered | | `space-between` | Equal space between, none at ends | | `space-around` | Equal space around, half at ends | | `space-evenly` | Equal space between and at ends | Visual comparison: ``` space-between: [A]----[B]----[C] space-around: --[A]----[B]----[C]-- space-evenly: --[A]--[B]--[C]-- ``` ### align-items vs align-content | Property | Applies To | Description | |----------|------------|-------------| | `align-items` | Single line | Aligns items on cross axis | | `align-content` | Multiple lines | Aligns lines on cross axis | Note: `align-content` only works when `flex-wrap: wrap` and there are multiple lines. ### Flex Item Properties | Property | Description | Default | |----------|-------------|---------| | `flex-grow` | How much item grows | 0 | | `flex-shrink` | How much item shrinks | 1 | | `flex-basis` | Initial size | auto | | `flex` | Shorthand | `0 1 auto` | | `order` | Visual order | 0 | | `align-self` | Override align-items | auto | ### flex Shorthand ```css .item { flex: 1; / grow: 1, shrink: 1, basis: 0 / flex: 0 0 200px; / grow: 0, shrink: 0, basis: 200px / flex: 1 1 200px; / grow: 1, shrink: 1, basis: 200px / } ``` Common values: - `flex: 1` - fills available space equally - `flex: auto` - `1 1 auto` (size based on content, then grow/shrink) - `flex: none` - `0 0 auto` (fixed size) - `flex: initial` - `0 1 auto` (default) ### Centering with Flexbox ```css .container { display: flex; justify-content: center; / Horizontal / align-items: center; / Vertical / height: 100vh; / Must have height for vertical centering / } ``` Trick Question: "Can Flexbox center an element with unknown height?" Answer: Yes, using `align-items: center` on the container. ### Common Mistakes 1. Forgetting `display: flex` on the parent 2. Confusing main axis and cross axis 3. Using `align-content` when there's only one line 4. Forgetting `flex-wrap: wrap` for responsive layouts 5. Setting `height` on flex items instead of letting them stretch ### Best Practices - Use Flexbox for one-dimensional layouts - Use `gap` instead of margins for spacing between items - Use `flex: 1` for equal-width items - Combine with media queries for responsive design --- ## 2. CSS Grid ### What is CSS Grid? CSS Grid is a two-dimensional layout system for rows and columns. It allows precise placement of elements. ### When to Use Grid - Two-dimensional layouts (rows AND columns) - Page layouts - Complex component layouts - Overlapping elements - Any layout requiring precise alignment ### When NOT to Use Grid - Simple one-dimensional layouts → Flexbox is simpler - Navigation bars → Flexbox is often easier ### Grid Container Properties | Property | Description | Example | |----------|-------------|---------| | `display` | Enables grid | `grid`, `inline-grid` | | `grid-template-columns` | Defines columns | `1fr 2fr 1fr` | | `grid-template-rows` | Defines rows | `100px auto 100px` | | `gap` / `grid-gap` | Space between tracks | `20px` | | `grid-template-areas` | Named areas | `"header header" "sidebar main"` | | `grid-auto-flow` | Auto-placement direction | `row`, `column`, `dense` | | `justify-items` | Align items in cells (horizontal) | `start`, `end`, `center`, `stretch` | | `align-items` | Align items in cells (vertical) | `start`, `end`, `center`, `stretch` | | `justify-content` | Align grid in container | `start`, `end`, `center`, `space-between` | | `align-content` | Align grid in container | Same as above | ### Grid Item Properties | Property | Description | Example | |----------|-------------|---------| | `grid-column-start` | Column start line | `1` | | `grid-column-end` | Column end line | `3` | | `grid-row-start` | Row start line | `1` | | `grid-row-end` | Row end line | `2` | | `grid-column` | Shorthand | `1 / 3` | | `grid-row` | Shorthand | `1 / span 2` | | `grid-area` | Named area or shorthand | `header` | | `justify-self` | Align in cell (horizontal) | `center` | | `align-self` | Align in cell (vertical) | `center` | ### fr Unit The `fr` unit represents a fraction of available space. ```css .grid { display: grid; grid-template-columns: 1fr 2fr 1fr; / First: 1/4, Second: 2/4, Third: 1/4 of available space / } ``` ### repeat() Function ```css .grid { grid-template-columns: repeat(3, 1fr); / Same as: 1fr 1fr 1fr / } .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); / Responsive: creates as many columns as fit, minimum 200px / } ``` ### auto-fit vs auto-fill | Value | Behavior | |-------|----------| | `auto-fit` | Collapses empty tracks, items stretch to fill | | `auto-fill` | Keeps empty tracks, items don't stretch | Example: ```css .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` ### Grid Template Areas ```css .grid { display: grid; grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; grid-template-columns: 200px 1fr 1fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } ``` ### Overlapping Elements in Grid Elements can overlap by occupying the same cells. ```css .item1 { grid-column: 1 / 3; grid-row: 1 / 2; } .item2 { grid-column: 2 / 4; grid-row: 1 / 2; z-index: 1; } ``` ### Subgrid Subgrid allows a child grid to inherit tracks from the parent grid. ```css .parent { display: grid; grid-template-columns: 1fr 1fr 1fr; } .child { display: grid; grid-column: 1 / 4; grid-template-columns: subgrid; } ``` Note: Subgrid is not supported in all browsers. ### Flexbox vs Grid | Feature | Flexbox | Grid | |---------|---------|------| | Dimensions | 1D (row OR column) | 2D (row AND column) | | Layout approach | Content-driven | Layout-driven | | Alignment | Main + cross axis | Both axes + explicit placement | | Overlap | Limited | Easy | | Browser support | Excellent | Excellent | | Best for | Components, linear layouts | Page layouts, complex grids | Interview Tip: Use Flexbox for components, Grid for layouts. They can be combined. ### Responsive Grid Example ```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 20px; } ``` This creates as many columns as fit, each at least 250px wide, with equal spacing. ### Common Mistakes 1. Confusing `gap` with margins 2. Using fixed units instead of `fr` 3. Forgetting `display: grid` on the container 4. Using `align-content` instead of `align-items` (or vice versa) 5. Not accounting for implicit tracks ### Best Practices - Use `fr` units for flexible layouts - Use `gap` for spacing (cleaner than margins) - Use `minmax()` for responsive columns - Combine Grid for layout and Flexbox for components - Use named grid areas for complex layouts --- ## 3. Responsive Web Design ### What is Responsive Design? Responsive design makes websites look good on all devices by adapting layout, images, and text to different screen sizes. ### Key Principles 1. Fluid grids - Use relative units (%) 2. Flexible images - Images scale with containers 3. Media queries - Apply different styles at breakpoints 4. Mobile-first approach - Start with mobile styles, add for larger screens ### Mobile-First vs Desktop-First | Approach | Base Styles | Media Queries | Pros | Cons | |----------|-------------|---------------|------|------| | Mobile-first | For mobile | `min-width` | Smaller CSS, faster mobile | More planning | | Desktop-first | For desktop | `max-width` | Easier for desktop-heavy sites | Extra overrides for mobile | Best Practice: Use mobile-first for modern projects. ```css / Mobile-first / .container { width: 100%; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 1024px) { .container { width: 1000px; } } ``` ### Responsive Images ```css img { max-width: 100%; height: auto; display: block; } ``` Advanced: Use `srcset` and `` for art direction: ```html ``` ### Hiding/Showing Elements ```css / Hide on mobile / .desktop-only { display: none; } @media (min-width: 768px) { .desktop-only { display: block; } } / Show on mobile only / .mobile-only { display: block; } @media (min-width: 768px) { .mobile-only { display: none; } } ``` ### Common Breakpoints | Breakpoint | Target | |------------|--------| | 480px | Small phones | | 768px | Tablets | | 1024px | Small laptops | | 1200px | Desktops | | 1440px+ | Large screens | Note: Breakpoints should be based on design needs, not specific devices. ### Responsive Units | Unit | Best For | |------|----------| | `%` | Widths, container sizes | | `rem` | Font sizes, spacing | | `vw` | Full-width sections | | `vh` | Full-height sections | | `vmin` | Responsive squares | Caution: `vh` can cause issues on mobile browsers due to dynamic address bars. Use `dvh` (dynamic viewport height) in modern CSS. --- ## 4. Media Queries ### Syntax ```css @media media-type and (condition) { / CSS rules / } ``` ### Media Types | Type | Description | |------|-------------| | `all` | All devices (default) | | `screen` | Screens | | `print` | Printers | ### Common Conditions ```css / Width / @media (min-width: 768px) { } @media (max-width: 767px) { } / Orientation / @media (orientation: landscape) { } @media (orientation: portrait) { } / Resolution / @media (min-resolution: 2dppx) { } / Hover capability / @media (hover: hover) { } @media (hover: none) { } / Prefers color scheme / @media (prefers-color-scheme: dark) { } / Prefers reduced motion / @media (prefers-reduced-motion: reduce) { } ``` ### min-width vs max-width | Feature | `min-width` | `max-width` | |---------|-------------|-------------| | Applies at | Width ≥ value | Width ≤ value | | Approach | Mobile-first | Desktop-first | | Overrides | Larger screens | Smaller screens | Trick Question: "What happens if multiple media queries match?" Answer: Rules are applied in source order. Later rules override earlier ones if they match. ### Common Mistakes 1. Forgetting `` in HTML 2. Overlapping breakpoints causing conflicts 3. Too many breakpoints (complexity) 4. Using fixed units in media queries (use `em` or `rem`) ### Viewport Meta Tag ```html ``` Without this, mobile browsers render at desktop width and scale down. --- ## 5. Overflow and Visibility ### Overflow Property Controls what happens when content overflows its container. | Value | Behavior | |-------|----------| | `visible` | Content overflows (default) | | `hidden` | Content is clipped | | `scroll` | Always shows scrollbar | | `auto` | Scrollbar only if needed | ```css .container { overflow: hidden; / Both axes / overflow-x: auto; / Horizontal only / overflow-y: scroll; / Vertical only / } ``` ### Overflow Use Cases | Value | When to Use | |-------|-------------| | `hidden` | Clipping, clearing floats, hiding scrollbars | | `auto` | Responsive scrolling containers | | `scroll` | Forced scrollbars | | `visible` | Default, allowing content to spill | Common Mistake: Using `overflow: hidden` on a parent breaks `position: sticky` on children. ### visibility vs display vs opacity | Property | Element Visible | Takes Space | Clickable | |----------|-----------------|-------------|-----------| | `display: none` | No | No | No | | `visibility: hidden` | No | Yes | No | | `opacity: 0` | No | Yes | Yes | Use Cases: - `display: none` - Remove completely - `visibility: hidden` - Hide but keep layout - `opacity: 0` - Fade animations --- ## 6. Z-Index and Stacking Context ### What is z-index? `z-index` controls the stacking order of elements on the z-axis (front to back). ```css .element { position: relative; z-index: 10; } ``` Higher z-index = closer to viewer (on top) ### Requirements for z-index `z-index` only works on positioned elements: - `position: relative` - `position: absolute` - `position: fixed` - `position: sticky` Or flex/grid items. ### What is Stacking Context? A stacking context is a group of elements with a shared z-index ordering. Elements inside a stacking context are stacked relative to each other, not to elements outside. ### How Stacking Contexts Are Created A new stacking context is created by: - `position: absolute/relative` + `z-index` (not `auto`) - `position: fixed` or `sticky` - `opacity` less than 1 - `transform`, `filter`, `perspective`, `clip-path` - `will-change` with specific values - `isolation: isolate` - Flex/grid child with `z-index` (not `auto`) Trick Question: "Why doesn't my z-index work?" Answer: The element or a parent likely has a property that creates a new stacking context (opacity < 1, transform, etc.), or the element is not positioned. ### Z-Index Scale Best Practice: Use a defined scale: ```css :root { --z-dropdown: 100; --z-modal: 200; --z-tooltip: 300; --z-toast: 400; } ``` ### Common Mistakes 1. Using high z-index values unnecessarily (9999) 2. Not understanding stacking context hierarchy 3. Forgetting `position` when using z-index 4. Not accounting for parent stacking contexts --- ## 7. Transitions and Transforms ### Transitions Transitions animate changes between two states. ```css .button { background: blue; transition: background 0.3s ease; } .button:hover { background: red; } ``` ### Transition Properties | Property | Description | Example | |----------|-------------|---------| | `transition-property` | Property to animate | `background`, `transform` | | `transition-duration` | Time of transition | `0.3s`, `300ms` | | `transition-timing-function` | Speed curve | `ease`, `linear`, `ease-in-out` | | `transition-delay` | Wait before starting | `0.1s` | Shorthand: ```css transition: property duration timing-function delay; transition: background 0.3s ease 0.1s; ``` ### Timing Functions | Value | Description | |-------|-------------| | `linear` | Constant speed | | `ease` | Slow start, fast middle, slow end (default) | | `ease-in` | Slow start | | `ease-out` | Slow end | | `ease-in-out` | Slow start and end | | `cubic-bezier()` | Custom curve | ### Common Transitionable Properties - `color`, `background-color` - `opacity` - `transform` - `box-shadow` - `border-color` - `width`, `height` (causes layout, less performant) ### Transforms Transforms modify the appearance and position of elements without affecting document flow. ### Transform Functions | Function | Description | Example | |----------|-------------|---------| | `translate(x, y)` | Moves element | `transform: translate(10px, 20px)` | | `translateX(x)` | Moves horizontally | `transform: translateX(10px)` | | `translateY(y)` | Moves vertically | `transform: translateY(10px)` | | `scale(n)` | Resizes | `transform: scale(1.5)` | | `scaleX(n)`, `scaleY(n)` | Resizes one axis | `transform: scaleX(2)` | | `rotate(angle)` | Rotates | `transform: rotate(45deg)` | | `skew(x, y)` | Skews | `transform: skew(10deg, 5deg)` | ### Multiple Transforms ```css .element { transform: translateX(50px) rotate(45deg) scale(1.2); } ``` Order matters! Transforms are applied right to left. ### transform-origin Sets the pivot point for transforms. ```css .element { transform-origin: center center; / Default / transform-origin: top left; transform-origin: 50% 50%; } ``` ### Center with Transform ```css .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` ### Common Mistakes 1. Forgetting to add `transition` (changes happen instantly) 2. Animating layout properties (width, height) instead of transform 3. Forgetting `transform-origin` for rotations 4. Not using vendor prefixes for older browsers (less important now) ### Best Practices - Use `transform` and `opacity` for animations (GPU-accelerated) - Avoid animating `width`, `height`, `top`, `left` (causes layout recalculation) - Keep transitions short (0.2s - 0.4s) - Use `will-change` sparingly --- ## 8. Animations and Keyframes ### What are Keyframe Animations? Keyframe animations allow multi-step animations that run automatically or on demand. ### Syntax ```css @keyframes animation-name { 0% { / styles / } 50% { / styles / } 100% { / styles / } } .element { animation: animation-name duration timing-function delay iteration-count direction fill-mode; } ``` ### Example: Bounce Animation ```css @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .ball { animation: bounce 1s ease infinite; } ``` ### Animation Properties | Property | Description | Values | |----------|-------------|--------| | `animation-name` | Keyframe name | Custom name | | `animation-duration` | Length of animation | `2s`, `500ms` | | `animation-timing-function` | Speed curve | `ease`, `linear` | | `animation-delay` | Wait before start | `1s` | | `animation-iteration-count` | Repeat count | `1`, `3`, `infinite` | | `animation-direction` | Direction | `normal`, `reverse`, `alternate` | | `animation-fill-mode` | Styles before/after | `none`, `forwards`, `backwards`, `both` | | `animation-play-state` | Play/pause | `running`, `paused` | ### Shorthand ```css animation: bounce 1s ease 0s infinite alternate both; ``` ### Transition vs Animation | Feature | Transition | Animation | |---------|------------|-----------| | Trigger | State change | Automatic or on demand | | Steps | Two (start/end) | Multiple (keyframes) | | Repetition | No | Yes (`infinite`) | | Complexity | Simple | Complex | | Control | Less | More | ### Best Practices - Use animations for attention-grabbing effects - Keep animations short (under 1s for UI) - Use `transform` and `opacity` for performance - Respect `prefers-reduced-motion`: ```css @media (prefers-reduced-motion: reduce) { { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` --- ## 9. CSS Variables (Custom Properties) ### What are CSS Variables? CSS variables (custom properties) store values that can be reused throughout stylesheets. ### Syntax ```css :root { --primary-color: #3498db; --spacing: 16px; --font-size: 1rem; } .button { background: var(--primary-color); padding: var(--spacing); font-size: var(--font-size); } ``` ### Variable Scope ```css :root { --global-color: blue; /* Available everywhere / } .component { --local-color: red; / Only inside .component / } ``` ### Fallback Values ```css .element { color: var(--primary-color, black); / Black if --primary-color is not defined / } ``` ### Dynamic Changes ```css :root { --theme: light; } [data-theme="dark"] { --bg: #000; --text: #fff; } body { background: var(--bg); color: var(--text); } ``` Switch theme with JavaScript: ```javascript document.documentElement.setAttribute('data-theme', 'dark'); ``` ### Why Use CSS Variables? - Reusability (change once, update everywhere) - Theming (light/dark mode) - Dynamic values (change with JavaScript) - Responsive adjustments ### Common Mistakes 1. Forgetting fallback values 2. Trying to use variables in media queries (doesn't work) 3. Using variables before defining them --- ## 10. CSS Functions ### calc() Performs calculations. ```css .element { width: calc(100% - 50px); height: calc(50vh + 100px); font-size: calc(1rem + 1vw); } ``` Rules: - Spaces around operators (+ - /) are required for + and - - Can mix units ### min() and max() ```css .element { width: min(50%, 300px); /* Smaller of 50% or 300px / height: max(200px, 30vh); / Larger of 200px or 30vh / font-size: min(2rem, 5vw); } ``` ### clamp() ```css .element { font-size: clamp(1rem, 2vw, 2rem); / Minimum: 1rem, Preferred: 2vw, Maximum: 2rem / } ``` Use case: Responsive typography with limits. ### Common Mistakes 1. Forgetting spaces around `+` and `-` in calc 2. Using calc for simple calculations (unnecessary) 3. Not accounting for calc in older browsers --- ## 11. Object-Fit and Object-Position ### object-fit Controls how images and videos fit within their container. | Value | Behavior | |-------|----------| | `fill` | Stretches (distorts) | | `contain` | Fits inside, may leave space | | `cover` | Fills container, may crop | | `none` | Original size | | `scale-down` | Smaller of contain or none | ```css img { width: 100%; height: 300px; object-fit: cover; object-position: center; } ``` ### object-position Positions the image within the container when `cover` or `contain` crops. ```css img { object-position: top left; / Crop from top-left / object-position: center; / Center (default) / object-position: 50% 50%; } ``` ### Use Cases - Profile pictures (cover, center) - Cards with images (cover, center) - Video thumbnails --- ## 12. Gradients and Shadows ### Linear Gradients ```css .gradient { background: linear-gradient(to right, red, blue); background: linear-gradient(90deg, red, yellow, green); background: linear-gradient(to bottom right, #ff0000, #0000ff); } ``` ### Radial Gradients ```css .gradient { background: radial-gradient(circle, red, blue); background: radial-gradient(ellipse at center, red, blue); background: radial-gradient(circle at 30% 50%, red, blue); } ``` ### Conic Gradients ```css .gradient { background: conic-gradient(red, yellow, green, blue, red); } ``` ### Color Stops ```css .gradient { background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%); } ``` ### Box Shadow ```css .shadow { box-shadow: offset-x offset-y blur-radius spread-radius color; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3); / Inner shadow / box-shadow: 2px 2px 5px red, 4px 4px 10px blue; / Multiple shadows / } ``` ### Text Shadow ```css .text-shadow { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px red, 0 0 10px blue; / Multiple shadows / } ``` ### Common Mistakes 1. Too many gradients (performance) 2. Poor contrast for accessibility 3. Forgetting vendor prefixes (less important now) 4. Overusing shadows (visual clutter) --- ## 13. CSS Architecture ### Why Architecture Matters Good architecture makes CSS: - Maintainable - Scalable - Consistent - Easy to debug ### BEM (Block Element Modifier) Naming convention: ```css / Block / .card { } / Element / .cardtitle { } .cardimage { } .cardbody { } / Modifier / .card--featured { } .cardtitle--large { } ``` Structure: ```html

Title

Content

``` ### BEM Benefits - Clear naming - Low specificity conflicts - Easy to understand from HTML - Modular ### SMACSS (Scalable and Modular Architecture) Categories: - Base (element defaults) - Layout (page structure) - Module (components) - State (changes) - Theme (visual variants) ### CSS Modules (React, Vue, etc.) CSS is scoped to components: ```css / Button.module.css / .button { background: blue; } / In component / import styles from './Button.module.css'; ``` ### Utility-First CSS (Tailwind) Small utility classes: ```html

Title

``` Pros: Fast development, consistent Cons: HTML becomes verbose ### CSS Organization Structure ``` styles/ ├── base/ │ ├── reset.css │ ├── typography.css │ └── variables.css ├── components/ │ ├── button.css │ ├── card.css │ └── navbar.css ├── layouts/ │ ├── header.css │ ├── footer.css │ └── sidebar.css ├── utils/ │ ├── helpers.css │ └── animations.css └── main.css ``` --- ## 14. Cross-Browser Compatibility ### Common Issues 1. Vendor prefixes (less needed now) 2. Default styles differ (use reset) 3. Flexbox/Grid support (excellent now) 4. CSS variables (excellent now) 5. Modern functions (`clamp`, `:has()`) may need fallbacks ### Vendor Prefixes ```css .element { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } ``` Note: Modern browsers rarely need prefixes. Use Autoprefixer. ### CSS Reset ```css , ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; } ``` Or use Normalize.css for consistent defaults. ### Feature Detection ```css @supports (display: grid) { .container { display: grid; } } @supports not (display: grid) { .container { display: flex; } } ``` ### Testing Tools - BrowserStack - Can I Use (caniuse.com) - Chrome DevTools device mode --- # Part 3: Advanced Level --- ## 1. Advanced Flexbox and Grid ### Flexbox Edge Cases Flex items and min-width: ```css .item { min-width: 0; /* Allows shrinking below content size / } ``` This is important when flex items contain text that should truncate. Nested flex containers: ```css .outer { display: flex; } .inner { display: flex; flex: 1; } ``` ### Grid Edge Cases Implicit tracks: ```css .grid { grid-template-columns: 100px 100px; / If more items, implicit columns are created / grid-auto-columns: 1fr; / Size for implicit columns / } ``` Grid with auto-fit and grid gap: ```css .grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } ``` Overlapping with grid-area: ```css .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 100px); } .background { grid-area: 1 / 1 / 5 / 13; background: #f0f0f0; } .content { grid-area: 2 / 3 / 4 / 11; z-index: 1; } ``` ### Combining Flexbox and Grid ```css .page { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } .header { display: flex; justify-content: space-between; align-items: center; } .main { display: flex; gap: 20px; } .sidebar { flex: 0 0 250px; } .content { flex: 1; } ``` --- ## 2. Container Queries ### What are Container Queries? Container queries allow styles based on the size of a parent container, not the viewport. ### Syntax ```css .card-container { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { display: flex; } } ``` ### Benefits - Truly reusable components - Styles based on component context - No viewport dependency ### Browser Support Good in modern browsers (Chrome 105+, Firefox 110+, Safari 16+). ### Example ```css .card-wrapper { container-type: inline-size; } @container (min-width: 300px) { .card { grid-template-columns: 100px 1fr; } } @container (min-width: 600px) { .card { grid-template-columns: 200px 1fr; padding: 20px; } } ``` --- ## 3. Modern CSS Features ### :has() Selector Selects a parent based on its children. ```css .card:has(img) { padding: 0; } .form:has(input:invalid) { border-color: red; } ``` ### :is() and :where() ```css / :is() - takes highest specificity of its arguments / :is(h1, h2, h3) { margin-bottom: 10px; } / :where() - always 0 specificity / :where(h1, h2, h3) { margin-bottom: 10px; } ``` Difference: `:where()` is easier to override. ### accent-color ```css input[type="checkbox"] { accent-color: blue; } ``` ### aspect-ratio ```css .video { aspect-ratio: 16 / 9; } .square { aspect-ratio: 1; } ``` ### gap in Flexbox ```css .flex { display: flex; gap: 20px; / Now works in flexbox too / } ``` ### Color Functions ```css .element { color: rgb(255 0 0 / 50%); color: hsl(0 100% 50% / 0.5); color: color-mix(in srgb, red 50%, blue); } ``` ### @supports ```css @supports (display: grid) { .container { display: grid; } } ``` --- ## 4. CSS Nesting ### What is CSS Nesting? Native CSS nesting allows nesting selectors without preprocessors like Sass. ### Syntax ```css .card { padding: 20px; .title { font-size: 1.5rem; } &:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } } ``` ### Nesting with & The `&` represents the parent selector. ```css .button { background: blue; &.active { background: darkblue; } &:hover { opacity: 0.8; } } ``` ### Browser Support Good in modern browsers (Chrome 112+, Firefox 117+, Safari 16.5+). --- ## 5. Cascade Layers ### What are Cascade Layers? `@layer` allows organizing styles into layers with defined priority. ### Syntax ```css @layer reset, base, components, utilities; @layer reset { { margin: 0; padding: 0; } } @layer base { body { font-family: Arial, sans-serif; } } @layer components { .button { background: blue; } } @layer utilities { .text-center { text-align: center; } } ``` ### Layer Priority Later layers have higher priority than earlier ones. ``` reset < base < components < utilities ``` ### Benefits - Easy to control cascade order - No specificity wars - Clean organization ### Example ```css @layer base { a { color: blue; } } @layer overrides { a { color: red; /* Overrides base layer regardless of specificity / } } ``` --- ## 6. Custom Properties and Theming ### Advanced Theming ```css :root { --color-primary: #3498db; --color-secondary: #2ecc71; --color-text: #333; --color-bg: #fff; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --border-radius: 4px; --transition-fast: 0.2s; } [data-theme="dark"] { --color-text: #fff; --color-bg: #1a1a1a; } body { background: var(--color-bg); color: var(--color-text); transition: background var(--transition-fast); } ``` ### CSS Variables in Media Queries (Workaround) CSS variables cannot be used in media queries, but you can use them with `@supports` or JavaScript. ### JavaScript Access ```javascript // Set document.documentElement.style.setProperty('--primary-color', 'red'); // Get const color = getComputedStyle(document.documentElement) .getPropertyValue('--primary-color'); ``` --- ## 7. CSS Performance Optimization ### Rendering Pipeline 1. Parse HTML → DOM tree 2. Parse CSS → CSSOM tree 3. Combine → Render tree 4. Layout → Calculate positions 5. Paint → Fill pixels 6. Composite → Combine layers ### Reflow vs Repaint | Action | What It Does | Performance | |--------|--------------|-------------| | Reflow | Recalculates layout | Expensive | | Repaint | Redraws pixels | Moderate | | Composite | Moves layers | Cheap | ### Properties That Trigger Reflow - `width`, `height` - `margin`, `padding` - `border` - `position`, `top`, `left`, `right`, `bottom` - `font-size` - `display` ### Properties That Trigger Repaint Only - `color` - `background` - `box-shadow` - `border-color` - `visibility` ### Properties That Trigger Composite Only - `transform` - `opacity` ### Best Practices ```css / Good: GPU-accelerated / .animate { transition: transform 0.3s, opacity 0.3s; } .animate:hover { transform: translateX(10px); opacity: 0.8; } / Bad: Triggers layout / .animate { transition: left 0.3s, width 0.3s; } .animate:hover { left: 10px; width: 200px; } ``` ### will-change Hints to the browser about upcoming animations. ```css .card { will-change: transform; } .card:hover { transform: scale(1.05); } ``` Warning: Overuse causes memory issues. Use sparingly. ### contain Property Limits the scope of browser rendering. ```css .card { contain: layout paint; / isolate layout and paint changes / } ``` ### Content-Visibility ```css .section { content-visibility: auto; / Skips rendering off-screen content / } ``` --- ## 8. Accessibility in CSS ### Focus Styles Never remove focus outlines: ```css / Bad / :focus { outline: none; } /* Good / :focus { outline: 2px solid blue; outline-offset: 2px; } / Only remove for mouse users / :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid blue; } ``` ### Prefers Reduced Motion ```css @media (prefers-reduced-motion: reduce) { , ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } ``` ### Color Contrast Ensure WCAG contrast ratios: - 4.5:1 for normal text - 3:1 for large text Use tools like WebAIM Contrast Checker. ### Hover States for Touch Devices ```css @media (hover: hover) { .button:hover { background: darkblue; } } @media (hover: none) { .button:active { background: darkblue; } } ``` ### Visually Hidden (for screen readers only) ```css .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } ``` --- ## 9. Logical Properties ### What are Logical Properties? Logical properties use direction-relative terms instead of physical directions. | Physical | Logical | |----------|---------| | `margin-top` | `margin-block-start` | | `margin-bottom` | `margin-block-end` | | `margin-left` | `margin-inline-start` | | `margin-right` | `margin-inline-end` | | `width` | `inline-size` | | `height` | `block-size` | | `padding-left` | `padding-inline-start` | | `border-right` | `border-inline-end` | ### Benefits - Internationalization (RTL languages) - Cleaner code for different writing modes ### Example ```css /* Instead of: / .element { margin-left: 20px; margin-right: 10px; } / Use: */ .element { margin-inline-start: 20px; margin-inline-end: 10px; } ``` For RTL languages, the browser automatically swaps left/right. --- ## 10. CSS Containment ### What is Containment? `contain` isolates an element's rendering from the rest of the page, improving performance. ### Values | Value | Effect | |-------|--------| | `layout` | No layout effect outside | | `paint` | No visual overflow | | `size` | Element size independent | | `style` | No style effects outside | | `strict` | All of the above | ### Example ```css .card { contain: layout paint; } ``` ### When to Use - Large scrollable lists - Independent components - Performance-critical sections ### Warning May break sticky positioning or overflow if applied incorrectly. --- ## 11. Common Layout Problems and Solutions ### Problem: Center an Unknown-Height Element Solution: ```css .parent { display: flex; align-items: center; justify-content: center; min-height: 100vh; } ``` ### Problem: Equal-Height Columns Solution 1 (Flexbox): ```css .parent { display: flex; } .child { flex: 1; } ``` Solution 2 (Grid): ```css .parent { display: grid; grid-auto-rows: 1fr; } ``` ### Problem: Sticky Header Overlapping Content Solution: Add padding to the body or margin to the main content. ```css .header { position: fixed; top: 0; height: 60px; } .main { padding-top: 60px; } ``` ### Problem: Text Truncation Solution: ```css .truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` ### Problem: Full-Width Background in Centered Container Solution: Use `box-shadow` or pseudo-element. ```css .centered { max-width: 800px; margin: 0 auto; position: relative; } .centered::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #f0f0f0; z-index: -1; } ``` ### Problem: Equal Spacing Between Items Solution (Flexbox): ```css .parent { display: flex; gap: 20px; } ``` Solution (Grid): ```css .parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } ``` ### Problem: Image Aspect Ratio Solution: ```css img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } ``` --- # Part 4: Interview Questions and Answers --- ## Beginner Interview Questions ### Q1: What is CSS? Answer: CSS (Cascading Style Sheets) is a stylesheet language used to style HTML documents. It controls colors, fonts, layout, spacing, and animations. It separates content (HTML) from presentation. ### Q2: What are the three ways to add CSS? Answer: 1. Inline: `style` attribute on HTML elements 2. Internal: `