How JavaScript manages memory: Stack and Heap

🚀 Deep Clone an Object in JavaScript (the right way!) Most of us have tried this at least once: const clone = JSON.parse(JSON.stringify(obj)); …and then realized it breaks when the object has functions, Dates, Maps, or undefined values 😬 Let’s fix that 👇 ❌ The Problem with JSON.parse(JSON.stringify()) >It’s quick, but it: >Removes functions >Converts Dates into strings >Skips undefined, Infinity, and NaN >Fails for Map, Set, or circular references ✅ Option 1: Use structuredClone() (Modern & Fast) Available in most modern browsers and Node.js (v17+). It can handle Dates, Maps, Sets, and even circular references — no errors, no data loss. const deepCopy = structuredClone(originalObject); Simple, native, and reliable 💪 ✅ Option 2: Write Your Own Recursive Deep Clone Useful for older environments or if you want to understand the logic behind cloning. 💡 Pro Tip: If you’re working with complex or nested data structures, always prefer structuredClone(). It’s the modern, built-in, and safest way to deep clone objects in JavaScript. 🔥 Found this useful? 👉 Follow me for more JavaScript deep dives made simple — one post at a time. #JavaScript #WebDevelopment #FrontendDevelopment #CodingTips #LearnJavaScript #Programming #DeveloperCommunity #WebDev #ES6 #JSDeveloper #JavaScriptTips #JavaScriptObjects #JavaScriptClone #JavaScriptCloneObject

When building a Queue in JavaScript, most of the time we start with an array. It works, but not efficiently. Here’s why using a Linked List can be a smarter choice 💡 1. Efficient Dequeue (O(1)) In an array, removing the first element (shift()) reindexes all remaining items, that’s O(n) time. In a linked list, we can simply move the head pointer, constant time O(1). 2. Dynamic Size Arrays have fixed memory allocation behind the scenes. A linked list grows and shrinks as needed, no need to resize or copy data. 3. Memory-Friendly for Large Data When working with large queues (like task schedulers or message systems), linked lists avoid memory overhead caused by array reallocation. In short: Array-based queues are easy to start with, but linked list-based queues scale better for performance and memory. Bangla Summary: Queue তৈরি করতে Array ব্যবহার করা সহজ, কিন্তু বড় ডেটার ক্ষেত্রে তা সময়সাপেক্ষ। Linked List ব্যবহার করলে dequeue অপারেশন অনেক দ্রুত (O(1)) হয় এবং memory আরও দক্ষভাবে ব্যবহৃত হয়। তাই বড় বা dynamic Queue-এর জন্য Linked List বেশি উপযোগী। Do you prefer using arrays or linked lists for queue implementations and why? #JavaScript #DataStructures #Queue #LinkedList #Algorithms #WebDevelopment #LearnInPublic #Programming

🚀 Day 84/90 – #90DaysOfJavaScript Topic covered: Copying by Reference vs Value in JavaScript ✅ Reference vs Value 👉 Primitive types (string, number, boolean, etc.) are copied by value. 👉 Objects and arrays are copied by reference, meaning both variables point to the same memory. ✅ Copying Arrays 👉 Shallow Copy: Creates a new top-level array but shares nested references. 👉 Methods: slice(), spread ([...]), Array.from(). 👉 Deep Copy: Fully duplicates nested data. 👉 Methods: structuredClone(), JSON.parse(JSON.stringify()) (⚠️ limited for special data types). ✅ Copying Objects 👉 Assignment (=) copies the reference. 👉 Shallow Copy: Object.assign({}, obj) or {...obj} — nested objects still shared. 👉 Deep Copy:  👉 structuredClone(obj) ✅ 👉 JSON.parse(JSON.stringify(obj)) ⚠️ (loses functions, undefined, etc.) ✅ Key Takeaways 👉 Shallow copy affects nested objects/arrays. 👉 structuredClone() is the most reliable modern solution for deep cloning. 👉 Always choose cloning method based on data type and depth of structure. 🛠️ Access my GitHub repo for all code and explanations: 🔗 https://lnkd.in/d3J47YHj Let’s learn together! Follow my journey to #MasterJavaScript in 90 days! 🔁 Like, 💬 comment, and 🔗 share if you're learning too. #JavaScript #WebDevelopment #CodingChallenge #Frontend #JavaScriptNotes #MasteringJavaScript #GitHub #LearnInPublic

💡 structuredClone() vs JSON.parse(JSON.stringify()) Both are used for deep copying objects in JavaScript, but they’re not the same. 🧠 structuredClone() Creates a true deep copy (recursively copies nested data). Supports complex types: Date, Map, Set, Blob, etc. Handles circular references safely. Faster and more reliable. const clone = structuredClone(obj); ⚠️ JSON.parse(JSON.stringify()) Works only for simple JSON-safe data. Loses functions, Dates, Maps, Sets, and Symbols. Crashes on circular references. ✅ Use structuredClone() whenever available (modern browsers & Node 17+). Use the JSON trick only for plain, simple data. #JavaScript #WebDevelopment #Frontend #DeepCopy #CodingTips

Day 10, and I’ve moved on from simple lists (arrays) to managing complex data with JavaScript Objects! If arrays are just numbered lists, objects are like personalized file folders that let you organize information using descriptive names (keys) instead of numbers. This is how you structure anything with multiple properties like a user profile or a product all inside one clean variable. I learned the two main ways to grab information from them: Dot Notation (e.g., user.name) and Bracket Notation (e.g., user['email']). It feels like the final piece of the data organization puzzle! When you’re dealing with objects in JavaScript, when is it necessary or better to use Bracket Notation over Dot Notation?" #objects #javascript #31dayschallenge #growth #frontend #webdevelopment

How JavaScript Handles Memory Every program needs memory to store data, and JavaScript is no different. When you declare variables, objects, or functions, JS allocates memory for them in two main areas: the Stack and the Heap. #Stack: Used for primitive values (like numbers, strings, booleans) and function calls. It’s fast and simple — data is stored and removed in a Last-In-First-Out (LIFO) order. #Heap: Used for objects, arrays, and functions — anything that can grow in size or be referenced. It’s more flexible but slower because data is stored dynamically and accessed through references. Here’s a quick example 👇 let a = 10; // stored in Stack let b = { name: "Ali" }; // stored in Heap let c = b; // c points to same Heap reference c.name = "Akmad"; console.log(b.name); // "Ahmad" — both point to same object Here, both b and c point to the same memory in the Heap, which is why updating one affects the other. Understanding this helps prevent reference-related bugs. Now comes the smart part — Garbage Collection 🧹. JavaScript automatically frees up memory that’s no longer accessible. This is managed by an algorithm called Mark and Sweep, which “marks” objects still reachable from the global scope and removes the rest. But be careful — if you accidentally keep references alive (like global variables or event listeners), JS can’t clean them up. That’s how memory leaks happen. In short, memory management in JS is mostly automatic, but understanding it helps you write efficient code. You’ll learn to manage references better, avoid leaks, and appreciate just how elegantly JavaScript balances power and simplicity. #JavaScript #MemoryManagement #WebDevelopment #MERNStack #NodeJS #ReactJS #Frontend #CodingCommunity #LearnInPublic #100DaysOfCode #DeveloperJourney

🔥 JS Loops Demystified: for vs for…in vs for…of If you’ve ever wondered which loop to use in JavaScript, you’re not alone. Choosing the wrong one can cause subtle bugs! Here’s a quick guide: 1️⃣ Classic for loop – The old reliable const arr = [10, 20, 30]; for (let i = 0; i < arr.length; i++) {  console.log(arr[i]); } Use when you need index access, or want full control over iteration. 2️⃣ for…in loop – Iterate over keys (property names) const arr = [10, 20, 30]; for (let key in arr) {  console.log(key); // 0, 1, 2 } Works on objects too. ⚠️ Can be dangerous for arrays — also loops over inherited properties. 3️⃣ for…of loop – Iterate over values const arr = [10, 20, 30]; for (let value of arr) {  console.log(value); // 10, 20, 30 } Perfect for arrays, strings, maps, sets. Safe, clean, and readable. 💡 Pro tip: Use for when you need the index. Use for…of for values (most array iterations). Avoid for…in on arrays — reserve it for objects. Small choice, huge impact on readability and bug prevention. #JavaScript #CodingTips #WebDevelopment #FrontendDev #CleanCode #JSProTips #ForOfVsForIn

JavaScript Tip of the Day: Spread & Rest Operators ( … ) The ... (three dots) in JavaScript might look simple — but it’s super powerful! It can expand or collect values depending on how you use it. 🔹 Spread Operator Used to expand arrays or objects. const nums = [1, 2, 3]; const moreNums = [...nums, 4, 5]; console.log(moreNums); // [1, 2, 3, 4, 5] You can also use it for objects: const user = { name: "Venkatesh", role: "Engineer" }; const updatedUser = { ...user, location: "India" }; console.log(updatedUser); 🔹 Rest Operator Used to collect remaining arguments into an array. function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); } console.log(sum(10, 20, 30)); // 60 You can even use it in destructuring: const [first, ...rest] = [1, 2, 3, 4]; console.log(first); // 1 console.log(rest); // [2, 3, 4] 🔸 In Short: Spread → Expands data Rest → Collects data Same syntax, opposite purpose! 💬 Question for You Which operator do you use more often — Spread or Rest? Drop your answer 👇 and tag a friend learning JS! #JavaScript #Coding #WebDevelopment #LearnToCode #FrontendDevelopment #CodingCommunity #SoftwareEngineering #JavaScriptTips #JSDeveloper #ProgrammingLife #TechLearning #CodeNewbie #WebDevJourney #100DaysOfCode #ES6 #DeveloperCommunity #CodingInPublic #FullStackDeveloper #JSConcepts

📅 Day 73 #FrontendChallenge 🚀 Mastering JavaScript Arrays – The Backbone of Data Handling Arrays are one of the most powerful and flexible ways to store and manage collections of data in JavaScript. Whether you’re a beginner or writing production-grade apps, understanding arrays deeply makes your code cleaner, faster, and smarter! Let’s break it down 👇 🔹 Creating Arrays There are multiple ways to create arrays in JS: // 1️⃣ Literal way const fruits = ["apple", "banana", "mango"]; // 2️⃣ Using Array constructor const numbers = new Array(10, 20, 30); // 3️⃣ From another iterable const chars = Array.from("HELLO"); // 4️⃣ Using Array.of() const scores = Array.of(95, 85, 76); 🔹 Common Array Methods Make your data manipulation effortless! push(), pop(), shift(), unshift(), splice(), slice(), concat(), includes(), indexOf() Example: const names = ["Tom", "Jerry"]; names.push("Spike"); // ["Tom", "Jerry", "Spike"] 🔹 Higher-Order Methods (The real magic ✨) These methods make your code cleaner, shorter, and functional: map()  → Transform elements   filter() → Select elements based on condition   reduce() → Accumulate into a single value   forEach() → Loop elegantly   find()  → Find first matching element  Example: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8, 10] 🧠 Remember: Arrays are more than just lists — they’re powerful data structures that let you manipulate, transform, and analyze data effectively. #JavaScript #WebDevelopment #CodingTips #Arrays #Frontend #LearningJS #100DaysOfCode

🔍 𝗛𝗼𝘄 `𝗪𝗲𝗮𝗸𝗠𝗮𝗽` 𝗮𝗻𝗱 `𝗪𝗲𝗮𝗸𝗦𝗲𝘁` 𝗛𝗲𝗹𝗽 𝗣𝗿𝗲𝘃𝗲𝗻𝘁 𝗠𝗲𝗺𝗼𝗿𝘆 𝗟𝗲𝗮𝗸𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Memory leaks can sneak up on any developer—even the most vigilant. Fortunately, JavaScript’s `WeakMap` and `WeakSet` offer powerful tools to manage object lifecycles and avoid lingering references. In this article, you’ll learn: ✅ What sets `WeakMap` and `WeakSet` apart from `Map` and `Set` ✅ How these weak-referenced structures let garbage collector clean up unused objects ✅ Practical patterns: caching objects safely, managing metadata, and building memory-safe data structures 👉 𝗥𝗲𝗮𝗱 𝘁𝗵𝗲 𝗳𝘂𝗹𝗹 𝗴𝘂𝗶𝗱𝗲 𝗵𝗲𝗿𝗲: https://lnkd.in/diZEe_k9 When your app runs longer, or handles complex object graphs, these tools are game-changers. #JavaScript #WebDevelopment #MemoryManagement #Performance #WeakMap #WeakSet #CodingTips