Arrow functions and this in JavaScript

💡 call(), apply(), and bind() exist for a reason. ❓ Why would you manually bind this? In JavaScript, this depends on how a function is called. Sometimes, when you pass a function around (like in callbacks), it loses its original object context. That’s when bind() becomes useful. 🔹 The Problem const user = { name: "Isnaan", greet() { console.log("Hello " + this.name); } }; const greetFn = user.greet; greetFn(); // Hello undefined ❌ Here, greetFn() is called as a normal function. So this is no longer pointing to user. ✅ The Solution: bind() const greetFn = user.greet.bind(user); greetFn(); // Hello Isnaan ✅ bind() creates a new function where this is permanently set to the object you provide. 🔹 What about call() and apply()? They also set this, but they run the function immediately. user.greet.call(user); 💡 When is manual binding useful? Passing methods as callbacks Event listeners React class components Avoiding unexpected this bugs Takeaway: You manually bind this when you want full control over which object a function should belong to. #learnwithisnaan #JavaScriptTips #ModernJavaScript #ES6 #DeveloperTips #CleanCode #JSDevelopers

Here’s something I wanted to share today 👇 🧵 JavaScript Event Loop — why async works.... JavaScript is single-threaded, yet it handles clicks, API calls, timers, and UI updates without blocking. The reason is the Event Loop. At a high level: • The Call Stack runs synchronous code • Browser/Node APIs handle async work (timers, I/O, events) • Results wait in queues: – Microtasks → Promises (then, await) – Macrotasks → setTimeout, events • The Event Loop schedules execution Rule of thumb: 👉 When the stack is empty, microtasks run first, then one macrotask. That’s why Promise callbacks run before setTimeout(0). Refer this - https://lnkd.in/gs7QqGfv console.log("A"); setTimeout(() => console.log("B"), 0); Promise.resolve().then(() => console.log("C")); console.log("D"); Output: A D C B 🎯 Takeaway: JS stays single-threaded, but the Event Loop gives it a deterministic, non-blocking execution model. Understanding this helps avoid subtle async bugs and performance issues. #JavaScript #EventLoop #Async #WebDevelopment #SoftwareEngineering #LearningInPublic

𝗧𝗵𝗲 𝗠𝗮𝗴𝗶𝗰 𝗼𝗳 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗹𝗶𝗰𝗸𝘀 You click a button on a webpage, but nothing happens. Then, suddenly, all your clicks fire at once. What's going on? When you run a heavy synchronous task in JavaScript, the main thread is blocked. This means the UI freezes. But your system doesn't freeze. Here's what happens: - The Operating System records your clicks in its input buffer. - The browser places these events into the Macrotask Queue. - The Event Loop checks this queue when the Call Stack is empty. If the Call Stack is busy, the Event Loop is stuck. It can't process events. When the task finishes, the Call Stack clears, and the Event Loop runs again. It sees all the queued click events and processes them one by one. That's why everything fires at once. JavaScript is single-threaded, but your Operating System is not. Even when your JavaScript is frozen, the OS collects user input and hands it to the browser. The browser queues these events until JavaScript is ready again. Understanding this explains why heavy synchronous code freezes the UI, why clicks seem to "stack up", and why long-running tasks should be avoided on the main thread. Source: https://lnkd.in/gXu-UHwd

🚀 Day 6 of My JavaScript Journey: Scope & Dates Scope controls where variables can be accessed, while Date helps manage time-based operations in real-world applications. Today I learned: 1️⃣ Scope Types: ✔ Global Scope ✔ Function Scope ✔ Block Scope (let & const) 2️⃣ Hoisting behavior with var, let, and const 3️⃣ Date Object & Methods: new Date(), getFullYear(), getMonth(), getDate(), getHours(), getMinutes() 💻 Problems I Solved: 1️⃣ Create variables in different scopes and test accessibility 2️⃣ Format current date into readable format 3️⃣ Extract specific parts like year, month, and day 4️⃣ Build a simple digital time display logic 5️⃣ Understand hoisting differences between var, let, and const 🚀 THE CHALLENGE: Can you guess the output of the following code? function test(){ var x = 10; } console.log(x); (Drop your answer in the comments! 👇) 💡 Takeaway: Proper scope management prevents bugs and makes code secure. Date objects are essential for scheduling, timers, and real-time applications. 📂 SEE IT IN ACTION I’ve added scope examples and date manipulation scripts on my GitHub. Check out the full repository here: 👉https://lnkd.in/dWS4PPfK #JavaScript #WebDev #GitHub #CodingTips #SoftwareEngineering #WebDevelopment #LearningJourney

𝗪𝗲𝗹𝗰𝗼𝗺𝗲 𝘁𝗼 𝗗𝗮𝘆 𝟵 Have you ever updated one variable… and another one changed automatically? 𝙋𝙖𝙪𝙨𝙚 𝙛𝙤𝙧 𝙖 𝙨𝙚𝙘𝙤𝙣𝙙 — 𝙬𝙤𝙪𝙡𝙙 𝙮𝙤𝙪 𝙚𝙭𝙥𝙚𝙘𝙩 𝙩𝙝𝙞𝙨 𝙘𝙤𝙙𝙚 𝙩𝙤 𝙢𝙪𝙩𝙖𝙩𝙚 𝙗𝙤𝙩𝙝 𝙫𝙖𝙡𝙪𝙚𝙨? { 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛𝟷 = { 𝚗𝚊𝚖𝚎: "𝙰𝚕𝚎𝚡" }; 𝚕𝚎𝚝 𝚞𝚜𝚎𝚛𝟸 = 𝚞𝚜𝚎𝚛𝟷; 𝚞𝚜𝚎𝚛𝟸．𝚗𝚊𝚖𝚎 = "𝙹𝚘𝚑𝚗"; 𝚌𝚘𝚗𝚜𝚘𝚕𝚎．𝚕𝚘𝚐(𝚞𝚜𝚎𝚛𝟷．𝚗𝚊𝚖𝚎); // "𝙹𝚘𝚑𝚗" } Why did user1 change? Because: • Both variables point to the same memory address • No copy was created • Only the reference was shared 𝘛𝘩𝘪𝘴 𝘪𝘴 𝘑𝘢𝘷𝘢𝘚𝘤𝘳𝘪𝘱𝘵’𝘴 𝘝𝘢𝘭𝘶𝘦 𝘷𝘴 𝘙𝘦𝘧𝘦𝘳𝘦𝘯𝘤𝘦 𝘣𝘦𝘩𝘢𝘷𝘪𝘰𝘳 — 𝘢𝘯𝘥 𝘪𝘵’𝘴 𝘥𝘦𝘦𝘱𝘭𝘺 𝘵𝘪𝘦𝘥 𝘵𝘰 𝘮𝘦𝘮𝘰𝘳𝘺. 𝙏𝙝𝙚 𝙈𝙚𝙣𝙩𝙖𝙡 𝙈𝙤𝙙𝙚𝙡 (𝙈𝙚𝙢𝙤𝙧𝙮 𝙁𝙞𝙧𝙨𝙩) JavaScript mainly uses two memory areas: -> Stack Memory • Stores primitive values • Fixed size • Fast access -> Heap Memory • Stores objects, arrays, functions • Dynamic size • Accessed via references 𝙒𝙝𝙚𝙣 𝙥𝙖𝙨𝙨𝙚𝙙 𝙗𝙮 𝙫𝙖𝙡𝙪𝙚: A copy of the actual value is passed. Primitives (number, string, boolean, null, undefined, symbol) are always passed by value. 𝙒𝙝𝙚𝙣 𝙥𝙖𝙨𝙨𝙚𝙙 𝙗𝙮 𝙧𝙚𝙛𝙚𝙧𝙚𝙣𝙘𝙚: A memory address (reference) is passed, not the object itself. Objects & arrays live in heap memory. #JavaScript #JSFundamentals #MemoryManagement #FrontendDevelopment #ReactJS #BugFixing #InterviewPrep #LearningInPublic

Day-2 How does JavaScript manage function calls? 🤔 The answer is the Call Stack. JavaScript uses a stack data structure (LIFO) to manage execution contexts. 🔹 What happens when a function is called? function a() {   b();   console.log("A"); } function b() {   console.log("B"); } a(); 🔁 Execution Flow: Global Execution Context is created a() is called → Function Execution Context for a is pushed b() is called → Function Execution Context for b is pushed b() finishes → popped from stack a() finishes → popped from stack 🔹 Why Call Stack matters? ✅ Helps debug errors ✅ Explains stack overflow ✅ Foundation for understanding async JS #JavaScript #CallStack #ExecutionContext  #DailyLearning #Frontend

Week 5 – JavaScript ☕💻 Topics : • Arrays – map(), filter(), reduce() • Objects & their methods • IIFE and little overview of closures. • Pure vs Impure functions Earlier, these were just methods. Now I’m starting to understand how everything connects. JS feels comfortable right now… but I know complexity is coming. Preparing for that. Staying consistent. Chai Aur Code #WebDevCohort2026

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts

🚀 How JavaScript Works Behind the Scenes (Short Version) JavaScript looks simple, but internally a lot is happening. • V8 Engine (Chrome & Node.js) It converts JS into machine code and runs it. Uses: Call Stack → Executes synchronous code Heap → Stores objects & memory • Web APIs + Event Loop Async tasks like setTimeout, fetch, and DOM events go to Web APIs. After completion: Promises → Microtask Queue Timers/Events → Callback Queue The Event Loop moves them to the Call Stack when it's empty. • Garbage Collection V8 uses Mark & Sweep to remove unused memory. Poor reference handling can cause memory leaks. Client vs Server Browser → V8 + Web APIs Node.js → V8 + libuv (async I/O, worker threads) Understanding this helps in writing optimized, scalable, and industry-ready JavaScript. #JavaScript #V8 #EventLoop #WebDevelopment Vikas Kumar Pratyush Mishra

A lot of developers think 𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴, 𝗳𝗲𝘁𝗰𝗵, 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁 are part of JavaScript. 𝗧𝗵𝗲𝘆’𝗿𝗲 𝗻𝗼𝘁. They’re 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 — provided by the browser (or runtime) to the 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝗻𝗴𝗶𝗻𝗲. JavaScript itself? It’s a 𝘀𝗶𝗻𝗴𝗹𝗲-𝘁𝗵𝗿𝗲𝗮𝗱𝗲𝗱, 𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 language. 𝗧𝗶𝗺𝗲, 𝗧𝗶𝗱𝗲 𝗮𝗻𝗱 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝘄𝗮𝗶𝘁 𝗳𝗼𝗿 𝗻𝗼𝗻𝗲          - A Wise Man (Idk who said it but I'm sure he was wise) So how does async work? 👇  • The JS engine executes code line by line.  • When it hits 𝗳𝗲𝘁𝗰𝗵 𝗼𝗿 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁, 𝘁𝗵𝗲 𝗯𝗿𝗼𝘄𝘀𝗲𝗿 𝘁𝗮𝗸𝗲𝘀 𝗼𝘃𝗲𝗿.  • Once the task completes, the result is pushed to the event loop - can be the 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 𝗼𝗿 𝘁𝗵𝗲 𝗠𝗮𝗰𝗿𝗼.  • The callback/promise gets executed when the 𝗰𝗮𝗹𝗹 𝘀𝘁𝗮𝗰𝗸 𝗶𝘀 𝗳𝗿𝗲𝗲. So technically… JavaScript isn’t “naturally asynchronous” It’s synchronous — powered by async capabilities from its environment. 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗿𝘂𝗻𝘁𝗶𝗺𝗲𝘀 = 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗔𝗣𝗜𝘀. Browser ≠ Node ≠ Deno A few more 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 we use often - 𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵, 𝘸𝘪𝘯𝘥𝘰𝘸, 𝘩𝘪𝘴𝘵𝘰𝘳𝘺, 𝘭𝘰𝘤𝘢𝘵𝘪𝘰𝘯, 𝘭𝘰𝘤𝘢𝘭𝘚𝘵𝘰𝘳𝘢𝘨𝘦, 𝘴𝘦𝘴𝘴𝘪𝘰𝘯𝘚𝘵𝘰𝘳𝘢𝘨𝘦, 𝘯𝘢𝘷𝘪𝘨𝘢𝘵𝘰𝘳 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘦𝘳𝘳𝘰𝘳 (𝘤𝘰𝘯𝘴𝘰𝘭𝘦 𝘪𝘴 𝘵𝘩e 𝘈𝘗𝘐, 𝘦𝘳𝘳𝘰𝘳() 𝘪𝘴 𝘵𝘩𝘦 𝘮𝘦𝘵𝘩𝘰𝘥), 𝘤𝘰𝘯𝘴𝘰𝘭𝘦.𝘥𝘪𝘳 𝘧𝘴, 𝘱𝘳𝘰𝘤𝘦𝘴𝘴, 𝘩𝘵𝘵𝘱, 𝘦𝘵𝘤. #JavaScript #WebDevelopment #EventLoop #SoftwareEngineering