Mastering JavaScript Fundamentals for Web Development

✅ JavaScript Advanced Concepts You Should Know 🔍💻 These concepts separate beginner JS from production-level code. Understanding them helps with async patterns, memory, and modular apps. 1️⃣ Closures A function that "closes over" variables from its outer scope, maintaining access even after the outer function returns. Useful for data privacy and state management. function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 2️⃣ Promises & Async/Await Promises handle async operations; async/await makes them read like sync code. Essential for APIs, timers, and non-blocking I/O. // Promise chain fetch(url).then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)); // Async/Await (cleaner) async function getData() { try { const res = await fetch(url); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } 3️⃣ Hoisting Declarations (var, function) are moved to the top of their scope during compilation, but initializations stay put. let/const are block-hoisted but in a "temporal dead zone." console.log(x); // undefined (hoisted, but not initialized) var x = 5; console.log(y); // ReferenceError (temporal dead zone) let y = 10; 4️⃣ The Event Loop JS is single-threaded; the event loop processes the call stack, then microtasks (Promises), then macrotasks (setTimeout). Explains why async code doesn't block. 5️⃣ this Keyword Dynamic binding: refers to the object calling the method. Changes with call site, new, or explicit binding. const obj = { name: "Sam", greet() { console.log(`Hi, I'm ${this.name}`); }, }; obj.greet(); // "Hi, I'm Sam" // In arrow function, this is lexical const arrowGreet = () => console.log(this.name); // undefined in global 6️⃣ Spread & Rest Operators Spread (...) expands iterables; rest collects arguments into arrays. const nums = [1, 2, 3]; const more = [...nums, 4]; // [1, 2, 3, 4] function sum(...args) { return args.reduce((a, b) => a + b, 0); } sum(1, 2, 3); // 6 7️⃣ Destructuring Extract values from arrays/objects into variables. const person = { name: "John", age: 30 }; const { name, age } = person; // name = "John", age = 30 const arr = [1, 2, 3]; const [first, second] = arr; // first = 1, second = 2 8️⃣ Call, Apply, Bind Explicitly set 'this' context. Call/apply invoke immediately; bind returns a new function. function greet() { console.log(`Hi, I'm ${this.name}`); } greet.call({ name: "Tom" }); // "Hi, I'm Tom" const boundGreet = greet.bind({ name: "Alice" }); boundGreet(); // "Hi, I'm Alice" 9️⃣ 💡 Practice these in a Node.js REPL or browser console to see how they interact. 💬 Tap ❤️ if you're learning something new!

Complete JavaScript Road Map A-Z JavaScript🎯 1.Variables  ↳ var  ↳  let ↳  const 2. Data Types ↳  number  ↳  string ↳  boolean  ↳  null ↳  undefined ↳  symbol 3.Declaring variables ↳  var ↳  let ↳  const 4.Expressions  Primary expressions ↳ this ↳  Literals ↳ [] ↳ {} ↳  function ↳  class ↳ function* ↳  async function ↳  async function* ↳ /ab+c/i ↳ string ↳ ( ) Left-hand-side expressions ↳  Property accessors ↳ ?. ↳  new ↳  new .target ↳ import.meta ↳  super ↳  import() 5.operators ↳  Arithmetic Operators: +, -, *, /, % ↳  Comparison Operators: ==, ===, !=, !==, <, >, <=, >= ↳  Logical Operators: &&, ||, ! 6.Control Structures ↳  if ↳  else if  ↳  else ↳ switch ↳  case ↳  default 7.Iterations/Loop ↳  do...while ↳  for ↳  for...in ↳  for...of ↳ for await...of ↳  while 8.Functions ↳  Arrow Functions ↳  Default parameters ↳  Rest parameters ↳  arguments ↳  Method definitions ↳  getter ↳  setter 9.Objects and Arrays ↳  Object Literal: { key: value } ↳  Array Literal: [element1, element2, ...] ↳  Object Methods and Properties ↳  Array Methods: push(), pop(), shift(), unshift(), splice(), slice(), forEach(), map(), filter() 10.Classes and Prototypes ↳  Class Declaration ↳  Constructor Functions ↳  Prototypal Inheritance ↳ extends keyword ↳ super keyword ↳  Private class features ↳  Public class fields ↳  static ↳  Static initialization blocks 11.Error Handling ↳  try,  ↳  catch,  ↳ finally (exception handling) ADVANCED CONCEPTS: 12.Closures ↳  Lexical Scope ↳  Function Scope ↳  Closure Use Cases 13.Asynchronous JavaScript ↳  Callback Functions ↳  Promises ↳  async/await Syntax ↳ Fetch API ↳  XMLHttpRequest 14.Modules ↳  import and export Statements (ES6 Modules) ↳  CommonJS Modules (require, module.exports) 15.Event Handling ↳ Event Listeners ↳  Event Object ↳  Bubbling and Capturing 16.DOM Manipulation ↳ Selecting DOM Elements ↳  Modifying Element Properties ↳ Creating and Appending Elements 17.Regular Expressions ↳  Pattern Matching ↳ RegExp Methods: test(), exec(), match(), replace() 18.Browser APIs ↳ localStorage and sessionStorage ↳  navigator Object ↳  Geolocation API ↳  Canvas API 19.Web APIs ↳  setTimeout(), setInterval() ↳  XMLHttpRequest ↳ Fetch API ↳  WebSockets 20.Functional Programming ↳  Higher-Order Functions ↳ map(), reduce(), filter() ↳  Pure Functions and Immutability 21.Promises and Asynchronous Patterns ↳  Promise Chaining ↳  Error Handling with Promises ↳  Async/Await 22.ES6+ Features ↳  Template Literals ↳  Destructuring Assignment ↳  Rest and Spread Operators ↳  Arrow Functions ↳  Classes and Inheritance ↳  Default Parameters ↳  let, const Block Scoping 23.Browser Object Model (BOM) ↳  window Object ↳ history Object ↳  location Object ↳  navigator Object 24.Node.js Specific Concepts ↳  require() ↳  Node.js Modules (module.exports) ↳  File System Module (fs) ↳  npm (Node Package Manager) 25.Testing Frameworks ↳  Jasmine  ↳  Mocha ↳  Jest #LinkedIn #CareerGrowth #SuccessMindset #Networking #Leadership

🚀 JavaScript Event Loop “JavaScript is single-threaded…” 🧵 👉 Then how does it handle timers, API calls, promises, and user interactions so smoothly?  What is the Event Loop? 👉 The Event Loop is a mechanism that continuously checks the call stack and task queues, and executes code in the correct order without blocking the main thread. 👉 It ensures JavaScript remains non-blocking and efficient. To Understand Event Loop, You Need 5 Core Pieces: 1️⃣ Call Stack 📚 The Call Stack is a data structure that keeps track of function execution in JavaScript. It follows the Last In, First Out (LIFO) principle. ⚙️ How It Works: >> When a function is called → it is pushed onto the stack >> When the function completes → it is popped off the stack >> The stack always runs one function at a time Example: function greet() { console.log("Hello"); } greet(); 👉 Goes into stack → executes → removed 2️⃣ Web APIs 🌐 👉 Provided by the browser (not JavaScript itself) Handles async operations like: setTimeout, fetch, DOM events.... 3️⃣ Callback Queue (Macrotask Queue) 📥: The Callback Queue (also called Task Queue) is a place where callback functions wait after completing asynchronous operations, until the Call Stack is ready to execute them. ⚙️ How It Works: >> Async function (like setTimeout) runs in background >> After completion → its callback goes to Callback Queue Event Loop checks: > If Call Stack is empty → moves callback to stack > If not → waits 👉 Any callback from async operations like timers, events, or I/O goes into the Callback Queue (except Promises, which go to Microtask Queue). 4️⃣ Microtask Queue ⚡: The Microtask Queue is a special queue in JavaScript that stores high-priority callbacks, which are executed before the Callback Queue. ⚙️How It Works: Execute all synchronous code (Call Stack) Check Microtask Queue Execute ALL microtasks Then move to Callback Queue 5️⃣ Event Loop 🔁 👉 Keeps checking: 👉 “Is the call stack empty?” If YES: >> Execute all microtasks >> Then execute macrotasks Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); Promise.resolve().then(() => {  console.log("Promise"); }); console.log("End"); Output: Start End Promise Timeout 🚀 Key Takeaways: >> JS executes synchronous code first >> Then Microtasks (Promises) completely >> Then Callback Queue (setTimeout, events) >> Event Loop keeps checking and moving tasks #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #Frontend #Coding #Developers #Programming #LearnJavaScript #100DaysOfCode

Most developers learn early that JavaScript arrays are “objects.” That statement is technically correct. It is also deeply misleading. Under the hood, modern JavaScript engines treat arrays as a highly optimized data structure that behaves very differently from normal objects. The engine dynamically changes how the array is stored in memory depending on how you use it. Understanding this helps explain why some array patterns are extremely fast while others quietly degrade performance. Here is the mental model. First, the specification view. In the ECMAScript spec, an array is simply an object with numeric keys and a special length property. Conceptually: const arr = [10, 20, 30] ≈ { "0": 10, "1": 20, "2": 30, length: 3 } If engines implemented arrays exactly like this, every access would require a hash lookup like a normal object. That would make arrays slow. So engines do something smarter. Most of the time, arrays are stored as contiguous memory blocks. Think of them like arrays in lower-level languages: Index Value 0 10 1 20 2 30 3 40 Access becomes simple pointer arithmetic: base_address + (index × element_size) This is why arr[i] is extremely fast. But JavaScript arrays are flexible. That flexibility forces engines to adapt the storage strategy. Example 1: holes in arrays const arr = [1, , 3] Now the array contains a missing slot. The engine switches to a “holey” representation that includes checks for empty entries. Performance is still good, but slightly worse than a packed array. Example 2: sparse indexes const arr = [] arr[1000000] = 5 Allocating a million slots would be wasteful. Instead, the engine converts the array into a dictionary-like structure internally. At that point, indexing behaves more like object property access. In other words, arrays in JavaScript are not a single data structure. They are a family of storage strategies that the engine switches between based on usage. There is another layer of optimization as well. Engines track the type of elements stored in the array. For example: [1,2,3] → integer optimized [1.1,2.2,3.3] → double optimized [{},{},{}] → object references [1,"a",{}] → generic elements Mixing types forces the engine to fall back to a more generic representation. This dynamic behavior leads to a simple rule of thumb. Arrays are fastest when they stay predictable: • sequential indexes • consistent element types • no large gaps When those assumptions break, the engine progressively moves from packed arrays to holey arrays and eventually to dictionary mode. The key takeaway is that JavaScript arrays are not just flexible lists. They are adaptive data structures designed to balance performance and dynamism. Understanding that hidden machinery makes many performance quirks suddenly make sense. #Coding #VibeCoding #Craftsmanship #JavaScript #JS

🚀 JavaScript: The Art of Execution Context & Hoisting (Why it REALLY matters) If you’ve ever wondered why JavaScript behaves the way it does, the answer lies in two core concepts: 👉 Execution Context 👉 Hoisting These aren’t just theory—they define how your code actually runs under the hood. 🧠 1. Execution Context — The Engine Behind Every Line Every time JavaScript runs code, it creates an Execution Context. There are mainly two types: Global Execution Context (GEC) → created when your program starts Function Execution Context (FEC) → created every time a function is invoked 🔄 How it works: Each execution context is created in two phases: 1️⃣ Memory Creation Phase (Hoisting Phase) Variables → stored as undefined Functions → stored with full definition 2️⃣ Code Execution Phase Values are assigned Code runs line by line ⚡ 2. Hoisting — Not Magic, Just Memory Allocation Hoisting is often misunderstood. It doesn’t “move code up”— 👉 it simply means JavaScript allocates memory before execution begins 🔍 Example that explains EVERYTHING console.log(a); // ? console.log(b); // ? console.log(myFunc); // ? var a = 10; let b = 20; function myFunc() { console.log("Hello JS"); } 🧠 Memory Phase: a → undefined b → (in Temporal Dead Zone) myFunc → full function stored 🏃 Execution Phase: console.log(a); // undefined console.log(b); // ❌ ReferenceError console.log(myFunc); // function definition 💣 The TRICKY Part (Arrow Functions vs Normal Functions) console.log(add); const add = () => { return 2 + 3; }; ❓ Output? 👉 ReferenceError: Cannot access 'add' before initialization Why? Because: const variables are hoisted but not initialized They stay in the Temporal Dead Zone (TDZ) So unlike normal functions: console.log(sum); // works function sum() { return 5; } 👉 Function declarations are fully hoisted with definition 👉 But arrow functions behave like variables ❌ 🔥 Key Takeaways ✔ JavaScript creates a new execution context for every function ✔ Memory is allocated before execution starts ✔ var → hoisted as undefined ✔ let / const → hoisted but in TDZ ✔ Function declarations → fully hoisted ✔ Arrow functions → treated like variables 🎯 Why This Matters Understanding this helps you: Debug errors faster ⚡ Write predictable code 🧩 Master interviews 💼 Think like the JavaScript engine 🧠 💡 JavaScript is not weird—you just need to think in terms of execution context. #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #AkshaySaini #Hoisting #ExecutionContext

🚀 JavaScript - Array.prototype & Prototype Chaining If you’ve ever used map(), filter(), or push()… Have you ever wondered where they actually come from? 🤔 You’re already using one of the most powerful concepts in JavaScript 👇 👉 Prototype-based inheritance ⚡ What is Array.prototype? Every array you create is not just a simple object… 👉 It is internally linked to a hidden object called "Array.prototype" This object contains all the built-in methods available to arrays. Example: const arr = [1, 2, 3]; arr.push(4); arr.map(x => x * 2); 👉 These methods are NOT inside your array directly 👉 They come from Array.prototype Behind the Scenes console.log(arr.__proto__ === Array.prototype); // true 👉 This means: >>arr is connected to Array.prototype >>That’s why it can access all its methods 👉 __proto__ is a hidden property that exists in every JavaScript object. 👉 It points to the object’s prototype. const arr = [1, 2, 3]; console.log(arr.__proto__); // Array.prototype ⚡ Types of Methods in Array.prototype 🔸 A. Transformation Methods: Used to create new arrays arr.map(), arr.filter(), arr.reduce() 👉 Do NOT modify original array 🔸 B. Iteration Methods: Used to check or loop arr.forEach(), arr.find(), arr.some(), arr.every() 🔸 C. Modification Methods: Change the original array arr.push(), arr.pop(), arr.shift(), arr.unshift(), arr.splice() 🔸 D. Utility Methods: Helpful operations arr.includes(), arr.indexOf(), arr.slice(), arr.concat()  ⚡What is Prototype Chaining? 👉 When you access a method/property, JavaScript searches step by step: arr → Array.prototype → Object.prototype → null This process is called "Prototype chaining". Example const arr = [1, 2, 3]; arr.toString(); 👉 toString() is not in array methods list, So JS checks: arr → Array.prototype → Object.prototype → null 👉 Found in Object.prototype  ⚡Prototype Chain Visualization [1,2,3] ↓ Array.prototype ↓ Object.prototype ↓ null 👉 This chain is called prototype chaining ⚡Adding Custom Methods (Powerful but Risky) You can extend arrays like this: Array.prototype.custom = function () { return "Custom method!"; }; const arr = [1, 2]; console.log(arr.custom()); 👉 Arrays don’t own methods 👉 They inherit them from Array.prototype 👉 JavaScript uses prototype chaining to find them #JavaScript #WebDevelopment #Frontend #Coding #Developers #Programming #LearnJavaScript #100DaysOfCode

I used to manipulate objects directly in JavaScript. Until one day, it didn't work. And the errors were almost impossible to trace. Meanwhile JavaScript has built a clean, deliberate API specifically for the job I had been doing messily for a long time. What is Reflect? Reflect is a built-in JavaScript object that provides a set of methods for performing fundamental operations on objects. The same operations you've always done, but in a more controlled, predictable, and reliable way. Reading properties. Setting values. Checking existence. Deleting keys. Reflect does all of this in a clean way. The most important Reflect methods: -> Reflect.get() - reads a property from an object. const user = { name: "Markus" }; Reflect.get(user, "name"); -> "Markus" Same as user.name - but more explicit and safer in dynamic contexts. -> Reflect.set() - sets a property value and returns true or false. const user = { name: "Markus" }; Reflect.set(user, "name", "John"); -> true console.log(user.name); -> "John" Unlike direct assignment - it tells you whether it succeeded by returning true. -> Reflect.has() - checks if a property exists. Reflect.has(user, "name"); -> true Same as the in operator - but cleaner in functional and dynamic code. -> Reflect.deleteProperty() - deletes a property safely. Reflect.deleteProperty(user, "name"); -> true Same as the delete keyword - but returns a boolean instead of throwing silently. -> Reflect.ownKeys() - returns all keys of an object. const user = { name: "Markus", age: 25}; Reflect.ownKeys(user); -> ["name", "age"] Where Reflect truly shines - with Proxy. Reflect and Proxy are natural partners. Inside a Proxy trap, Reflect lets you perform the default operation in a clean way - without rewriting the behaviour from scratch. Example: const proxy = new Proxy(user, { get(target, key) { console.log(`Reading: ${key}`); return Reflect.get(target, key); -> clean default behaviour } }); Reflect doesn't replace what you already know. It refines it. It makes the operations you perform on objects more intentional, consistent, and significantly easier to debug when something goes wrong.

🚀 Today we are going to analyse the JavaScript microtask queue, macrotask queue, and event loop. A junior developer once asked me during a code review: "Why does Node.js behave differently even when the code looks simple?" So I gave him a small JavaScript snippet and asked him to predict the output. console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); He answered confidently: Start Timeout Promise End But when we ran the code, the output was: Start End Promise Timeout He looked confused. That’s when we started analysing how JavaScript actually works internally. 🧠 Step 1: JavaScript is Single Threaded JavaScript runs on a single thread. It executes code line by line inside the call stack. So first it runs: console.log("Start") → Start console.log("End") → End Now the stack becomes empty. ⚙️ Step 2: Macrotask Queue setTimeout goes to the macrotask queue. Even though timeout is 0ms, it does not execute immediately. It waits in the macrotask queue. Examples of macrotasks: • setTimeout • setInterval • setImmediate • I/O operations • HTTP requests ⚡ Step 3: Microtask Queue Promise goes to the microtask queue. Examples of microtasks: • Promise.then() • Promise.catch() • Promise.finally() • process.nextTick (Node.js) • queueMicrotask() Microtasks always get higher priority. They execute before macrotasks. 🔁 Step 4: Event Loop Now the event loop starts working. The event loop checks: Is the call stack empty? Yes Check microtask queue Execute all microtasks Then execute macrotasks So execution becomes: Start End Promise Timeout Now everything makes sense. 🏗️ Real Production Example Imagine a Node.js API: app.get("/users", async (req, res) => { console.log("Request received"); setTimeout(() => console.log("Logging"), 0); await Promise.resolve(); console.log("Processing"); res.send("Done"); }); Execution order: Request received Processing Logging Why? Because Promise (microtask) runs before setTimeout (macrotask). This directly affects: • API response time • Logging • Background jobs • Queue processing • Performance optimization 🎯 Why Every Node.js / NestJS / Next.js Developer Should Know This Because internally: • Async/Await uses Promises • API calls use Event Loop • Background jobs use Macrotasks • Middleware uses Microtasks • Performance depends on queue execution Without understanding this, debugging production issues becomes very difficult. 💡 Final Thought JavaScript is not just a language. It is an event-driven execution engine. If you understand microtask queue, macrotask queue, and event loop, you don’t just write code — you understand how the runtime thinks. And once you understand the runtime, you start building faster and more scalable systems. #JavaScript #NodeJS #EventLoop #Microtasks #Macrotasks #NextJS #NestJS #SystemDesign #SoftwareEngineering

Debugging inconsistent runtime behavior steals time from feature delivery. ────────────────────────────── JSON.parse and JSON.stringify Guide with Examples In this comprehensive guide, you will learn how to effectively use JSON.parse and JSON.stringify in JavaScript. With clear examples and practical scenarios, you'll grasp these essential methods for handling JSON data. hashtag#javascript hashtag#json hashtag#webdevelopment hashtag#programming hashtag#beginner ────────────────────────────── Core Concept JSON.parse and JSON.stringify are built-in JavaScript methods that help in working with JSON (JavaScript Object Notation). JSON is a lightweight data format that is easy for humans to read and write, and easy for machines to parse and generate. The JSON.stringify method was introduced in the early days of JavaScript, around 2009, as part of the ECMAScript 5 standard. This method is crucial for converting JavaScript objects into a JSON string representation. It enables developers to send data to web servers in a format that is universally accepted. On the flip side, JSON.parse is equally important as it helps convert JSON strings back into JavaScript objects. Both methods are essential for data interchange between a client and server, especially in web applications. Key Rules • Always validate JSON: Before parsing, ensure the JSON string is well-formed to avoid errors. • Use try-catch: Wrap JSON.parse in a try-catch block to gracefully handle potential errors. • Limit string size: Be mindful of large JSON strings to avoid performance issues. 💡 Try This // Sample object const obj = { name: 'Alice', age: 30 }; // Convert object to JSON string ❓ Quick Quiz Q: Is JSON.parse and JSON.stringify different from XML? A: JSON is often compared to XML. While both formats are used for data interchange, JSON is lighter and easier to read, making it a preferred choice in modern web development. JSON's syntax is straightforward, requiring less markup compared to XML, which has a more verbose structure. 🔑 Key Takeaway In this guide, we explored JSON.parse and JSON.stringify, two essential methods for working with JSON data in JavaScript. You learned how to convert objects to JSON strings and parse strings back to objects, along with best practices and common pitfalls. These methods are vital for web development, especially when dealing with APIs and client-server communication. As you continue your learning journey, try applying these concepts in real-world applications to solidify your understanding. ────────────────────────────── 🔗 Read the full guide with code examples & step-by-step instructions: https://lnkd.in/gEKnqsEp

JavaScript Hoisting: The Interview Question That Tricks Everyone 🚀 Most developers think they know hoisting. Then the interviewer shows them tricky code. Here's your complete guide to mastering it. --- 🎯 The Definition Hoisting is JavaScript's behavior of moving declarations to the top of their scope during compilation. Key rule: Only declarations are hoisted, NOT initializations. --- 📊 The 3 Types (With Examples) 1. var – Hoisted & Initialized as undefined ```javascript console.log(name); // undefined (not error!) var name = "John"; // JS reads it as: // var name; → console.log(name); → name = "John"; ``` 2. let/const – Hoisted but NOT Initialized (TDZ) ```javascript console.log(age); // ❌ ReferenceError let age = 25; // Temporal Dead Zone – exists but inaccessible ``` 3. Function Declarations – Fully Hoisted ```javascript greet(); // ✅ "Hello" – works! function greet() { console.log("Hello"); } // Function expressions? NOT hoisted! ``` --- 🌍 Real-World Example The Bug That Wastes Hours: ```javascript function processOrders(orders) { for (var i = 0; i < orders.length; i++) { setTimeout(() => { console.log(orders[i]); // undefined × 3 }, 1000); } } // Why? var is function-scoped, hoisted to top. // Fix: Use let (block-scoped) or closure ``` The Solution: ```javascript function processOrders(orders) { for (let i = 0; i < orders.length; i++) { setTimeout(() => { console.log(orders[i]); // ✅ Works! }, 1000); } } ``` --- 💡 Senior-Level Insight "Hoisting explains why: · var causes unexpected bugs (always use let/const) · TDZ prevents accessing variables before declaration · Function hoisting enables clean code organization Modern JS best practice: Declare variables at the top. Use const by default, let when reassignment needed." --- 🎤 Interview Answer Structure Q: "Explain hoisting." "Hoisting is JavaScript's compilation-phase behavior where declarations are moved to the top. Function declarations are fully hoisted, var variables hoisted as undefined, while let/const are hoisted but stay in Temporal Dead Zone until execution. This is why we get undefined with var but ReferenceError with let when accessed early." --- 📝 Quick Cheat Sheet Type Hoisted Initial Value Access Before Declaration var ✅ undefined Returns undefined let ✅ Uninitialized ❌ ReferenceError (TDZ) const ✅ Uninitialized ❌ ReferenceError (TDZ) Function Dec ✅ Function itself ✅ Works fine --- 🚨 Common Interview Twist: ```javascript var a = 1; function test() { console.log(a); // undefined (not 1!) var a = 2; } test(); // Why? Inner var a is hoisted to top of function scope ``` --- Master hoisting = Master JavaScript execution. Found this helpful? ♻️ Share with your network. Follow me for more interview prep content! #JavaScript #CodingInterview #WebDevelopment #TechInterview #JSHoisting