Understanding JavaScript Hoisting

Day 1 🧠 Understanding Lexical Scoping in JavaScript (in 2 minutes) One concept that quietly powers a lot of JavaScript behavior is lexical scoping. 👉 Simply put: A function remembers where it was written, not where it is called. 🔍 Example: let name = "Global"; function print() { console.log(name); } function test() { let name = "Local"; print(); } test(); // Output: Global 💡 Even though print() is called inside test(), it still logs "Global". Why? Because print() was defined in the global scope, so it uses that scope. 🧠 Key Takeaways: Scope is determined at write time (lexical), not run time. JavaScript looks for variables in the scope chain upward. This is the foundation of closures. 🚀 Why this matters: Understanding lexical scoping helps you: ✔ Write predictable code ✔ Debug faster ✔ Master closures, callbacks, and async logic ✔ Work better with React hooks 🔥 One-line takeaway: 👉 "Where you write your function decides what it can access." If you're learning JavaScript fundamentals, don’t skip this — it shows up everywhere. #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

I ran a small JavaScript experiment today, and it was a good reminder that performance often hides inside simple concepts. I used the same function twice with the same inputs. The first call took noticeable time. The second call returned almost instantly. Nothing changed in the inputs. Nothing changed in the output. The only difference was that the second time, JavaScript didn’t need to do the work again. That’s the beauty of memoization. Instead of recalculating, it remembers the previous result and returns it from cache. What looks like a small optimization in code can make a big difference in how efficiently an application behaves. The deeper I go into JavaScript, the more I realize: the real power is not just in writing code — it’s in understanding how to make code smarter. #JavaScript #WebDevelopment #FrontendDevelopment #Memoization #Closures

5 JavaScript concepts that make everything else click. Learn these deeply and frameworks stop being magic. 1. Closures A function that remembers the scope it was created in. This is how callbacks, event listeners, and setTimeout actually work. Not understanding closures = constant bugs you can't explain. 2. The Event Loop JavaScript is single-threaded. The event loop is how async code doesn't block everything else. If you've ever wondered why setTimeout(fn, 0) still runs after synchronous code — this is why. 3. Prototypal Inheritance Every object in JS has a prototype chain. Classes are just syntax sugar over this. Knowing this means you understand how methods are shared and where "cannot read properties of undefined" is actually coming from. 4. this - and how it changes 'this' is not fixed. It depends on how a function is called, not where it's defined. Arrow functions inherit 'this' from their enclosing scope. Regular functions create their own. This one trips up everyone. 5. Promises and the microtask queue Promises don't just "make async code cleaner." They run in the microtask queue, which runs before the next macrotask (setTimeout). Understanding this makes async debugging dramatically easier. Which of these gave you the biggest headache? 👇 #webdeveloper #coding #javascript

"Why does JavaScript return "undefined" instead of throwing an error here?" 🤔 If you've ever faced this… you've already encountered Hoisting. Let’s understand it simply 👇 🔹 What is Hoisting? Hoisting means JavaScript moves declarations to the top of their scope before execution. But the behavior is different for "var", "let", and "const" 👇 🔹 var - Gets hoisted - Initialized with "undefined" Example: console.log(a); // 👉 undefined var a = 10; 🔹 let & const - Also hoisted - But NOT initialized This phase is called the Temporal Dead Zone (TDZ) Example: console.log(b); // ❌ ReferenceError let b = 10; 🔹 Function Hoisting Function declarations are fully hoisted ✅ Example: sayHello(); // ✅ works function sayHello() { console.log("Hello"); } 🚀 Pro Tip: Always declare variables before using them. It makes your code predictable and bug-free. 💬 Be honest — did hoisting confuse you at first? 😄 #javascript #webdevelopment #mern #coding #developers

Day 1 of 30 days of javascript challenge. problem-2667 Problem - Write a function createHelloWorld that returns another function, that returns "Hello World" As this is my first code, I revised my notes on javascript scope. ☑️ Function scope - Any variables declared inside a function body cannot be accessed outside the function body, but global variables can be used inside function body ☑️ Block scope - Any variable declared inside { } cannot be used outside the { } block, although it supports only let and const keyword, var can be used ☑️ Lexical scope - A variable declared outside a function can be accessed inside another function defined after the variable declaration. (The opposite is not true ) This problem uses the concept of closures and higher order functions. Please feel free to discuss where can I improve the code or if you have a different perspective, comment below your views. #javascript #coding #development #motivation #goals #leetcode #webdevelopment

🚀 Day 947 of #1000DaysOfCode ✨ The Shortest JavaScript Program (You’ll Be Surprised 😮) This is one of those concepts that looks super simple… but completely changes how you see JavaScript. In today’s post, I’ve broken down the shortest possible JavaScript program — and trust me, it’s not just about writing less code. Behind this tiny piece of code lies how JavaScript actually runs your program, creates execution context, and prepares memory before even executing a single line. Sounds crazy? Wait till you see it. This is the kind of concept that once you understand, a lot of “weird JavaScript behavior” suddenly starts making sense. If you’re serious about mastering JavaScript, you don’t want to miss this one. 👉 Swipe through the carousel — this might blow your mind 🤯 👇 Did you already know what the shortest JS program is? #Day947 #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #Next #CodingCommunity #JSDeepDive

Just published a new blog on Template Literals in JavaScript! If you're still using old string concatenation, you're missing out on cleaner and more powerful ways to write code. In this blog, I’ve explained how template literals make your JavaScript more readable and dynamic with real examples. 💡 Learn how to: Embed expressions easily Write multi-line strings effortlessly Improve code readability Check it out here 👇 https://lnkd.in/dXZMq4RW #JavaScript #WebDevelopment #Coding #Frontend #100DaysOfCode

🧠 JavaScript Concept: Hoisting Explained Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope before execution. This is why we can sometimes use variables or functions before they are declared. Example: console.log(name); // undefined var name = "Arun"; Why undefined? Because JavaScript internally treats it like this: var name; console.log(name); name = "Arun"; 🔹 Important Points: • "var" is hoisted and initialized with "undefined" • Function declarations are fully hoisted • "let" and "const" are hoisted but stay in the Temporal Dead Zone (TDZ) ⚠️ Accessing "let" or "const" before declaration will throw an error. 📌 Best Practice: Avoid relying on hoisting — always declare variables at the top for better readability. #javascript #frontenddevelopment #reactjs #webdevelopment #coding

🚀 Day 963 of #1000DaysOfCode ✨ Difference Between var, let & const in JavaScript These three look similar… but behave very differently in real-world code. In today’s post, I’ve broken down the differences between `var`, `let`, and `const` in a simple and practical way, so you can understand when and why to use each of them. From scope and hoisting to re-declaration and mutability, these concepts directly impact how your code behaves — and are often the reason behind many unexpected bugs. I’ve also explained common mistakes developers make while using them, so you can avoid those pitfalls in your own projects. If you’re writing modern JavaScript, having clarity on this is absolutely essential. 👇 Which one do you use the most — `var`, `let`, or `const`? #Day963 #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #JSBasics

🧠 JavaScript Event Loop — Explained Simply Ever wondered how JavaScript handles async operations like setTimeout or API calls? 👉 JavaScript is single-threaded, but it manages async tasks using the Event Loop. 💡 Key Components: ✔ Call Stack → Executes functions ✔ Callback Queue → Handles setTimeout, events ✔ Microtask Queue → Promises (higher priority) 🔥 Flow: 1. Execute sync code 2. Move async tasks to queues 3. Event loop pushes tasks back to stack ⚡ Important: Promises (microtasks) always execute before setTimeout (callbacks) 💬 Did you know this before? Where have you faced issues with async code? #JavaScript #EventLoop #WebDevelopment #Frontend #Coding