Destructuring arrays in objects with JavaScript/TypeScript

Extracting Types from Arrays Ever needed to get the type of items inside an array without rewriting it manually? You can achieve that with TypeScript as follows ⬇️. const statuses = ["active", "inactive", "pending"] as const; type Status = (typeof statuses)[number]; // "active" | "inactive" | "pending" That is because Arrays in JavaScript are actually objects with numeric keys, So [number] literally means: “Give me the type of whatever is stored at any index in this array.” It even works with arrays of objects: const tabs = [  { label: "Home", value: "/home" },  { label: "About", value: "/about" }, ]; type Tab = (typeof tabs)[number]; // { label: string; value: string; } 💡 This applies the Open/Closed Principle (OCP). #TypeScript #WebDevelopment #Frontend #CodingTips #JavaScript #LearnInPublic

𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗟𝗲𝘅𝗶𝗰𝗮𝗹 𝗦𝗰𝗼𝗽𝗶𝗻𝗴 𝗮𝗻𝗱 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Every JavaScript developer must master two powerful concepts: 𝗟𝗲𝘅𝗶𝗰𝗮𝗹 𝗦𝗰𝗼𝗽𝗶𝗻𝗴 and 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 — because they form the foundation of how functions truly work under the hood. ♟️𝗟𝗲𝘅𝗶𝗰𝗮𝗹 𝗦𝗰𝗼𝗽𝗶𝗻𝗴: It determines where variables can be accessed in your code. In JavaScript, a function can access variables defined in its own scope and in the scope where it was declared, not where it’s called. ♟️𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀: When a function “remembers” the variables from its outer scope even after that outer function has finished executing — that’s a closure in action. They allow functions to have “private” data and maintain state. As you can see in the picture below, example code shows that 𝚒𝚗𝚗𝚎𝚛() keeps access to count even after 𝚘𝚞𝚝𝚎𝚛() has returned — that’s the magic of 𝗰𝗹𝗼𝘀𝘂𝗿𝗲𝘀! ♟️Pro Tip: 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀 are the secret behind many JS patterns like 𝗱𝗮𝘁𝗮 𝗽𝗿𝗶𝘃𝗮𝗰𝘆, 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗳𝗮𝗰𝘁𝗼𝗿𝗶𝗲𝘀, and 𝗲𝘃𝗲𝗻𝘁 𝗵𝗮𝗻𝗱𝗹𝗲𝗿𝘀. #JavaScript #WebDevelopment #Coding #Closures #LexicalScope #FrontendDevelopment #JSConcepts #WebDevCommunity #LearnToCode #CodeNewbie #ProgrammingTips #100DaysOfCode #DeveloperJourney

👀 JS Macro vs Micro tasks: A very important concept of JS, often ignored, but can put you in hours long debugging sessions 😂 🧩 Basically, JS doesn’t just have one queue — it has two (if categorized majorly on priority basis): Macrotasks: timers, I/O, setTimeout, etc. Microtasks: promises, queueMicrotask, process.nextTick etc. Microtasks run right after the current stack — before the next macrotask. So even a setTimeout(..., 0) gets delayed behind promises. That’s why code like attached image prints in this order: ``` promise timeout ``` You can read more about this in the article below: https://lnkd.in/gEjWn3_S #JavaScript #NodeJS #EventLoop #AsyncProgramming #WebDevelopment #SoftwareEngineering #LearnInPublic

🚀 STOP GUESSING! 🛑 Ever wondered why changing one JavaScript variable sometimes changes another? You've stumbled into the most crucial concept for any JS developer: Stack vs. Heap Memory! 🤯 I just dropped a new video that tackles Chapter 2 of our DSA series: How JavaScript Handles Data. In this deep dive, you'll master: ✨ Primitive vs. Reference Data Types (The ultimate differentiator!) 🧠 The Stack (Why simple values are fast!) 📦 The Heap (Where your objects and arrays actually live!) 🔑 The critical concept of Copy by Value vs. Copy by Reference that breaks code. If you're preparing for interviews 💼 or just want to write less buggy code, this is mandatory viewing. Stop letting the memory model be a mystery! 📺 Watch the full video here: [Link in comment] Join TechCraft Club: https://lnkd.in/gHU3iqnX Let me know in the comments: What's the one memory concept that confused you the most when you started coding? 👇 #JavaScript #DSA #Coding #TechCareers #SoftwareDevelopment #StackVsHeap #ProgrammingTips #WebDevelopment

🚀 𝗗𝗲𝗲𝗽 𝗖𝗹𝗼𝗻𝗲 𝗢𝗯𝗷𝗲𝗰𝘁𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 (𝘁𝗵𝗲 𝗥𝗜𝗚𝗛𝗧 𝘄𝗮𝘆) Most of us have cloned objects at some point using: const clone = JSON.parse(JSON.stringify(obj)); But… this method silently breaks things 😬 It: ❌ Removes functions ❌ Converts Date objects into strings ❌ Loses undefined, NaN, and Infinity ❌ Completely fails with Map, Set, or circular references So what’s the better approach? ✅ Option 1: Use structuredClone() Modern, fast, and now available in most browsers + Node.js (v17+). It correctly handles: • Dates • Maps • Sets • Circular references No fuss. No polyfills. Just works. ✅ Option 2: Write your own deep clone (for learning) A recursive deep clone function helps understand how object copying really works. (Sharing my implementation in the code snippet images above 👆) ⚡ Pro Tip: If you're dealing with complex nested objects, just use structuredClone(). It’s native, efficient, and avoids hours of debugging later. 🔥 If you found this helpful, 👉 Follow me for more bite-sized JavaScript insights. Let’s learn smart, not hard 🚀 #JavaScript #WebDevelopment #Frontend #NodeJS #CodeTips

🫢 Ever wondered what happens behind the scenes when you reassign a value in JavaScript? 🤔 👉 When you update a primitive data type (like string, number, boolean, undefined, null, symbol, or bigint), you’re not actually changing the existing value. 👉 Instead, JavaScript silently creates a new value in memory and points your variable to it. 🎯 👉 It’s like getting a brand-new notebook instead of erasing the old one — the old still exists, but you’ve just started fresh. 📒 ✨ So, while it looks like you’re modifying the value, you’re actually reassigning a new memory reference every time. 🌠 As they say, “Appearances can be deceiving.” 😉 The value seems to change, but deep down, it never truly does! 💡 In short: We often know that strings are immutable, but here’s the twist — all primitive data types are immutable in JavaScript! 🔥 💬 Idiom: “Appearances can be deceiving.” — Things may not be as they seem; something that looks one way on the surface may actually be very different underneath. #JavaScript #CodingTips #Programming #TechInsights #LearnToCode #DeveloperLife #FrontendDevelopment #CodeWisdom #ProfessionalLearning #CareerGrowth #JS #WebDevelopment

Most of the time, when someone asks how the JS Engine executes code, we simply say: “JavaScript is interpreted line by line.” Then we start explaining Call Stack, Execution Context, and Memory Heap — and that’s true… But do you know what’s really happening behind the scenes? 👀 Modern JS engines like V8 (Chrome), SpiderMonkey (Firefox), Chakra (Edge), and JavaScriptCore (Safari) are doing insane hidden optimizations to make JS run almost as fast as compiled C++! ⚡ 🧩 1️⃣ Modern Function Execution Structure (Activation Record / Call Frame) 🚀 2️⃣ Hidden Optimizations You (Probably) Didn’t Know About: 🔥 Inline Caching (IC) 🧱 Hidden Classes ⚡ Function Inlining (Very Advanced) 🕶️ Lazy Parsing 💨 Escape Analysis 🔁 Deoptimization 🏗️ JIT Compilation Pipeline (V8) All happening while your app is running! 🚀 ⚡ In Short: JavaScript isn’t just “interpreted.” It’s interpreted + optimized + compiled + deoptimized — all dynamically, in milliseconds. Next time someone asks “How does the JS engine execute code?”, don’t stop at “Call Stack” and “Execution Context.” Say this 👇 “Modern JS engines like V8 use JIT compilation, inline caching, hidden classes, escape analysis, and deoptimization to execute JavaScript at near-native speed 💪.” #JavaScript #V8Engine #WebPerformance #Frontend #NodeJS #Coding #HappyCoding #WebDevelopment

🚀 Day 44 of #100DaysOfWebDevelopment Challenge Today, I continued exploring JavaScript Arrays and learned some advanced yet essential concepts that deepen the understanding of how arrays behave and interact in memory. 🔹 sort() Method I learned how the sort() method arranges elements in an array. By default, it sorts elements as strings (lexicographically), which can sometimes lead to unexpected results with numbers. To handle numeric sorting, we can pass a compare function to customize the sorting logic. 🔹 Array References Arrays in JavaScript are reference types, meaning when we assign one array to another variable, both variables point to the same memory location. So, changing one array affects the other — an important behavior to remember when manipulating data. 🔹 Constant Arrays Even if an array is declared using const, its elements can still be modified. The const keyword only prevents reassigning the variable reference — not changing the contents of the array itself. 🔹 Nested Arrays I also explored nested arrays, which are arrays within arrays. They’re useful for representing structured or tabular data, and elements can be accessed using multiple indices (e.g., arr[1][2]). 💡 Key Takeaway: Today’s topics gave me a deeper understanding of how arrays work behind the scenes — especially regarding memory references, sorting, and managing complex data structures like nested arrays. #100DaysOfCode #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #LearningInPublic

⚡ Mastering Node.js Streams for High Performance When working with large files or data sources, reading everything into memory is a performance killer. That’s where Node.js streams come in — they process data chunk by chunk, saving memory and speeding up execution. 💡 Types of Streams in Node.js: Readable: source of data (e.g., file, HTTP request) Writable: destination for data (e.g., file, response) Duplex: both readable and writable (e.g., TCP sockets) Transform: modifies data as it passes through (e.g., compression) Instead of loading the entire file into memory, this code streams it directly to the client — efficient, elegant, and scalable. #NodeJS #JavaScript #Backend #WebPerformance #Streaming #CodingTips #WebDevelopment

I didn’t learn a “framework” today. I learned 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁’𝘀 𝗳𝗼𝘂𝗻𝗱𝗮𝘁𝗶𝗼𝗻. 💡 And honestly → I wish I’d done this sooner. Because understanding the core building blocks changes how you see every JS framework out there. Here’s what clicked today 👇 𝟭. 𝗡𝘂𝗺𝗯𝗲𝗿𝘀, 𝗦𝘁𝗿𝗶𝗻𝗴𝘀, 𝗕𝗼𝗼𝗹𝗲𝗮𝗻𝘀, 𝗡𝘂𝗹𝗹, 𝗨𝗻𝗱𝗲𝗳𝗶𝗻𝗲𝗱 → the “5 core pillars” every JS variable rests on. (And no, null isn’t 0 → it’s an intentional emptiness) 𝟮. 𝗔𝗿𝗿𝗮𝘆𝘀 → not just lists, but objects in disguise! typeof [1,2,3] → object 🤯 𝟯. 𝗡𝗮𝗡 & 𝗜𝗻𝗳𝗶𝗻𝗶𝘁𝘆 → the “weird cousins” of JS. 23 * "vikrant" → NaN 1/0 → Infinity 𝟰. 𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝘃𝘀 𝗡𝗼𝗻-𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 → the real “aha!” moment. Primitives are copied by value, while objects are copied by reference. Meaning in Image That’s when I realized JS isn’t weird, it’s just consistent in its own logic. Every small concept like this builds the foundation that frameworks like React, Node, or Next sit on. And I’m documenting it one concept at a time. P.S. If you’re learning JavaScript too → don’t skip the basics. #frontend #webdevelopment #javascript #developer #cohort2 #learningjourney #datatypes