Implementing Deep Object Equality in JavaScript for #200DaysOfCode

A new browser-based AI IDE for React has arrived - JSX Tool If you’ve ever wished you could tweak your React components right inside the browser, this one’s for you. Unlike the standard DevTools that only help locate elements, JSX Tool lets you: ✔ Instantly jump to the JSX component behind any DOM node ✔ Edit its styling and code directly in-browser ✔ Prompt an LLM with full visual + code context (even via screenshots!) It bridges the long-standing gap between browser inspection and IDE editing turning your browser into an AI-powered React workspace. Think of it as DevTools + VS Code + AI All in one tab Definitely worth checking out if you work with React daily. Have you explored it yet? You’ll find the link in the comments. #react #javascript #developer_tools #webdevelopment

🚀 𝗪𝗵𝘆 𝗱𝗼𝗲𝘀𝗻’𝘁 𝗺𝘆 𝗔𝗣𝗜 𝗰𝗮𝗹𝗹 𝘄𝗮𝗶𝘁? That’s a question every JavaScript learner faces at some point. You try this 👇 const data = fetch("https://lnkd.in/gGpgs-MU"); console.log(data); and get: Promise { <pending> } 😕 No data. No city name. Just… pending. Here’s why — JavaScript doesn’t stop and wait. It’s 𝗮𝘀𝘆𝗻𝗰𝗵𝗿𝗼𝗻𝗼𝘂𝘀 — meaning it moves on while your API call is still in progress. That’s where 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 and 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 come in. They help your app “wait politely” for the data — without freezing everything else. 💡 In my latest beginner-friendly blog, I explain: - What Promises really are - How Async/Await makes async code readable - How to handle errors properly - And a mini project: Weather App with fetch() 📖 Read it here: 👉 https://lnkd.in/gBvD9DWD 🔗 Connect with me: 🌐 GitHub: https://lnkd.in/gE2g7ryy 💼 LinkedIn: https://lnkd.in/gx4HvWxF 💻 Dev.to: https://lnkd.in/g2ptGRBW 💬 What’s one JavaScript concept that confused you the most when you started learning? Let’s help each other out 👇 📢 Follow me for more beginner-friendly blogs, interview tips, and JavaScript explainers that actually make sense. #javascript #async #promises #react #frontend #webdevelopment #coding #programming #100daysofcode #learning #softwareengineering #beginners #devtips #developer #techcommunity

🟦 Day 177 of #200DaysOfCode Today, I revisited a key JavaScript concept — checking whether a property exists inside an object. What I practiced: I built a function that: ✅ Takes dynamic user input to create an object ✅ Asks for a property name ✅ Uses hasOwnProperty() to verify its existence 🧠 Why this is important? In real-world development, objects often store huge chunks of data such as: • User details • Configuration data • API responses • App state (React / Redux) Before accessing properties, it’s important to verify they exist — otherwise, we risk runtime errors or unexpected behavior. 📌 Core Takeaways • hasOwnProperty() is the most reliable way to check for direct properties • Helps in safely accessing nested or optional values • Useful for data validation & defensive coding 💡 This was a great reminder that strong fundamentals make us better at handling complex situations later. Logic remains the backbone of clean & safe code. #JavaScript #177DaysOfCode #LearnInPublic #ProblemSolving #WebDevelopment #CodingChallenge #DeveloperMindset #ObjectsInJS #LogicBuilding

I had an argument today on a topic which can be skipped very easily (You don't want to miss reading it) The issue was with understanding the following: ↳ setState() ↳ Mutable & Immutable ↳ Deep and Shallow Copy This looks like an easy concept, but if missed, you will keep scratching your head, or just do vibe coding (which is not recommended) const myInitialState = [ { name: 'name', age: 10 }, { name: 'name1', age: 20 }]; ❌ setState(prevState => prevState.sort((a, b) => a.age - b.age)); ✅ setStatet(prevState => { const sorted = [...prevState]; sorted.sort((a, b) => a.age - b.age)); return sorted; }); Q1. Why does updating the older value doesn't work, and the later works? Q2. Creating a copy via [...prevState] is still a shallow copy, then how does React knows something has changed? Answer 1. The reference matters here. When you change something to the older value, the reference doesn't change, and React thinks, it is still unchanged, hence, no re-render trigger, and no UI updates. Answer 2. Even when you create shallow copy, you are creating a new reference. Creating a new array via "[ ]" → Then shallow copy the items using Spread operator. So the reference of sorted and prevState changes. As soon as React sees that in the return, it triggers re-render, as per "Diffing Algorithm". If you have learnt something new, let your friend learn it too via Repost ♻️ P.S. I have bonus questions in the comment section. Let's check how good do you know React #reactjs #react #javascript #coding #programming #softwareengineering #frontend

I’ve been revisiting Data Structures & Algorithms on Frontend Masters and it reminded me how unique arrays in JavaScript are compared to other languages. It also took me back to why I picked JS as my first language beyond accessibility (coding on a phone back then!), it taught me how flexible and forgiving code could be. This time around, one thing really stuck: 🔹 The relationship between loops and Big O complexity 🔹 How this ties directly to React performance Performance issues in React don’t just come from heavy computations or complex hooks. They creep in through: ⚠️ Unnecessary nested loops inside map() ⚠️ Over-rendering caused by unoptimized useEffect dependencies ⚠️ Recalculating derived data on every render instead of memoizing React doesn’t make your code fast, good practices do.

💡 #Day6Challenge — Deep Dive into Spread, Rest & Reduce in JavaScript After mastering event loops, promises, async/await, closures, and prototypes — today I explored three extremely powerful concepts that make JavaScript cleaner, shorter, and smarter 👇 🚀 1️⃣ Spread Operator (…) Expands arrays and objects into individual elements. Perfect for merging, copying, or passing arguments dynamically. Example: const user = { name: "Rahul" }; const details = { age: 25, city: "Delhi" }; const merged = { ...user, ...details }; 🚀 2️⃣ Rest Operator (…) Collects multiple parameters into a single array — helping write reusable functions. Example: function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } console.log(sum(10, 20, 30)); // 60 🚀 3️⃣ Reduce Method Transforms arrays into single values — sum, average, merge, frequency count — possibilities are endless! Example: const cart = [ { item: "Shirt", price: 800 }, { item: "Jeans", price: 1200 }, { item: "Shoes", price: 1500 } ]; const total = cart.reduce((acc, curr) => acc + curr.price, 0); console.log(total); // 3500 💪 Concepts covered today: ✅ Spread / Rest Operator ✅ Array reduce() – sum, filter, merge, and count ✅ Object merging and destructuring ✅ Practical mini-projects (Cart total, Object merge, Even sum finder) 💬 Next up: Advanced reduce patterns + real-world data transformations before moving into Map, Filter, and Chaining concepts. #JavaScript #Day6Challenge #LearningJourney #WebDevelopment #FrontendDeveloper #100DaysOfCode #JSMastery #CodeEveryday #DeveloperCommunity #RahulLearnsJS

𝗗𝗮𝘆 𝟮𝟲: The Adventure Begins — Introduction to JavaScript! 🌟💻 The moment we’ve been waiting for has arrived! Day 26 of the AI Powered Cohort marked the official start of our JavaScript module. Today was all about getting a solid introduction and overview of this fundamental programming language: 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁? We learned that it's a high-level, interpreted scripting language primarily used to create interactive and dynamic content on websites. It’s the "behavior" layer of the web! 𝗖𝗼𝗿𝗲 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: We started with the absolute basics, covering how to execute simple JS code in the browser console and understanding the role of the JS engine. 𝗕𝗮𝘀𝗶𝗰 𝗦𝘆𝗻𝘁𝗮𝘅 𝗢𝘃𝗲𝗿𝘃𝗶𝗲𝘄: Got a quick look at variables, data types, and simple operations—the building blocks of any JS program. The transition from the declarative languages (HTML/CSS) to a procedural language like JavaScript is challenging but thrilling. This foundational session was crucial for setting the right perspective for the complex topics ahead. Excited for the practical coding to come! #Day26 #CodingJourney #AIpoweredCohort #JavaScriptIntroduction #ProgrammingBasics #WebDevelopment #Frontend #SheryiansCodingSchool #TechEducation

Why don't we manually free() memory in JavaScript? Thank the Garbage Collector (GC). JavaScript is a garbage-collected language, meaning it automates memory management. This prevents a whole class of bugs, like memory leaks and dangling pointers, that are common in languages like C/C++. The core challenge for any GC is to determine which objects are no longer in use. The main algorithm JavaScript engines rely on is Mark-and-Sweep. Here’s a simplified view: Roots: The GC identifies a set of "root" objects that are always accessible (e.g., the global object, the current function's call stack). Mark Phase: It traverses the entire object graph starting from these roots. Every object it can reach is "marked" as in-use. Sweep Phase: The collector then scans the entire memory heap. Any object that was not marked is unreachable ("garbage") and is deallocated. Modern engines (like V8) use advanced variations like a generational collector. This optimizes the process by making an assumption: most objects "die young." It splits memory into a "New Generation" (or "Young Space") and an "Old Generation." New objects are created in the New Generation, which is scanned very frequently. Objects that survive a few collection cycles are "promoted" to the Old Generation, which is scanned less often. This "automatic" cleanup is a core feature of JS, but it's not "free"—GC pauses can impact an app's responsiveness. As developers, understanding this process helps us optimize our code to work with the GC, not against it. #JavaScript #NodeJS #WebDevelopment #MemoryManagement #GarbageCollection #MarkAndSweep #Performance #V8 #SoftwareArchitecture #CS

This week, I focused on enhancing my DSA skills in JavaScript, and I finally grasped the concept of recursion. 🔁 Initially, recursion felt confusing. The idea of a function calling itself raised questions: “When does it stop?” 😅 Then I broke it down into a simple idea 👇 ➡ Every recursive function needs two things: 1️⃣ A base case (when to stop) 2️⃣ A recursive case (keep calling itself until base case hits) For example, the factorial of a number can be expressed as follows 👇: function factorial(n) { if (n === 1) return 1; // base case return n * factorial(n - 1); // recursive case } console.log(factorial(5)); // Output: 120 The breakthrough moment came when I visualized the call stack. I realized that each function call waits for the next one to finish, then unwinds back up with the results. Now, recursion seems less daunting; it’s simply another method of looping, using function calls instead of iterations. 🔁 Next, I plan to practice recursion-based problems like subsets, permutations, and tree traversals. 👉 If you’ve faced challenges with recursion, try tracing it manually once—it can be very helpful! #JavaScript #DSA #Recursion #FrontendDeveloper

🕐 Give me 2 minutes — I’ll help you understand how Node.js works under the hood. Node.js isn’t “just JavaScript on the server.” Here’s what really happens 👇 ⚙️ 1. Single Thread, Smart Brain Node runs on a single thread — but uses the Event Loop to handle thousands of requests efficiently. ⚡ 2. Event Loop Magic (The Real Hero) The Event Loop decides what runs and when. It processes tasks in phases, each with its own priority: 🕒 Timers → executes setTimeout & setInterval callbacks. ⚙️ I/O Callbacks → handles network and file events. 🧠 Idle/Prepare → internal housekeeping. 🚀 Poll → retrieves new I/O events, executes related callbacks. 🧩 Check → runs setImmediate callbacks. 🔁 Close → cleans up closed connections. 🧵 Microtasks (Promises & process.nextTick) These run between phases — meaning they get priority over almost everything else. That’s why promises often feel “faster” than timeouts. 🧩 3. libuv + Thread Pool Heavy operations (like file I/O or compression) are handled off-thread by libuv, keeping the main loop free. 🚀 4. Non-Blocking I/O = Speed Node isn’t multithreaded magic — it’s smart scheduling and async flow. Understanding this is the first step from coding Node apps to mastering backend performance. ⚡ #NodeJS #Backend #JavaScript #WebDevelopment #Engineering #EventLoop