Nidhi Jagga’s Post

Today I learned about Functions in JavaScript! A Function is a reusable block of code designed to perform a specific task. It executes when it is "invoked" or called, helping developers follow the DRY (Don't Repeat Yourself) principle. There are four key types of functions in JavaScript: 1. Function Declaration These are hoisted, meaning they can be called before they are defined in the code. ex. console.log(greet("Vaseem")); function greet(name) { return `Hello, ${name}!`; } 2. Function Expression: A function assigned to a variable. Unlike declarations, these are not hoisted. ex. const add = function(a, b) { return a + b; }; 3. Arrow Functions (ES6+) A concise syntax introduced in modern JavaScript. They do not have their own this binding, making them ideal for callbacks. ex. const multiply = (x, y) => x * y; 4. Immediately Invoked Function Expression (IIFE) A function that runs as soon as it is defined. It is commonly used to create a private scope. ex. (function() { console.log("Programming started.."); })(); #JavaScript #WebDevelopment #Programming #CodingTips #SoftwareEngineering #Frontend #JSFunctions #TechLearning

Why JavaScript’s 'this' causes bugs — and how lexical scope saves you In JavaScript, variables and this follow different rules. Mixing them up is a common source of production bugs. const name = "Global"; const obj = {  name: "Object",  show() {   console.log(name);    // lexical scope   console.log(this.name); // this context  } }; obj.show(); const fn = obj.show; fn(); Output: --------- Global Object Global undefined name uses lexical scope --> decided by where the code is written this.name uses dynamic context --> decided by how the function is called Real production issue This often breaks code in: setTimeout / setInterval Event handlers Callbacks passed to libraries That’s why modern JavaScript prefers: Pure functions,Closures,Arrow functions Simple rule Variables use lexical scope 'this' depends on how a function is called. #javascript #webdevelopment #frontend #cleanCode #lexicalScope #thisKeyword

I thought I understood this JavaScript concept… until I really did 👇 📌 Parameter Scope in JavaScript Function parameters are not special variables they are simply local variables scoped to the function. function greet(userName) {  console.log(userName);  } console.log(userName); // ❌ ReferenceError: userName is not defined Key Takeaway: userName exists only inside the function's execution context. But here’s the interesting part 👀 Parameters also follow lexical scope, which means inner functions can access them via closures: function outer(x) {  function inner() {   console.log(x); // ✅ Accesses 'x' from the outer scope  }  inner(); } And a subtle gotcha most beginners miss ⤵️ Default parameters are evaluated in their own scope at the moment the function is called, strictly before the function body begins to run. Understanding scope like this changed how I read and debug JavaScript code. Small concepts. Big clarity. 🚀 #JavaScript #WebDevelopment #LearningInPublic #Frontend #CodingTips #Scope

**JavaScript Polyfills – Explained with Real Examples 🚀** Not every browser understands modern JavaScript. And that’s where **polyfills** come into play. 👉 A polyfill is a fallback implementation that makes modern JS features work in older browsers. In this post: ✔ `String.includes()` ✔ `Array.filter()` ✔ `Array.map()` ✔ `Array.reduce()` All recreated manually to understand **how JavaScript really works under the hood.** Writing code is easy. Writing **browser-compatible, reliable code** is what makes you a better developer. Learning fundamentals > blindly using frameworks. 💡 #JavaScript #Polyfills #FrontendDevelopment #WebDevelopment #LearningInPublic #DeveloperJourney

So, you're trying to wrap your head around this weird thing in JavaScript. It's like, you write a function inside an object, and it's all good - it knows who it is. But then you pass it to another function, and suddenly it's like, "Wait, who am I again?" It's because "this" in JavaScript isn't a fixed label, it's more like a question. When the code runs, the function looks around and asks, "Who called me?" - and the answer is pretty simple, really. Just look to the left of the dot. If you see an object, that's who "this" is. No object? Thenthis is undefined. Here's the thing: if you call a function through an object, "this" is that object - makes sense, right? But if you call a function without an object,this is undefined. And then there are these two methods, .call() and .bind(), that can kind of forcethis to be a specific object. Use .call(), and it's like you're telling the function, "For this one time, you're this object" - it's a temporary thing. But use .bind(), and you're creating a new function that remembers its owner forever - it's like giving it a permanent identity. It's all about context, really. In JavaScript, your identity isn't about who you are, it's about who's holding you at the moment you speak - it's a pretty fluid thing. Check out this article for more on the secret life of JavaScript: https://lnkd.in/grANWBg6 #JavaScript #Identity #Coding

🧩 JavaScript Output-Based Question (`this` + setTimeout) ❓ What will be the output? 👉 Comment your answer below (Don’t run the code ❌) Output : undefined 🧠 Why this output comes? (Step-by-Step) 1️⃣ print() is called as a method obj.print(); So inside print, this correctly refers to obj. 2️⃣ But inside setTimeout… setTimeout(function () { console.log(this.name); }, 0); The callback is a regular function, not a method of obj. When it executes: • this does NOT refer to obj • In non-strict mode → this points to the global object • In strict mode → this is undefined Either way: this.name → undefined 3️⃣ The key mistake Assuming this is preserved automatically in async callbacks ❌ 🔑 Key Takeaways ✔️ this depends on how a function is called ✔️ setTimeout callbacks lose object context ✔️ Use arrow functions or bind to fix this ✔️ This bug appears frequently in real projects Async code doesn’t preserve this by default. How would you fix this so it prints "JS"? 👇 Drop your solution in comments #JavaScript #ThisKeyword #InterviewQuestions #FrontendDeveloper #MERNStack #WebDevelopment

The only JavaScript function that comes with a "Pause" button. ⏯️ In JavaScript, the golden rule of functions is usually "Run-to-Completion." Once a function starts, it doesn't stop until it returns or finishes. 𝐄𝐧𝐭𝐞𝐫 𝐭𝐡𝐞 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐨𝐫 𝐅𝐮𝐧𝐜𝐭𝐢𝐨𝐧. 🤯 It completely breaks the rule. It is a special type of function that can be paused in the middle of execution and resumed later from exactly where it left off. 𝐓𝐡𝐞 𝐌𝐚𝐠𝐢𝐜 𝐒𝐲𝐧𝐭𝐚𝐱: 1️⃣ `function*`: The asterisk tells JS this isn't a normal function. 2️⃣ `yield`: This keyword acts like a pause button. It spits out a value and freezes the function's state. 3️⃣ `.next()`: This is the play button. Call it to resume the function until it hits the next `yield`. 𝐖𝐡𝐲 𝐢𝐬 𝐭𝐡𝐢𝐬 𝐮𝐬𝐞𝐟𝐮𝐥? (𝐋𝐚𝐳𝐲 𝐄𝐯𝐚𝐥𝐮𝐚𝐭𝐢𝐨𝐧) Generators allow for 𝐋𝐚𝐳𝐲 𝐄𝐯𝐚𝐥𝐮𝐚𝐭𝐢𝐨𝐧. You don't have to calculate a list of 1 million items at once (crashing your memory). You can generate them one by one, only when you actually need them. It’s perfect for infinite streams, ID generators, or defining complex state machines. Check out the syntax breakdown below! 👇 Have you used Generators in production (maybe with Redux Saga)? #JavaScript #WebDevelopment #CodingPatterns #AdvancedJS #SoftwareEngineering #Frontend

The "One-Hit Wonder" of JavaScript: Why developers still use the IIFE. 🚀 What is an IIFE? An 𝐈𝐈𝐅𝐄 (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined. Unlike a normal function that you define first and call later, an IIFE executes automatically the moment the JavaScript engine reads it. Most functions wait to be called. The 𝐈𝐈𝐅𝐄 (Immediately Invoked Function Expression) runs the exact moment it is defined. But why would you need a function that runs only once? The answer is 𝐏𝐫𝐢𝐯𝐚𝐜𝐲. 🛡️ Before modern block scoping (`let`/`const`), IIFEs were the standard way to create a private scope. Even today, they are a powerful design pattern for specific scenarios. 𝟒 𝐓𝐞𝐜𝐡𝐧𝐢𝐜𝐚𝐥 𝐔𝐬𝐞 𝐂𝐚𝐬𝐞𝐬 𝐟𝐨𝐫 𝐈𝐈𝐅𝐄𝐬: 1️⃣ 𝐓𝐡𝐞 𝐌𝐨𝐝𝐮𝐥𝐞 𝐏𝐚𝐭𝐭𝐞𝐫𝐧 (𝐄𝐧𝐜𝐚𝐩𝐬𝐮𝐥𝐚𝐭𝐢𝐨𝐧) You can use an IIFE to create "private" variables that cannot be accessed from the outside, while returning only the methods you want to expose (Public API). 2️⃣ 𝐓𝐨𝐩-𝐋𝐞𝐯𝐞𝐥 𝐀𝐬𝐲𝐧𝐜/𝐀𝐰𝐚𝐢𝐭 Before ES Modules allowed top-level await, an 𝐀𝐬𝐲𝐧𝐜 𝐈𝐈𝐅𝐄 was the standard way to run asynchronous setup code immediately: `(async () => { await db.connect(); })();` 3️⃣ 𝐀𝐯𝐨𝐢𝐝𝐢𝐧𝐠 𝐆𝐥𝐨𝐛𝐚𝐥 𝐍𝐚𝐦𝐞𝐬𝐩𝐚𝐜𝐞 𝐏𝐨𝐥𝐥𝐮𝐭𝐢𝐨𝐧 Variables declared inside an IIFE stay inside. They don't leak out and overwrite variables in the global `window` object, preventing bugs in large codebases. 4️⃣ 𝐒𝐚𝐟𝐞 𝐈𝐧𝐢𝐭𝐢𝐚𝐥𝐢𝐳𝐚𝐭𝐢𝐨𝐧 Need to run complex logic just to set a single `const` value? Wrap that logic in an IIFE and return the result. It keeps your code clean and your variables constant. Check out the visual breakdown below! 👇 Do you use Async IIFEs in your projects, or have you moved fully to ES Modules? #JavaScript #WebDevelopment #CodingPatterns #SoftwareEngineering #Frontend #BestPractices

Are you accidentally slowing down your JavaScript applications? It’s a common mistake I see in code reviews (and one I’ve made myself). When dealing with multiple independent asynchronous calls, it feels natural to just await them one by one. But as the image on the left illustrates, this creates a "waterfall" effect. Your code has to wait for the first operation to finish before it can even start the second one. ✅ The Better Way: Parallel Execution The solution, shown on the right, is Promise.all(). This function takes an array of promises and fires them off simultaneously. Instead of waiting for the sum of all request times (e.g., 2s + 2s = 4s), you only wait for the slowest single request (e.g., max(2s, 2s) = ~2s). This simple change can drastically improve the performance and user experience of your application. A quick rule of thumb: If the data from request A isn't needed to make request B, they should be running in parallel. Have you caught yourself making this mistake? What’s your favorite JS performance tip? Let me know in the comments! 👇 #JavaScript #WebDevelopment #FrontendDeveloper #CodingTips #SoftwareEngineering #PerformanceOptimization

JavaScript can be weird sometimes… 😵💫 Ever tried guessing outputs and thought: “Wait… HOW is this even possible?” Here are some JavaScript exceptions that confuse even experienced devs 👇 🧠 Try guessing the output before checking: 1️⃣ [] + [] → "" 2️⃣ [] + {} → "[object Object]" 3️⃣ {} + [] → 0 4️⃣ true + false → 1 5️⃣ null + 1 → 1 JavaScript type coercion can feel magical… until it breaks your logic 😅 If you truly understand why these happen, you’re already ahead of most developers. 👉 If you want a complete list of JavaScript exceptions & tricky output-based questions, Follow me and DM me “JS” — I’ll share them with you 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #JavaScriptTips #LearnJavaScript #CodingLife #DeveloperCommunity #FrontendEngineer