Understanding this in JavaScript this — one of the most misunderstood keywords in JavaScript. It’s simple in theory… until it suddenly isn’t 😅 Here’s what makes it tricky — this depends entirely on how a function is called, not where it’s written. Its value changes with context. Let’s look at a few examples 👇 const user = { name: "Sakura", greet() { console.log(`Hello, I am ${this.name}`); }, }; user.greet(); // "Sakura" ✅ const callGreet = user.greet; callGreet(); // undefined ❌ (context lost) const boundGreet = user.greet.bind(user); boundGreet(); // "Sakura" ✅ (context fixed) Key takeaways 🧠 ✅ this refers to the object that calls the function. ✅ Lose the calling object → lose the context. ✅ Use .bind(), .call(), or .apply() to control it. ✅ Arrow functions don’t have their own this — they inherit from the parent scope. These small details often trip up developers in interviews and real-world debugging sessions. Once you understand the context flow, this becomes a lot less scary to work with. 💪 🎥 I simplified this in my Day 28/50 JS short video— check it out here 👇 👉 https://lnkd.in/gyUnzuZA #javascript #webdevelopment #frontend #backend #programming #learnjavascript #softwaredevelopment #developerslife #techsharingan #50daysofjavascript
Understanding 'this' in JavaScript: A Common Pitfall
More Relevant Posts
-
🚀 Day 30/50 – Function Currying in JavaScript Think of Function Currying like building a relationship. You don’t propose directly 😅 First comes the “Hi Hello 👋” phase → then friendship ☕ → and finally… the proposal ❤️ In JavaScript, instead of passing all arguments at once, Function Currying lets us pass them step by step, each step returning a new function until the final output is achieved. Here’s a simple code analogy from my video: function proposeTo(crush) { return function (timeSpent) { return function (gift) { return `Dear ${crush}, after ${timeSpent} of friendship, you accepted my ${gift}! 🥰`; }; }; } console.log(proposeTo("Sizuka")("3 months")("red rose 🌹")); Each function takes one argument and returns another function — making the code modular, flexible, and easy to reuse. 👉 This is Function Currying — one argument, one step, one perfect result. 🎥 Watch the full short video here: 🔗 https://lnkd.in/g-NkeYBc --- 💡 Takeaway: Function Currying isn’t just a JavaScript trick — it’s a powerful pattern for cleaner, more composable functions that enhance reusability and maintainability in modern frontend code. --- Would love to know: 👉 What’s your favorite JavaScript concept that clicked instantly when you saw it explained simply? #javascript #frontenddevelopment #webdevelopment #coding #programming #softwareengineering #learnjavascript #100daysofjavascript #techsharingan #developers #careergrowth
To view or add a comment, sign in
-
🚀 Understanding JavaScript: '' vs null vs undefined In my journey as a developer, I’ve found that some of the smallest details make a big difference. One such detail: knowing when to use an empty string (''), null, or undefined. Let’s break it down simply: 🔹 let var1 = '' This is an empty string. You're saying: "I have a string variable, but it currently holds no characters." Type is “string”. 🔹 let var2 = null This is a deliberate assignment of "no value". Use it when you expect a value later, but for now there’s nothing. It signals intention. 🔹 let var3 = undefined This means the variable exists, but is not yet assigned a value (or hasn’t been set explicitly). It’s more a default state than a deliberate one. 🎯 Why this matters Using the wrong one can lead to bugs or confusion for you (and your team) when reading code. Empty strings, null, and undefined each have different behaviours in comparisons, type checks, and program logic. Being intentional improves readability and maintainability of your code. 👉 Takeaway: Use '' when you want a string that doesn’t have content yet. Use null when you know a value will come later, but now there isn’t one. Accept that undefined is often what you get when you forget to assign, rather than something you deliberately choose. 💬 I’d love to hear from you: do you use null deliberately in your code, or mostly rely on undefined? How do you decide between them? Drop your thoughts below. #JavaScript #CodingTips #WebDevelopment #Programming #SoftwareEngineering
To view or add a comment, sign in
-
⚙ Understanding Functions in JavaScript — The Building Blocks of Code A function in JavaScript is like a mini-program inside your main program. It allows you to reuse code, organize logic, and make your code modular. --- 💡 Definition: A function is a block of code designed to perform a particular task. You can define it once and call it multiple times. --- 🧠 Syntax: function greet(name) { console.log("Hello, " + name + "! 👋"); } greet("Kishore"); greet("Santhiya"); ✅ Output: Hello, Kishore! 👋 Hello, Santhiya! 👋 --- 🧩 Types of Functions: 1. Named Function function add(a, b) { return a + b; } 2. Anonymous Function const multiply = function(a, b) { return a * b; }; 3. Arrow Function const divide = (a, b) => a / b; --- ⚙ Why Functions Matter: ✅ Reusability ✅ Readability ✅ Easier debugging ✅ Cleaner, modular code --- 🔖 #JavaScript #WebDevelopment #FunctionsInJS #Frontend #CodingTips #JSConcepts #LearnToCode #100DaysOfCode #KishoreLearnsJS #DeveloperJourney #WebDevCommunity #CodeLearning
To view or add a comment, sign in
-
Those little question marks in JavaScript? They finally make sense now. 😅 💡 Today I learned something subtle but super useful in JavaScript! Those little question marks ? and ?? actually do a lot more than I thought Here’s what clicked for me today ✅ ?? – Nullish Coalescing Operator Returns the right-hand value only if the left-hand side is null or undefined. So it helps you set true defaults without breaking valid falsy values like 0 or "". let count = 0; console.log(count || 10); // 10 (because 0 is falsy) console.log(count ?? 10); // 0 (because 0 is not null/undefined) ✅ || – Logical OR Operator Returns the right-hand side if the left-hand side is falsy (false, 0, "", null, undefined, NaN). It’s great for simple fallbacks - but not when 0 or an empty string are valid values. ✅ ?. – Optional Chaining Safely accesses nested properties without throwing an error. console.log(user?.profile?.email); ✅ ? : – Ternary Operator A clean one-liner for conditions: let age = 20; let status = age >= 18 ? "Adult" : "Minor"; I love how small syntax choices like "?? " vs || can make code both safer and more expressive. Feels like I leveled up my JavaScript brain today 😄 #JavaScript #TodayILearned #WebDevelopment #CodeTips #Frontend
To view or add a comment, sign in
-
JS Learners & Web Devs! Ever wondered why you can call a function before it’s defined in JavaScript, but let or const throw a ReferenceError? Our latest blog dives deep into Hoisting in JavaScript: How JS engine really works Understanding the Temporal Dead Zone (TDZ) Function vs variable hoisting Common pitfalls & best practices Stop guessing and start writing safer, cleaner JS code! https://lnkd.in/dCeqNnRf #javascript #webdevelopment #hoistinginjs #learnjavascript #coding #programming #FrontendDevelopment #webdev #CodeNewbie #wenowadays
To view or add a comment, sign in
-
💡 Day 8/50 – Mastering JavaScript’s Subtle Behaviors 🚀 In JavaScript, sometimes the hardest bugs aren’t syntax errors — they’re “Wait… why did that happen?” moments 😅 Today’s Day 8 questions were built around 3 such moments that every developer faces: --- 🧬 1️⃣ Prototype Inheritance — The Hidden Chain When you create an object using Object.create(), it doesn’t copy properties from the parent… it links to it. That means if a property isn’t found in the child, JavaScript looks up the prototype chain to find it. 👉 This “lookup behavior” often confuses devs who expect a fresh, independent copy. So the next time you’re debugging unexpected data access, remember — It might not be your object, it might be its prototype! --- 🧠 2️⃣ The Mystery of Double .bind() You might think rebinding a function twice changes its context again. But nope! Once you bind a function in JavaScript, it’s permanently bound. Calling .bind() again has no effect — the context (the value of this) stays fixed to the first bind. 💡 Why? Because bind() returns a new function with the this value locked in forever. --- 🧩 3️⃣ Type Coercion + Function Conversion Ever tried adding a function to a string like add + "text"? JavaScript doesn’t crash — it converts your function to a string using its internal toString() method! The result isn’t math; it’s a combination of type coercion and string representation. This is one of those delightful quirks that makes JS both fun and… slightly unhinged 😄 --- 📽️ Watch Day 8 Reel: https://lnkd.in/gBHYWgyi Because once you understand the why, no interviewer can trick you again 😉 #JavaScript #FrontendDevelopment #WebDevelopment #JSInterviewQuestions #CodingChallenge #TechLearning #SoftwareEngineering #Techsharingan #Developers
To view or add a comment, sign in
-
*5 Things I Wish I Knew When Starting JavaScript 👨💻* Looking back, JavaScript was both exciting and confusing when I started. Here are 5 things I wish someone had told me earlier: *1. var is dangerous. Use "let" and "const" "var" is function-scoped and can lead to unexpected bugs. "let" and "const" are block-scoped and safer. *2. JavaScript is asynchronous Things like "setTimeout()"and "fetch()" don’t behave in a straight top-down flow. Understanding the *event loop* helps a lot. *3. Functions are first-class citizens* – You can pass functions as arguments, return them, and even store them in variables. It’s powerful once you get used to it. *4. The DOM is slow – avoid unnecessary access* – Repeated DOM queries and manipulations can hurt performance. Use "documentFragment" or batch changes when possible. *5. Don’t ignore array methods* map(), "filter()" , "reduce()", "find()"… they make code cleaner and more readable. I wish I started using them sooner. 💡 *Bonus Tip:* "console.log()" is your best friend during debugging! If you’re starting out with JS, save this. And if you're ahead in the journey — what do *you* wish you knew earlier? #JavaScript #WebDevelopment #CodingJourney #Frontend #LearnToCode #DeveloperTips
To view or add a comment, sign in
-
Today's Topic: Promise Chaining in JavaScript In JavaScript, Promise chaining allows you to execute asynchronous tasks one after another, ensuring that each step waits for the previous one to finish. Instead of nesting callbacks (callback hell ), promises make your code cleaner and easier to maintain. Example: function step1() { return new Promise((resolve) => { setTimeout(() => { console.log("Step 1 completed ✅"); resolve(10); }, 1000); }); } function step2(value) { return new Promise((resolve) => { setTimeout(() => { console.log("Step 2 completed ✅"); resolve(value * 2); }, 1000); }); } function step3(value) { return new Promise((resolve) => { setTimeout(() => { console.log("Step 3 completed ✅"); resolve(value + 5); }, 1000); }); } // Promise Chaining step1() .then(result => step2(result)) .then(result => step3(result)) .then(finalResult => console.log("Final Result:", finalResult)) .catch(error => console.error("Error:", error)); ✅ Output (after 3 seconds): Step 1 completed ✅ Step 2 completed ✅ Step 3 completed ✅ Final Result: 25 Each .then() runs after the previous promise resolves — making async flow easy to read and manage. --- 🔖 #JavaScript #WebDevelopment #PromiseChain #AsyncProgramming #CodingTips #FrontendDevelopment #Developers #JSConcepts #CodeLearning #100DaysOfCode #WebDevCommunity
To view or add a comment, sign in
-
-
🤖 Day 2 of my 7-Day JavaScript Revision Challenge! Today's focus: Control Flow & Functions in JavaScript Control flow defines how your JavaScript program runs — step-by-step or through decisions, loops, and functions. Understanding it helps you write logic-driven, structured, and reusable programs. ⚙️ ⚡ 1. Conditional Statements 🔹 Use if, else if, and else to make decisions in your program. 🔹 switch statements help handle multiple conditions more cleanly. 🔹 Conditions guide your program to perform different actions based on logic. 🔁 2. Loops 🔹 Loops allow you to repeat tasks until a specific condition is met. 🔹 Common types include for, while, and do...while. 🔹 Be mindful of infinite loops by updating conditions correctly. ⚙️ 3. Functions 🔹 Functions group reusable pieces of code, keeping your program modular and organized. 🔹 They can take inputs (parameters) and return outputs (results). 🔹 Arrow functions provide a shorter syntax for writing functions. 💡 4. Practice Challenges ✅ Write a function to find the maximum of two numbers. ✅ Use a loop to print all even numbers between 1 and 20. ✅ Build a simple calculator using switch. 🔥 Key Takeaway: Mastering control flow and functions builds the foundation for writing clean, efficient, and reusable JavaScript code. 🚀 Up next — Day 3: Arrays & Objects! #JavaScript #7DaysOfCode #WebDevelopment #CodingJourney #LearnJavaScript #FrontendDevelopment #JSChallenge #CodeNewbie #DeveloperCommunity #Programming #TechLearning #DailyCoding #JSPractice #FunctionsInJS #ControlFlow #AmanCodes
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development