Nidhi Jagga’s Post

The hidden cost of the Spread Operator in JS 💡 We often reach for the spread operator [...] because it’s elegant, declarative, and keeps our data immutable. It’s a staple of modern JavaScript for a reason. However, there’s a specific pattern where this "clean" syntax can unintentionally impact performance: using spread inside a loop. What’s happening under the hood? 🔍 When we write a loop like this: for (let item of data) { result = [...result, item]; } It looks like a simple addition. But computationally, we are: 1. Allocating a brand-new array in memory. 2. Copying every existing element from the old array into the new one. 3. Repeating this for every single iteration. If you have a dataset of 10,000 items, you aren't just performing 10,000 additions. You’re triggering millions of internal copy operations (O(n^2) time complexity). This is often why a UI might feel "heavy" or "janky" as the garbage collector tries to keep up with all those discarded arrays. The "Photocopier" Perspective 📑 Think of it like copying a 100-page book. Using spread in a loop is like: 🔸Copying page 1. 🔸Then copying pages 1 and 2 together. 🔸Then copying pages 1, 2, and 3 together... By the time you reach page 100, you've done a mountain of unnecessary work! A Snappier Approach 🛠️ If you’re working with large datasets, consider these alternatives to keep your app responsive: 🔹Standard .push(): A simple, O(n) operation that modifies the array in place. 🔹.reduce() with a mutable accumulator: Functional style without the memory tax. 🔹Array.from() or .map(): Usually the most idiomatic way to transform data. I’m curious—how do you balance "clean" code vs. raw performance? Do you stick to strict immutability for the sake of readability, or do you opt for manual optimizations when the data starts to scale? Let’s talk in the comments! 👇 #JavaScript #WebDev #CodingTips #SoftwareEngineering #Performance #WebPerformance #Frontend #Programming #CleanCode #SoftwareDevelopment #WebDesign

"Var and functions move to the top of your file" ...but do they? Really? Think about it. Open any JavaScript file right now. Add a console.log before a var declaration. Run it. You get undefined — not an error. Call a function 50 lines before you've even written it. It works. Perfectly. Now try the same thing with let or const. It crashes. ReferenceError. If hoisting truly "moves code to the top" — why doesn't it move let and const too? Because nothing is moving anywhere. That explanation you've been hearing since day one? It's a lie. A convenient, oversimplified lie that every tutorial keeps repeating. The truth is — JavaScript reads your code twice. Yes. Twice. The first time, it doesn't execute anything. It just scans your entire file and quietly builds a memory map. Every var it finds gets stored as undefined. Every function gets stored completely. Every let and const gets stored too — but locked. Untouchable. Frozen until their exact line is reached. The second time, it actually runs your code. Line by line. And because memory was already set up, accessing a var before its declaration doesn't crash — it simply finds undefined sitting there, waiting. Nothing moved to the top. The engine just remembered it before you asked. This process has a name that most JavaScript developers have never properly learned — the Execution Context and its two phases. And once you understand it, JavaScript stops being weird. Closures make sense. Scope chains make sense. Even the this keyword starts clicking. I broke this down with code examples and step-by-step visuals on Medium. Link in comments 👇 #JavaScript #WebDevelopment #Programming #SoftwareEngineering #NodeJS #BackendDevelopment

𝐒𝐭𝐫𝐮𝐜𝐭𝐬 𝐢𝐧 𝐂# Coming from JavaScript, I used to scroll past the word "struct" in C# docs and YouTube videos, convinced it was one of those "senior developer topics" that I wouldn’t be able to understand. They often pop up in the .NET team's YouTube demos. Turns out structs are similar to classes in a lot of ways and aren't hard at all to understand. 𝗦𝗼, 𝘄𝗵𝗮𝘁 𝗶𝘀 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁?  • It is a custom 𝘃𝗮𝗹𝘂𝗲 𝘁𝘆𝗽𝗲. By 'value type' we mean a variable of type struct will store the actual value or piece of information in memory  • 'Struct' is short for 'structure' or 'data structure' 𝗛𝗼𝘄 𝗱𝗼 𝘆𝗼𝘂 𝗰𝗿𝗲𝗮𝘁𝗲 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁? You create a struct the same way as a class except that you use the 𝘀𝘁𝗿𝘂𝗰𝘁 keyword instead of the 𝗰𝗹𝗮𝘀𝘀 keyword. Example: 𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘶𝘤𝘵 𝘜𝘴𝘦𝘳 {   𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘪𝘯𝘨 𝘕𝘢𝘮𝘦 { 𝘨𝘦𝘵; 𝘪𝘯𝘪𝘵; }   𝘱𝘶𝘣𝘭𝘪𝘤 𝘴𝘵𝘳𝘪𝘯𝘨 𝘌𝘮𝘢𝘪𝘭 { 𝘨𝘦𝘵; 𝘪𝘯𝘪𝘵; } } What's even more interesting is that, like a class, a struct can have:  • Fields  • Properties  • Methods  • Constructors You also instantiate a struct the same way as a class: 𝘜𝘴𝘦𝘳 𝘶𝘴𝘦𝘳 = 𝘯𝘦𝘸() {𝘕𝘢𝘮𝘦="𝘗𝘦𝘵𝘦𝘳", 𝘌𝘮𝘢𝘪𝘭="𝘦𝘮𝘢𝘪𝘭@𝘦𝘹𝘢𝘮𝘱𝘭𝘦.𝘤𝘰𝘮"}; 𝗦𝗼 𝘄𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗮 𝗰𝗹𝗮𝘀𝘀 𝗮𝗻𝗱 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁 𝘁𝗵𝗲𝗻? The main difference is that a struct is a value type, while a class is a reference type. Another difference is that structs can’t inherit from other structs or classes. They also can’t be the base of a struct or class. However, they can implement interfaces. 𝗖𝗵𝗼𝗼𝘀𝗶𝗻𝗴 𝘁𝗼 𝗺𝗮𝗸𝗲 𝗮 𝗰𝗹𝗮𝘀𝘀 𝗼𝗿 𝗮 𝘀𝘁𝗿𝘂𝗰𝘁 When is it best to use a struct instead of a class? I would say choose a struct when you want to create a 𝘀𝗺𝗮𝗹𝗹 𝗲𝗻𝘁𝗶𝘁𝘆 that is mainly focused on representing data and not behaviour. If the 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝘂𝗿 𝗼𝗳 𝘁𝗵𝗲 𝗲𝗻𝘁𝗶𝘁𝘆 𝗶𝘀 𝗮𝗹𝘀𝗼 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁, then it's better to choose a class. Note that a struct can have methods, but its methods are usually focused on answering questions about the data. Also, since structs are 𝘃𝗮𝗹𝘂𝗲 𝘁𝘆𝗽𝗲𝘀 and classes are 𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝘁𝘆𝗽𝗲𝘀, you can choose a struct if working with a value type has some advantage over a reference type.

🚨 I finally stopped forcing everything into plain Objects & Arrays in JavaScript… and my code became cleaner, faster, and completely leak-free overnight. If you’re still dealing with: 1️⃣ String-only keys 2️⃣ Duplicate values messing up your logic 3️⃣ Manual .length hacks 4️⃣ Prototype pollution or sneaky memory leaks …then this guide is going to change how you write JS forever. I created a complete, no-fluff 13-page PDF that breaks down the 4 powerful data structures most developers overlook: 1️⃣ Map → Any type of key + guaranteed order + .size built-in 2️⃣ Set → Unique values only + blazing-fast lookups 3️⃣ WeakMap → Private data without memory leaks 4️⃣ WeakSet → Safe object tracking that auto-cleans itself What’s inside: ✅ Crystal-clear explanations with real code examples ✅ Side-by-side comparison: Object vs Map | Array vs Set ✅ Exact “When & Why” scenarios (interview favorite) ✅ Mathematical Set operations (Union, Intersection, etc.) ✅ 5 practical coding tasks with full solutions ✅ Top 6 interview questions & answers 📥 The full PDF is attached — download it right now, open your editor, and start using these today. You’ll feel the difference in minutes. Save this post. Share it with one developer friend who’s still stuck with basic objects/arrays. Follow me for more practical JavaScript deep-dives, real-world tips, and ready-to-use resources that actually level up your code. Full notes + all code examples are on my GitHub Let’s keep growing together! 💪 #JavaScript #WebDevelopment #Frontend #CodingTips #DataStructures #InterviewPrep #100DaysOfCode

Just shipped something I'm genuinely proud of, I call it AlgoTracker I've always struggled to truly understand Big O Notation just by reading about it. So I built a visual tool to help me see it in action. What it does: Linear Search O(N) and Binary Search O(log N) Selection Sort and Insertion Sort O(N²) A time complexity graph that runs each algorithm, measures how long it takes, and compares them visually based on input size A step-by-step visualizer so you can watch exactly how data gets sorted or searched The time complexity graph is my favourite feature, you can literally see which algorithm is faster as you increase the data size. Built it using Recharts for the graph visuals. This project started as a learning tool for myself, but I think it could help any developer who learns better by seeing rather than just reading. Live demo: https://lnkd.in/djuGe-tJ GitHub: https://lnkd.in/dmrribMi Built with React · Tailwind CSS v4 · Recharts · Node.js #webdeveloper #javascript #react #buildinpublic #opensource

How I built a full Apiary Management System using a strict 3-tier architecture and a zero-JS CSS frontend 🐝💻 Reaching a major milestone in my software engineering journey, I recently completed the Beehive Apiary Management System—a full-stack application built entirely on the "less is more" principle, both on the server and client sides. When designing the architecture, I focused on two main goals: 1️⃣ Rock-Solid Backend: I locked the business logic into a strict Controller-Service-Repository (3-tier) structure using Java 17 and Spring Boot. To ensure data security and clean data transfer, I implemented Entity-DTO mapping (via ModelMapper) across the board, so my REST API only communicates exactly what it needs to. 2️⃣ The "No-JS" UI Challenge: While the views are rendered with Thymeleaf, the real visual flex is in the styling. I engineered a mathematically precise hexagonal (beehive) grid and complex hover states using pure HTML5 and CSS3—without relying on a single line of JavaScript. I absolutely love the performance and security of clean, JS-free user interfaces powered by a robust OOP backend. I am currently expanding my stack with React and Python, but these solid Java/CSS foundations remain my absolute favorites. 👉 The full source code and visual architecture are available in my GitHub repo (link in the first comment!). I’d love to hear from more experienced engineers: at what point of UI complexity do you usually let go of pure CSS and reach for JS frameworks for animations and state management? #SpringBoot #Java17 #SoftwareEngineering #CSSArchitecture #WebDevelopment #Backend #Frontend

Day 67 of me reading random and basic but important dev topicsss..... Today I read about the Advanced JavaScript Range Properties & Methods..... Yesterday, I looked at the fundamentals of creating a Range in the DOM. Today, I explored the properties and convenience methods that make traversing and building these ranges highly efficient. When integrating raw DOM logic into frameworks like React, knowing these native shortcuts saves us from writing manual, bug-prone offset calculations. Core Range Properties: When we inspect a Range object, it gives us crucial contextual data: * startContainer / startOffset: The exact node and position where the range begins. * endContainer / endOffset: The node and position where the range ends. * collapsed: A boolean. true if the start and end are at the exact same point (think of a blinking text cursor with no characters highlighted). * commonAncestorContainer: The deepest parent element that fully wraps the entire range. (Incredibly useful for validating if a user's selection is contained within a specific UI component!). Pro Methods (Skip the math!): Instead of calculating exact indexes with setStart and setEnd, you can leverage semantic methods: * setStartBefore(node) / setStartAfter(node): Drops the boundary right outside a target node. * selectNode(node): Creates a range that encompasses the entire node, including its outer HTML tags. * selectNodeContents(node): Selects only the inside of the node......perfect for instantly capturing all the text inside a <div> or <p>. * collapse(toStart): Instantly shrinks the range to just its starting or ending cursor point. Keep Learning!!!!!! #JavaScript #WebDevelopment #DOM #FrontendDev

🚀 Day 14/100 – Arrays in JavaScript = Small Methods, Big Power! Today I went back to basics and realized something powerful 👇 👉 Mastering array methods = writing cleaner, smarter code. Here’s a quick breakdown of what I revised 👇 💡 Transform & Create split() → turns a string into an array "hello world".split(" ") // ["hello", "world"] 💡 Add Elements push() → add at the end unshift() → add at the beginning let arr = [2,3]; arr.push(4); // [2,3,4] arr.unshift(1); // [1,2,3,4] 💡 Remove Elements pop() → removes last element arr.pop(); // [1,2,3] 💡 Find & Check indexOf() → find position [10,20,30].indexOf(20) // 1 💡 Rearrange reverse() → flips the array [1,2,3].reverse() // [3,2,1] 💡 Convert toString() → array → string join() → array → custom string [1,2,3].join("-") // "1-2-3" ✨ Big Realization: These aren’t just “methods”… they’re tools to think better in code. The more I practice, the more patterns I start seeing 🔁 📈 Consistency > Intensity Day by day, getting sharper. #100DaysOfCode #JavaScript #CodingJourney #LearnInPublic #WebDevelopment #LearningInPublic Sheryians Coding School Sheryians Coding School Community

𝐘𝐨𝐮𝐫 𝐮𝐬𝐞𝐄𝐟𝐟𝐞𝐜𝐭 𝐢𝐬 𝐫𝐮𝐧𝐧𝐢𝐧𝐠 𝐭𝐨𝐨 𝐦𝐚𝐧𝐲 𝐭𝐢𝐦𝐞𝐬, 𝐚𝐧𝐝 𝐲𝐨𝐮 𝐝𝐨𝐧'𝐭 𝐤𝐧𝐨𝐰 𝐰𝐡𝐲? It's a classic trap, especially when dealing with objects or arrays in your dependency array. React's `useEffect` checks for reference equality, not deep equality. So, if you declare an object or array inline (e.g., `const options = { a: 1 };`) inside your component, it gets recreated on every render. Even if its contents are identical, its reference changes, tricking `useEffect` into re-running. ```javascript // This recreates 'config' on every render, // causing useEffect to re-run unnecessarily. function MyComponent({ data }) { const config = { userId: data.id, theme: 'dark' }; useEffect(() => { // fetchData(config); // This runs too often! }, [config]); // config reference changes every render } ``` The fix? Memoize those dependencies! ```javascript // Use useMemo to stabilize the config object. function MyComponent({ data }) { const config = useMemo(() => ({ userId: data.id, theme: 'dark' }), [data.id]); // Only re-create config if data.id changes useEffect(() => { // fetchData(config); // Now this only runs when config (or data.id) actually changes }, [config]); } ``` This ensures config's reference only changes when `data.id` (its actual dependency) changes, preventing wasteful re-renders and keeping your effects clean. It's a small change with a big impact on performance and predictability. What's your most common `useEffect` debugging headache? Share in the comments! #React #JavaScript #FrontendDevelopment #WebDev #Performance

Day 90 of me reading random and basic but important dev topicsss...... Today I read about the File Object in JavaScript As web applications become more robust, handling file uploads, drag-and-drop interfaces, and binary data is an absolute must for modern frontend development. What is a File? At its core, a File object is just a specific type of Blob (Binary Large Object) that is extended with filesystem-related capabilities. Because it inherits from Blob, it has access to all the same properties, but adds two crucial pieces of OS-level data: * name: The file name string (e.g. "profile.png"). * lastModified: The timestamp of the last modification (integer date). How do we get a File object? There are two primary ways we encounter files in the browser: 1. User Input (The Common Way) Most of the time, the OS provides this data when a user interacts with an <input type="file"> or a drag-and-drop interface. function handleUpload(input) { // input.files is an array-like object, as users can select multiple files let file = input.files[0]; console.log(`Name: ${file.name} | Modified: ${file.lastModified}`); } 2. The Constructor (The Programmatic Way) You can manually construct a file using: new File(fileParts, fileName, [options]) * fileParts: An array of Blob, BufferSource, or String values. * fileName: The name of your new file. * options: An optional object where you can pass a custom lastModified timestamp. Pro-Tip: Sending files to the backend is incredibly seamless. Modern network APIs like fetch and XMLHttpRequest natively accept File objects in their payload! You don't always have to parse them first. Keep Learning!!!! #JavaScript #WebDevelopment #Frontend #SoftwareEngineering #CodingTips