JavaScript Function Assignment Gotcha

const user = { name: 'Munsif', print: () => console.log(this.name) }; user.print(); If you think it prints "Munsif"... we need to talk. The `this` keyword is the silent killer of clean code. It changes based on *how* you call it, not *where* you write it. I just dropped a massive deep dive on my blog: "Demystifying the JavaScript 'this' Keyword." I peel back the layers on: 🔹 The 4 binding rules every dev must memorize 🔹 The exact reason the code above fails (and how to fix it) 🔹 The magic of `.bind()`, `.call()`, and `.apply()` 🔹 Tricky interview questions that trip everyone up Don't let context bugs haunt your PRs anymore. Link to the full breakdown: https://lnkd.in/gWMGP5Kn (The answer to the snippet is `undefined`. My blog explains why! 😉) #JavaScript #CodingChallenge #Frontend #DeveloperLife #JS

JavaScript keeps surprising 😅 Every time it’s the same: “I thought I knew JS… until I saw this.” Inside the PDF: - weird-looking behavior - step-by-step breakdown - a clear explanation of what’s actually happening under the hood If this format is useful, let me know with a reaction or a comment — it really helps 🙌 PDF is attached below 👇 #javascript #jswtf #frontend #devlife

🧩 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 #JavaScript #ThisKeyword #AsyncJavaScript #setTimeout #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS

Using <div> for buttons. Just stop. 🛑 When you use a <div> as a button, you're creating extra work for yourself and a nightmare for keyboard users. <button>: Handles focus, "Enter" key, and screen readers automatically. <div>: Requires JS hacks just to make it usable. The Tip: Let the browser do the heavy lifting. Use semantic elements and get 80% of your #a11y for free. 🛠️ #webdev #frontend #javascript #coding #accessibility

“Ever tried using a variable before declaring it… and got weird results?” That’s JavaScript hoisting playing tricks! > In JavaScript, declarations are lifted to the top of their scope before the code runs. > But not everything behaves the same: • Functions: fully hoisted — call them anytime. • var variables: hoisted, but start as undefined. • let & const: hoisted too, but trapped in a “temporal dead zone” — using them too early throws an error. > Knowing hoisting helps prevent tricky bugs. Declare first, use later, and stay ahead of surprises! #JavaScript #WebDev #CodingTips #ReactJS #LearnByDoing

Debouncing in JavaScript. Ever noticed how a search bar fires an API call on every keystroke? That’s where debouncing saves the day. Debouncing helps you: ✅ Improve performance ✅ Reduce unnecessary API calls ✅ Build smoother user experiences If you’re working with search inputs, resize events, or form validations—this is a must-know concept. #JavaScript #FrontendDevelopment #WebDevelopment #FrontendEngineer #ProgrammingTips #CleanCode #PerformanceOptimization #DevCommunity #Softwarengineer

🚨 Quick JavaScript challenge Looks like a simple object method accessing this.name. Nothing fancy. Should work… right? But the output is not what most people expect. Before running it - Ask yourself: 👉 Does an object create scope? 👉 Where does this really come from? 👉 Arrow vs normal function - who controls it? Guess the output 👇 #JavaScript #Frontend #CodingChallenge

🔹JavaScript Tip: bind vs call vs apply These three methods are often confusing, but they all exist for one main reason: controlling the value of this when calling a function. Here’s a simple breakdown 👇 ✅ call() Invokes the function immediately Arguments are passed one by one ✅ apply() Invokes the function immediately Arguments are passed as an array ✅ bind() Does not invoke the function Returns a new function with this (and optional arguments) permanently bound Perfect for callbacks and event handlers Understanding these three makes working with callbacks, event listeners, and frameworks much easier. #JavaScript #WebDevelopment #Frontend #ProgrammingTips #CleanCode

JavaScript Arrow Functions This lesson explains how arrow functions provide a more concise and expressive syntax for defining functions in JavaScript. It describes how arrow functions with a single expression implicitly return a value without requiring the return keyword, thereby reducing verbosity. Additionally, the lesson highlights how arrow functions enhance code readability and maintainability while preserving the core behavior and functionality of traditional functions. #script_ish #learntocode #shortsfeed #TechTalk #frontend #webdesign #Shorts #webdevelopment #JavaScript #JS #ArrowFunctions

🚀 JavaScript Practice Project Built a Min–Max Price Range Slider using JavaScript. Learned DOM manipulation, event handling, input validation, and how to enforce a fixed gap between values while keeping text inputs and range sliders in sync. Still learning, one step at a time. 💪 🖇️ :https://lnkd.in/dvVY2yVY #frontend #codinglife #javascript #html #React