Understanding the this Keyword in JavaScript

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀

Ever written JavaScript that *shouldn’t* work… but somehow does? 🤯 I remember staring at my screen thinking, “Did JS just ignore my logic?” Here’s the problem 👇 JavaScript has this hidden behavior called **hoisting**. It moves declarations (not values) to the top of the scope *before execution*. Sounds helpful… until it silently breaks your expectations. Here’s the insight 💡 * `var` gets hoisted and initialized as `undefined` * `let` & `const` are hoisted but stay in a “temporal dead zone” 🚫 * Functions? Fully hoisted — you can call them before defining! Example: ```js console.log(a); // undefined 😵 var a = 5; ``` Lesson learned 📌 JavaScript isn’t “weird” — it just follows rules we often ignore. Understanding hoisting = fewer bugs + cleaner logic. Now I always think: “What does JS see *before* running this?” 👀 If you’re diving deeper into JS concepts, I share more here 👉 https://webdevlab.org 🚀 Curious… have you ever been surprised by hoisting in your code? 😄 #JavaScript #WebDevelopment #Frontend #CodingTips #DevLife

🚀 Mastering JavaScript Array Methods – My Practice Journey 💻✨ ✨Today, I focused on strengthening my understanding of JavaScript Array Methods by solving real-world problems. These built-in methods make code cleaner, faster, and more efficient.✨ Here’s what I explored 👇 🔹 map() – Used to transform data (e.g., adding GST to product prices) 🔹 filter() – Extracted specific data (e.g., getting only active users) 🔹 reduce() – Calculated a single value from an array (e.g., total cart value) 🔹 find() – Found the first matching element (e.g., first expensive product) 🔹 findIndex() – Retrieved index of a specific element 🔹 some() – Checked if any condition is true (e.g., out-of-stock products) 🔹 every() – Verified if all elements satisfy a condition 🔹 includes() – Checked if a value exists in an array 🔹 indexOf() & lastIndexOf() – Used for duplicate handling and comparisons 🔹 sort() – Arranged data (e.g., sorting products by price) 🔹 splice() – Added/removed elements at a specific position 🔹 slice() – Extracted a portion of an array without modifying original 🔹 concat() – Merged arrays 🔹 flat() – Flattened nested arrays into a single array 🔹 fill() – Replaced all elements with a static value 🔹 split() & join() – Converted between strings and arrays 🔹 reverse() – Reversed array elements (used for reversing words) 🔹 Loops & Objects – Used for counting occurrences and handling unique values 💡 Key Takeaways: ✔️ Learned when to use each method ✔️ Improved problem-solving approach ✔️ Understood real-world applications of arrays #JavaScript #WebDevelopment #FrontendDevelopment #CodingPractice #LearningJourney

🚀 Today I learned one of the most confusing but powerful JavaScript concepts — Prototype. At first, I used methods like .map(), .filter(), and .push() without thinking where they actually come from. Then I understood the role of Prototype 👇 👉 In JavaScript, objects can inherit properties and methods from another object through the prototype chain. Simple Example: function User(name) { this.name = name; } User.prototype.sayHi = function () { console.log("Hi " + this.name); }; const u1 = new User("Sartaj"); u1.sayHi(); 💡 Why use Prototype? ✔️ Shared methods for all instances ✔️ Better memory efficiency ✔️ Faster and cleaner object creation ✔️ Core concept behind JavaScript classes What I understood: prototype → used to store shared methods __proto__ → link to parent object new keyword connects objects to prototype The more I learn JavaScript fundamentals, the more interesting it becomes. 💻 Which JavaScript concept confused you the most at first? 👇 #JavaScript #WebDevelopment #Prototype #Coding #Frontend #MERNStack #Learning #100DaysOfCode

🚀Day 30 — Scope Chain & Scope Types in JavaScript (Simplified) Understanding scope is one of the most important fundamentals in JavaScript 🚀 --- 🔍 What is Scope? 👉 Scope decides where variables can be accessed in your code In simple words: 👉 “Who can access what?” --- ⚡ Types of Scope 1. Global Scope 👉 Variables declared outside functions or blocks let name = "John"; function greet() { console.log(name); // accessible } --- 2. Function Scope 👉 Variables declared inside a function function test() { let age = 25; console.log(age); } console.log(age); // ❌ Error --- 3. Block Scope 👉 Variables declared with let and const inside {} if (true) { let city = "Delhi"; } console.log(city); // ❌ Error --- 🔗 What is Scope Chain? 👉 If JS can’t find a variable in current scope, it looks in the outer scope, then outer again… until global scope. This is called the Scope Chain --- 🚀 Why it matters ✔ Prevents variable conflicts ✔ Helps understand closures ✔ Improves debugging skills --- 💡 One-line takeaway: 👉 “JavaScript looks upward to find variables — that’s the scope chain.” --- Mastering scope makes closures, hoisting, and debugging much easier. #JavaScript #Scope #ScopeChain #WebDevelopment #Frontend #100DaysOfCode 🚀

Day 3: Hoisting — The JavaScript "Magic" That Isn't Magic at All! 🎩✨ Today, I tackled one of the most famous (and often misunderstood) concepts in JavaScript: Hoisting. If you've ever wondered why you can call a function before you even define it in your code, you've witnessed Hoisting in action! 🤔 What is Hoisting? Hoisting is a mechanism where variables and function declarations are moved to the top of their containing scope during the Memory Allocation Phase, before the code even starts executing. 🔍 Under the Hood (The Execution Context) Remember the "Big Box" (Execution Context) from Day 1? Here is what happens during the Memory Phase: Variables (var): JS allocates memory for variables and initializes them with a special value: undefined. Functions: JS stores the entire function body in memory. This is why: Calling a function at Line 1 works perfectly! ✅ Accessing a var at Line 1 returns undefined instead of an error! ⚠️ 💻 The Browser Demo (The Call Stack) Watching this live in the Sources tab of Chrome DevTools was a game-changer. Seeing the Global scope populate with variables before the first line of code executed made everything click. 💡 Interview Tip: When asked "What is Hoisting?", don't just say "it moves code to the top." Better Answer: "Hoisting is the process where the JS Engine allocates memory for variables and functions during the Creation Phase of the Execution Context. This allows us to access functions and variables even before they are initialized in the code, though var will return undefined until the execution reaches its assignment." Next up: Diving into how let and const handle hoisting differently (The Temporal Dead Zone!). Are you a var, let, or const person? Let's discuss below! 👇 #JavaScript #WebDevelopment #Hoisting #NamasteJavaScript #CodingInterviews #FrontendEngineer #ProgrammingLogic #JSFundamentals

A simple but powerful JavaScript concept clicked for me recently—variables and the different meanings of “equals.” It starts with declaring a variable: 👉 "let a;" You’re creating a space in memory. Then assigning a value: 👉 "a = 5;" Now you’re storing a value inside it. And then applying/using it: 👉 "let sum = a + 3;" You’re working with that stored value. But “equals” doesn’t always mean the same thing: 👉 "=" → assignment (store a value) 👉 "==" → loose comparison (checks value, ignores type) 👉 "===" → strict comparison (checks value and type) For me, the shift was this: - Variables help you store and reuse data - "=" is not “equals” in math—it’s assignment - "==" vs "===" is about how exact your comparison needs to be Small concepts, but they make a big difference in how you think and write code. What’s one concept that recently clicked for you? Day 29/30 #M4ACELearningChallenge #JavaScript #Frontend

🧠 JavaScript Hoisting Explained Simply Hoisting is one of those JavaScript concepts that can feel confusing — especially when your code behaves unexpectedly. Here’s a simple way to understand it 👇 🔹 What is Hoisting? Hoisting means JavaScript moves declarations to the top of their scope before execution. But there’s a catch 👇 🔹 Example with var console.log(a); var a = 10; Output: undefined Why? Because JavaScript internally treats it like: var a; console.log(a); a = 10; 🔹 What about let and const? console.log(b); let b = 20; This throws a ReferenceError. Because "let" and "const" are hoisted too — but they stay in a “temporal dead zone” until initialized. 🔹 Function hoisting Functions are fully hoisted: sayHello(); function sayHello() { console.log("Hello"); } This works because the function is available before execution. 🔹 Key takeaway • "var" → hoisted with "undefined" • "let/const" → hoisted but not initialized • functions → fully hoisted 💡 One thing I’ve learned: Many “weird” JavaScript bugs come from not understanding hoisting properly. Curious to hear from other developers 👇 Did hoisting ever confuse you when you started learning JavaScript? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

𝗜 𝗷𝘂𝘀𝘁 𝗵𝗮𝗱 𝗮 𝗽𝗿𝗼𝗽𝗲𝗿 "𝗮𝗵𝗮 𝗺𝗼𝗺𝗲𝗻𝘁" 𝘄𝗶𝘁𝗵 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁'𝘀 `𝘁𝗵𝗶𝘀` 𝗸𝗲𝘆𝘄𝗼𝗿𝗱. 🤯 And I want to share exactly how my brain understood it — step by step. 🔷 Normal Function: "Who called me? That's my this." Simple. The caller is the boss. 🔶 Arrow Function: "I don't have my own this. Let me borrow from outside." But here's where it gets interesting 👇 I used to think arrow functions just go "one step outside" to find this. WRONG. 😅 The real rule is — Arrow functions keep going outside until they find the nearest normal function. Then they borrow THAT function's this. It could be one level out. It could be three levels out. It just keeps walking until it finds a normal function. 🚶 And the setTimeout moment that made it all click 💡 A normal function inside setTimeout forgets everything. It creates a brand new this and goes — "who's obj again?" But an arrow function inside setTimeout remembers. Because it already borrowed this from its parent before setTimeout even ran. So the real difference? Normal Function → "Who CALLED me?" Arrow Function → "Who CREATED me? What was their this?" That's it. That's the whole secret. 🎯 Still learning JS one confusing concept at a time. 😄 Drop a 🙋 if this helped you too! #JavaScript #WebDevelopment #LearningInPublic #JS

🚀 Day 7 — Understanding JavaScript Objects & Prototypes Continuing my journey of strengthening core JavaScript fundamentals, today I explored one of the most important building blocks — Objects & Prototypes 👇 At first, objects feel simple… but when you dive into prototypes, you truly understand how JavaScript works behind the scenes. 🔹 Covered topics: - What are JavaScript Objects? - Key-Value Pairs & Properties - Dot vs Bracket Notation - Add / Modify / Delete Properties - Object Methods - "this" inside objects (quick revision 🔁) - Constructor Functions - What happens when we use "new" - Why Prototype is needed (memory optimization 🔥) - Prototype & Shared Methods - Prototype Chain (🔥 very important) - Getter & Setter 💡 Key Learning: JavaScript is not class-based — it’s prototype-based. Objects can share properties and methods using prototypes, which makes code more efficient and scalable. 👉 Always remember: - JS first looks inside the object - If not found → it checks the prototype (This is called the Prototype Chain) Understanding this concept is a game changer for interviews and helps in writing better, optimized code. 📌 Day 7 of consistent preparation — going deeper into JavaScript fundamentals 🔥 #JavaScript #WebDevelopment #FullStackDeveloper #CodingJourney #MERNStack #InterviewPreparation #Frontend #Backend #LearnInPublic #Developers #Consistency #100DaysOfCode #LinkedIn #Connections