Shallow vs Deep Copy in JavaScript

There's always something to gain from going back to the fundamentals. Between client projects and building out systems, I've been carving out time to sharpen my JavaScript. Recently covered: → Primitive vs Reference Data Types → Number, Null, Undefined, BigInt, and Symbols → The typeof operator → Ternary operators → Introduction to Object Destructuring None of this is glamorous. But the designers and developers who write clean, predictable code are almost always the ones who took the fundamentals seriously. Still a few more concepts on the list. Sharing the progress as I go. #JavaScript #WebDevelopment #Webflow #LearningInPublic

Day 5 ⚡ Async/Await in JavaScript — The Clean Way to Handle Async Code If you’ve struggled with .then() chains, async/await is your best friend 🚀 --- 🧠 What is async? 👉 Makes a function always return a Promise async function greet(){ return "Hello"; } greet().then(console.log); // Hello --- ⏳ What is await? 👉 Pauses execution until a Promise resolves function delay(){ return new Promise(res => setTimeout(() => res("Done"), 1000)); } async function run(){ const result = await delay(); console.log(result); } --- ⚡ Why use async/await? ✔ Cleaner than .then() chaining ✔ Looks like synchronous code ✔ Easier error handling --- ❌ Sequential vs ⚡ Parallel // ❌ Sequential (slow) const a = await fetchUser(); const b = await fetchPosts(); // ⚡ Parallel (fast) const [a, b] = await Promise.all([ fetchUser(), fetchPosts() ]); --- ⚠️ Error Handling try { const data = await fetchData(); } catch (err) { console.log("Error handled"); } --- 💡 One-line takeaway 👉 async/await = cleaner + readable way to handle Promises #JavaScript #AsyncAwait #WebDevelopment #Frontend #Coding #100DaysOfCode

I just published a new open-source library: input-mask. I built it because input masking on the frontend often feels more annoying than it should be, especially in simple projects, forms, landing pages, and workflows where you just want to configure the field and move on. The idea is straightforward: apply input masks using HTML attributes only, without needing to write JavaScript just to initialize everything. You add the library via CDN, use attributes like data-mask="pattern" or data-mask="currency" on the input, and it handles the rest. Under the hood it uses IMask, but the whole point was to hide that complexity and make the implementation much more accessible. The first public version already supports: • pattern • regex • number • currency • date Repo: https://lnkd.in/e6pkj7wB CDN: https://lnkd.in/ebc7fdr5 If anyone wants to try it, share feedback, or suggest improvements, I’d love to hear it. #javascript #frontend #webdev #opensource #forms #nocode

🚀 Day 20 – Deep vs Shallow Copy in JavaScript Ever changed a copied object… and accidentally modified the original too? 😅 Yeah, that’s the shallow copy trap. Let’s fix that today 👇 🔹 Shallow Copy Copies only the first level 👉 Nested objects still share the same reference 🔹 Deep Copy Creates a fully independent clone 👉 No shared references, no unexpected bugs 💡 Real-world example (Angular devs 👇) When working with forms, APIs, or state (NgRx), a shallow copy can silently mutate your original data — leading to hard-to-debug UI issues. ⚡ Best Ways to Deep Copy ✔️ structuredClone() (modern & recommended) ✔️ JSON.parse(JSON.stringify(obj)) (with limitations) ✔️ _.cloneDeep() (lodash) 🔥 TL;DR Shallow Copy → Shares references Deep Copy → Fully independent Prefer structuredClone() whenever possible 💬 Have you ever faced a bug because of shallow copying? Drop your experience 👇 #JavaScript #Angular #WebDevelopment #Frontend #Programming #100DaysOfCode

What To Know in JavaScript (2026 Edition). Part 2. New Set Methods (working with collections) JavaScript now includes new methods for Set, enabling operations like in math: intersection, union, difference. This turns Set into a truly powerful tool — not just a “unique array”. Now you get: - fewer utility functions - cleaner code - more declarative logic #frontend #webdev #javascript #performance

In JavaScript: 𝐯𝐚𝐥𝐮𝐞 == 𝐧𝐮𝐥𝐥 is one of the few places where 𝐥𝐨𝐨𝐬𝐞 𝐞𝐪𝐮𝐚𝐥𝐢𝐭𝐲 is intentional. Under the hood, the == operator follows the 𝐀𝐛𝐬𝐭𝐫𝐚𝐜𝐭 𝐄𝐪𝐮𝐚𝐥𝐢𝐭𝐲 𝐂𝐨𝐦𝐩𝐚𝐫𝐢𝐬𝐨𝐧 algorithm. It includes a special rule: if one value is 𝐧𝐮𝐥𝐥 and the other is 𝐮𝐧𝐝𝐞𝐟𝐢𝐧𝐞𝐝, it returns 𝐭𝐫𝐮𝐞, without further type coercion. So: 𝐮𝐧𝐝𝐞𝐟𝐢𝐧𝐞𝐝 == 𝐧𝐮𝐥𝐥 // true On the other hand, === uses 𝐒𝐭𝐫𝐢𝐜𝐭 𝐄𝐪𝐮𝐚𝐥𝐢𝐭𝐲 𝐂𝐨𝐦𝐩𝐚𝐫𝐢𝐬𝐨𝐧, which checks both type and value with no exceptions: 𝐮𝐧𝐝𝐞𝐟𝐢𝐧𝐞𝐝 === 𝐧𝐮𝐥𝐥// false That’s why this pattern works: if (value == null) { // catches both null and undefined } It’s not “loose” by accident, it’s a deliberate shortcut baked into the language.

🤔 Ever seen RangeError: Maximum call stack size exceeded and wondered what it actually means? It usually comes down to how the call stack works, how recursion grows it, and why every JavaScript engine has depth limits. 🧠 JavaScript interview question What is the call stack, why does recursion have depth limits, and what causes a stack overflow? ✅ Short answer The call stack is where JavaScript keeps track of active function calls. Every recursive call adds a new stack frame. If recursion goes too deep, or never stops, the stack fills up and throws a stack overflow error. 🔍 A bit more detail JavaScript runs code on a single thread and uses the call stack to manage function execution. When one function calls another, a new execution context is pushed onto the stack. When a function finishes, it is popped off and control returns to the caller. With recursion, this push process keeps happening until a base case stops it. That is why a correct base case matters so much. Without it, or with too many nested calls, you eventually hit the engine's stack limit and get: RangeError: Maximum call stack size exceeded Example with a safe base case: function factorial(n) { if (n < 0) throw new Error("Negative values are not allowed"); if (n === 0 || n === 1) return 1; // base case return n * factorial(n - 1); // recursive case } console.log(factorial(5)); // 120 This works because the recursion has a clear stopping point. Here is the kind of pattern that causes stack overflow: function endless(n) { return endless(n + 1); // no base case } ⚠️ Important clarification Infinite recursion is not the only problem. Even valid recursion can fail if the input gets deep enough, because JavaScript engines have limited stack space. That is why for very deep problems, an iterative solution is often safer than recursion. #javascript #webdevelopment #frontend #codinginterview #learninpublic

What To Know in JavaScript (2026 Edition). Part 1. Iterator Helpers (lazy data processing) JavaScript introduced Iterator Helpers — methods like .map(), .filter(), .take() directly on iterators. The goal is to avoid unnecessary intermediate arrays and improve performance. Instead of chaining operations that create arrays at every step, you get: → less memory usage → fewer computations → more predictable performance #frontend #webdev #javascript #performance

🧠 Day 11 of 21days challenge Shallow vs Deep Copy in JavaScript ⚠️ const copy = { ...obj }; Looks like a copy… but not always safe. Shallow copy duplicates only top-level properties. Deep copy creates a completely independent object. For easy understanding :- Shallow copy = shared nested reference Deep copy = fully independent copy Shallow changes affect original 👉 That’s why bugs happen in state updates This changed how I handle object mutations 🚀 #JavaScript #Frontend #InterviewPrep

Stop using Date in JavaScript for new projects The Date object is now officially legacy. TC39 is replacing it with the Temporal API. If you're still writing new Date() in 2026, you're shipping technical debt. Why Date is a problem: Mutable by default: Calling setDate changes the original object. That’s how you get surprise bugs in production. Months start at zero: January is 0. December is 11. Every dev has been burned by this at least once. Timezone chaos: new Date("2026-01-01") can give you Dec 31st at night depending on where your server runs. One object for everything: No way to represent just a date or just a time. It’s always a full datetime whether you want it or not. How Temporal fixes this: It’s immutable, so every operation returns a new value. Months start at 1 like normal humans expect. And you get specific types: PlainDate for dates only, PlainTime for time only, ZonedDateTime when you care about timezones, Duration for math. Instead of adding 86400000 milliseconds to add a day, you just write add one day. Way cleaner. What to do today: For new projects, use date-fns or Day.js until Temporal lands in browsers. If you want to be future-proof, try the @js-temporal/polyfill now. Temporal is Stage 3 and landing soon. Don’t let legacy APIs hold your codebase back. What are you using for dates in 2026? Let me know below 👇 #JavaScript #WebDev #Temporal #CleanCode #Frontend #TypeScript