Shallow vs Deep Copy in JavaScript: Understanding the Difference

One of the most important (and often confusing) concepts in JavaScript is the Execution Context. Whenever JavaScript runs your code, it does not execute it line by line immediately. Instead, it creates an Execution Context, which happens in two phases: 1️⃣ Memory Creation Phase (Hoisting Phase) • Variables are allocated memory • Functions are stored fully in memory • var variables are initialized with undefined Eg: console.log(a); // undefined var a = 10; 2️⃣ Code Execution Phase • JavaScript assigns actual values to variables • Executes function calls line by line ⸻ 🧠 Types of Execution Contexts 1. Global Execution Context • Created first • Associated with the global object (window in browsers) 2. Function Execution Context • Created whenever a function is invoked • Each function call gets its own context 3. Eval Execution Context (rarely used) ⸻ 📦 Call Stack • JavaScript uses a Call Stack to manage execution contexts • LIFO (Last In, First Out) • Helps JS know which function to execute and return from ⸻ 💡 Why this matters? Understanding Execution Context helps you master: • Hoisting • Scope & Closures • this keyword • Debugging tricky bugs • Writing better, predictable JavaScript If you’re preparing for JavaScript or React interviews, this concept is a must-know 🔥 #JavaScript #WebDevelopment #Frontend #ReactJS #ExecutionContext #InterviewPrep #JSConcepts

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) print() is called as a method. So inside print, this correctly refers to obj. But inside setTimeout… 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 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

✨ Shallow Copy vs Deep Copy in JavaScript In today’s post, I’ve explained the difference between shallow copy and deep copy in JavaScript in a simple, practical, and easy-to-understand way. This is one of those concepts that quietly causes bugs if not understood properly, especially while working with objects and arrays. If you’ve ever faced unexpected mutations in your code, this post will help you understand why it happens and how to avoid it. 👇 Which one confused you more when you first learned — shallow copy or deep copy? Follow Muhammad Nouman for more useful content #learningoftheday #900daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity

🚀 JavaScript Tip: Use find() Instead of filter()[0] I still see developers writing this: const user = users.filter(u => u.id === 1)[0]; But if you only need one item, find() is the better choice: const user = users.find(u => u.id === 1); Why? • filter() returns an array • It loops through the entire array • You only need one element find(): ✔ Returns the first match ✔ Stops iterating once found ✔ Improves readability ✔ More intention-revealing Small improvements like this make your code cleaner and more professional. What other JavaScript best practices do you follow daily? #JavaScript #WebDevelopment #Frontend #CodingTips #SoftwareEngineering

Day 16 I used to chase new frameworks every week. React today. Next.js tomorrow. React native next month. But here’s what I’m learning: The real edge is mastering the basics. ✔️ Clean HTML structure ✔️ Proper CSS layout (Flexbox & Grid) ✔️ JavaScript fundamentals ✔️ Understanding how APIs actually work Most developers don’t lack tools. They lack depth. The goal isn’t to know everything. The goal is to be so solid at the fundamentals that you can build anything. Today I revised core JavaScript concepts and focused on writing cleaner, simpler logic. No hype. Just reps. #FrontendDevelopment #JavaScript #WebDevelopment #BuildInPublic #SoftwareEngineering

Promises in JavaScript is actually an interesting concept. Promises are one of the most important concepts in modern JavaScript. A Promise is an object that represents a value that will be either available now, later or never. It has three states: pending, fulfilled and rejected. Instead of blocking the program while waiting for something like data or an image to load, a promise allows JavaScript to continue running and then react when the task finishes. We can build a promise by using the Promise constructor, which takes an executor function with two parameters: resolve and reject. Resolve is called when the operation succeeds, and reject is called when something goes wrong. We can also consume promises using the .then() to handle success and catch() to handle errors. Each .then() method returns a new promise which allows us to chain asynchronous steps in sequence. Another powerful concept is PROMISIFYING, this simply means converting old callback-based APIs (like setTimeout or certain browser APIs) into promises so they can fit into modern asynchronous workflows. Understanding how to build, chain and handle promises properly is the foundation we need in mastering asynchronous JavaScript. #JavaScript #WebDevelopment #FrontendDevelopment #TechJourney #Growth

This small filter() mistake is hurting your JavaScript readability. Most developers write: Returning true or false inside an unnecessary if/else. But filter() already expects a boolean. Return the condition directly. Less noise. More clarity. Cleaner code. Readable code > clever code. Do you prefer explicit returns or implicit ones? 👇 #JavaScript #WebDevelopment #CleanCode #SoftwareEngineering #Frontend

DAY 14 OF POSTING REACT CONTENT ⚛️ WHY DOES REACT TAKE VALUES OUT OF OBJECTS DIRECTLY? 🤔 In JavaScript, data usually comes as objects. Accessing the same object again and again makes code harder to read. So JavaScript allows us to pick only what we need from an object and use it directly. React uses this everywhere to keep code: 👉 clean 👉 readable 👉 less repetitive That’s why React code often looks shorter without doing anything extra. 💬 Did destructuring confuse you the first time you saw React code? #ReactJS #JavaScript #ReactBasics #FrontendDevelopment #LearnInPublic #WebDevelopment #CodingJourney

Most developers don’t write bad async JavaScript. They write confusing async JavaScript. The issue usually isn’t syntax. It’s the mental model. When you mix .then() with await, scatter error handling, and don’t understand execution flow, async code becomes hard to reason about. In this reel, I explain: How async/await actually works Why consistency matters more than preference How to structure async logic for readability A simple rule that instantly improves your code Clean async code reduces bugs, improves maintainability, and makes debugging significantly easier. If you're serious about writing production-level JavaScript, mastering async flow is non-negotiable. What’s the biggest async mistake you see developers make? #JavaScript #WebDevelopment #SoftwareEngineering #CleanCode #NodeJS

Day 13: Promise APIs in JavaScript (Promise.all, race, allSettled, any) If you really want to master async JavaScript, you must understand the Promise APIs 💡 JavaScript gives us powerful methods to handle multiple promises. 🔹 1️⃣ Promise.all() 👉 Waits for all promises to succeed 👉 Fails immediately if any one fails Promise.all([api1(), api2(), api3()]) .then(results => console.log(results)) .catch(error => console.log(error)); ✅ Best when all results are required ❌ One failure = everything fails 🔹 2️⃣ Promise.race() 👉 Returns the first promise that settles (resolve or reject) Promise.race([api1(), api2(), api3()]) .then(result => console.log(result)) .catch(error => console.log(error)); ✅ Useful for timeout logic 🔹 3️⃣ Promise.allSettled() 👉 Waits for all promises 👉 Returns status of each (fulfilled/rejected) Promise.allSettled([api1(), api2()]) .then(results => console.log(results)); ✅ Useful when you want all results, even if some fail 🔹 4️⃣ Promise.any() 👉 Returns the first fulfilled promise 👉 Ignores rejected ones Promise.any([api1(), api2()]) .then(result => console.log(result)) .catch(error => console.log(error)); ✅ Best when you only need one successful response 🔥 Quick Summary • Promise.all → All must succeed • Promise.race → First settled wins • Promise.allSettled → Get all results • Promise.any → First success wins 🧠 Why Important? ✔️ Used in real-world APIs ✔️ Common frontend interview question ✔️ Helps optimize async performance #JavaScript #Promises #AsyncJavaScript #webdevelopment #LearnInPublic