Conditionally Add Object Property in JavaScript with Spread Operator

🔹 Why call, apply, and bind exist In JavaScript, this keyword is not fixed. Its value depends on how a function is called, not where it’s written. call, apply, and bind let you manually control what this refers to. Here’s the simplest way to remember them 👇 call() • Invokes a function immediately • Passes arguments one by one fn.call(context, arg1, arg2) apply() • Invokes a function immediately • Passes arguments as an array fn.apply(context, [arg1, arg2]) bind() • Does NOT invoke immediately • Returns a new function with bound context const newFn = fn.bind(context) 👉 Key takeaway • call & apply → execute now • bind → execute later Understanding these helps you: • Control this • Write reusable functions • Debug tricky JavaScript issues Which one confused you the most when you started? #JavaScript #FrontendDevelopment #React #WebDev #JSFundamentals #LearningInPublic

JavaScript's got some tricks up its sleeve. It can change the type of a value to make it play nice with another value - and that's where things can get weird. It's like trying to mix oil and water, they just don't blend. But JavaScript will force it, and that's when you get unexpected results. Not good. For instance, if you're trying to add a number to a string, JavaScript will just convert that number to a string - no questions asked. Here's what's happening behind the scenes: when you use the + sign with a number and a string, JavaScript turns the number into a string, like it's trying to make them compatible or something. But when you use the - sign with a number and a string, it's like JavaScript is trying to make the string more "number-like" - it converts the string to a number. And then there's comparing values - that's a whole other can of worms. The == sign is like a matchmaker, trying to make the values work together, even if it means changing their type. But the === sign is more like a strict referee, only returning true if the values are the same type and value - no exceptions. For example, 0 == false returns true, because JavaScript is all about making things match. But 0 === false returns false, because they're just not the same, you know? So what's the takeaway? Always use the === sign when comparing values, unless you've got a good reason not to - and be careful when working with different types, or you might end up with some weird results. It's all about understanding how JavaScript works its magic. Source: https://lnkd.in/grRX8xTp #JavaScript #Coding #WebDevelopment

🚀 Callbacks in JavaScript — Don’t Call Me Now, Call Me Later A callback is simply a function 👉 passed into another function 👉 and executed after a task is completed This is how JavaScript handles async operations. 🧠 Why Callbacks Exist JavaScript is single-threaded, but not blocking. Callbacks allow long tasks (API calls, timers, events) to finish without stopping execution. 📌 What’s Happening Here? ✔️ fetchData starts an async task ✔️ JavaScript moves ahead without waiting ✔️ After 1 second, the callback is pushed to the call stack ✔️ Callback runs when the stack is empty 🎯 Why This Topic Matters ✅ Foundation of async JavaScript ✅ Explains event handling & timers ✅ Leads to promises & async/await ✅ Common interview question 💡 Reality Check: “Callbacks are powerful… until they turn into callback hell.” #JavaScript #Callbacks #AsyncJavaScript #Frontend #WebDevelopment #JSConcepts #InterviewPrep

🚀 JavaScript this Keyword — One Word, Many Behaviors this is not about where a function is written It’s about how the function is called. That’s why it confuses even experienced developers. 🧠 How JavaScript Decides this JavaScript determines this at runtime, not during writing the code. 📌 What’s Happening Here? ✔️ Global this depends on environment ✔️ Normal functions get this from the caller ✔️ Object methods point this to the object ✔️ Arrow functions inherit this from lexical scope ✔️ call, apply, bind explicitly set this 💡 Golden Rule: “If it’s an arrow function, this is borrowed — not created.” #JavaScript #ThisKeyword #Frontend #WebDevelopment #JSConcepts #InterviewPrep #ReactJS #MERN

The this Keyword in JavaScript — One Concept, Many Bugs Most JavaScript issues related to this come from a single misunderstanding: this is not based on where a function is defined. It is based on how the function is invoked. Inside an object method, this correctly refers to the object. Inside callbacks such as forEach, map, or setTimeout, that context is lost — often resulting in undefined. This is why: Hard-coding object names does not scale Callbacks silently break context Arrow functions exist Arrow functions lexically bind this, preserving the surrounding context without bind or workarounds. Key takeaway: If this is undefined, the issue is rarely the variable — it’s the invocation. Wishing everyone a Merry Christmas and a restful holiday season 🎄 #JavaScript #SoftwareEngineering #WebDevelopment #JavaScriptTips #CleanCode #FrontendDevelopment

🚀 JavaScript Hoisting: What Really Happens Behind the Scenes? Hoisting is one of those JavaScript concepts that looks confusing… until you understand how the JavaScript engine reads your code. 🧠 Hoisting = memory allocation before execution, not moving code upward. 📌 What’s Really Happening? ✔️ var is hoisted and initialized with undefined ✔️ let and const are hoisted but stay in the Temporal Dead Zone (TDZ) ✔️ Accessing let / const before initialization throws ReferenceError ✔️ Function scope creates a new execution context with its own hoisting phase 💡 Rule to Remember: “If JavaScript knows the variable exists but hasn’t initialized it yet → TDZ.” #JavaScript #Hoisting #Frontend #WebDevelopment #JSInternals #InterviewPrep #ReactJS #MERN

🚀 JavaScript Scope & Lexical Environment — How JS Finds Your Variables Ever wondered how JavaScript knows which variable to use when the same name exists in multiple places? That magic happens because of Scope and the Lexical Environment. 🧠 Scope (In Simple Words) Scope defines where a variable can be accessed. JavaScript follows lexical (static) scoping, meaning: ➡️ Scope is decided by where the code is written, not how it’s called. 🧩 Lexical Environment A Lexical Environment is: A memory space for variables & functions A reference to its parent scope This creates the scope chain. 📌 What’s Happening Here? ✔️ inner() first looks in its own scope ✔️ If not found, it moves to outer() scope ✔️ Then to the global scope ✔️ This lookup path is called the Scope Chain 🎯 Why This Matters in Real Life ✅ Foundation of closures ✅ Prevents accidental variable access ✅ Helps write predictable, bug-free code ✅ Common interview favorite topic 💡 Golden Rule: “JavaScript looks for variables from inside → outside, never the other way around.” #JavaScript #Scope #LexicalEnvironment #WebDevelopment #Frontend #JSConcepts #InterviewPrep #ReactJS

One of the most common bugs in JavaScript and React comes from copying objects the wrong way 😅 Shallow Copy vs Deep Copy In JavaScript, when you copy an object using the spread operator (...), you are only creating a shallow copy. Example: ``` const user = { name: “Ali”, skills: [“JS”, “React”] }; const copy = { …user }; copy.skills.push(“Node”); console.log(user.skills); // [“JS”, “React”, “React”, “Node”] ``` Why did the original object change? Because: • name was copied • but skills is still pointing to the same array in memory Both user.skills and copy.skills reference the same place. To create a real independent copy, use: const deepCopy = structuredClone(user); Now changing deepCopy will not affect user. 📌 In React, this mistake can cause: • state bugs • missing re-renders • very confusing UI issues Understanding how memory and references work is a game changer. #JavaScript #React #Frontend #WebDevelopment #Programming

🚀 Day 10 | Day 25-JavaScript Hoisting – Explained Clearly Today, I learned about JavaScript Hoisting, an important concept that explains how JavaScript handles variables and functions before code execution. 📌 What I learned today: ⬆️ Hoisting happens during the compilation phase, before execution 📌 Only declarations are hoisted, not initializations ⚠️ var variables are hoisted and initialized with undefined 🚫 let and const are hoisted but remain in the Temporal Dead Zone (TDZ) ✅ Function declarations are fully hoisted and can be called before definition ❌ Function expressions behave like variables and are not callable before assignment Hoisting: Hoisting is an important concept in JavaScript that happens during the compilation phase, before the code is executed. In this phase, JavaScript processes variable and function declarations and treats them as if they are moved to the top of their scope. 👉 Key point: Only declarations are hoisted, not initializations. 🔹 var Hoisting: Variables declared with var are hoisted and initialized with undefined. 🔹 let and const: let and const are also hoisted, but they remain in the Temporal Dead Zone (TDZ) until their declaration line is reached. Accessing them before initialization throws a ReferenceError. 🔹 Function Declarations: Function declarations are fully hoisted (both name and body), so they can be called before they appear in the code. 🔹 Function Expressions: Function expressions behave like variables. The variable is hoisted, but the function assignment is not. #JavaScript #Hoisting #LearningJourney #WebDevelopment #FrontendDevelopment #100DaysOfCode

So, context is everything. It's the backbone of JavaScript functions. You can't just use a function without setting its context, right? That's where Function.prototype.bind comes in - it's like a Swiss Army knife for setting the this keyword. You pass a value to bind, and it sets the this keyword to that value - simple. But, it's not just about setting the context, you can also pass a list of arguments that'll be used when the new function is called. It's like prepping a function with some default values, so when you call it, it's already got some of the work done. The bind method returns a new function, with the specified this value and arguments - pretty handy. For instance, imagine you've got an object, let's say, a person with a name and a greet function. You can use bind to create a new function that's got the person's context, so when you call it, it logs out a greeting with the person's name. It looks something like this: const person = { name: 'Alice', greet: function (greeting) { console.log(`${greeting}, my name is ${this.name}`); }, }; const greetAlice = person.greet.bind(person); greetAlice('Hello'); // Output: Hello, my name is Alice And, the use cases for bind are pretty diverse - you can use it for partial application, classes, or even DOM events. But, be careful, using bind too much can lead to memory issues, since each call creates a new function object. So, to optimize, you can cache bound functions or avoid unnecessary bindings. Now, there are other methods like call and apply that can set the context for functions, but bind is way more flexible and powerful. Check out this article for more info: https://lnkd.in/gjvmHMue #javascript #functionprototypebind #contextiskey