Mastering Mapped Types in TypeScript for Efficient Code

🚀 JavaScript Practice: Working with Duplicate Values Today I practiced a small JavaScript logic exercise using arrays. The goal was simple: ✅ Identify duplicate values ✅ Count how many duplicates exist ✅ Store duplicated numbers separately This kind of basic problem-solving really helps strengthen core concepts like loops, conditions, and array methods. I’m learning that small daily practice matters more than solving complex problems once in a while. Consistency builds confidence. 💡 If you’re learning JavaScript too, try practicing simple logic problems every day — they slowly sharpen your thinking and coding skills 🚀 #JavaScript #WebDevelopment #Programming #Frontend #LearningInPublic #CodingJourney #DeveloperLife

JavaScript gives us multiple ways to write the same function — and that’s what makes it powerful ⚡ From Function Declarations to Function Expressions, Arrow Functions, and Concise Arrow Functions, each style has its own use case and readability benefits. If you’re learning JavaScript, understanding these 4 ways will help you: ✔ write cleaner code ✔ read modern frameworks like React easily ✔ choose the right syntax for the right situation Start simple, then go concise 🚀 #JavaScript #WebDevelopment #Frontend #CodingBasics #LearnJavaScript #DeveloperLife #Programming #ReactJS

Understanding JavaScript Functions Basics Made Simple 🚀 A function is a reusable block of code designed to perform a specific task. 🔹 Function keyword – starts the function definition 🔹 Function name – identifies the function 🔹 Parameters – act like placeholders for values 🔹 Function body – contains the logic 🔹 Return statement – sends the result back 🔹 Function call – executes the function with arguments In this example, the function takes two values, adds them, and returns the result when called. Mastering functions is a key step toward writing clean, reusable, and scalable JavaScript code 💡 #JavaScript #WebDevelopment #Frontend #Programming #Coding #LearnJavaScript #Developer #TechBasics #CodeNewbie

JavaScript Array Functions – slice() vs splice() ✂️ slice() and splice() look similar, but they behave very differently — and this confuses many JavaScript learners. In this post, I’ve explained: 1. slice() → extracts a portion of an array and returns a new array 2. splice() → modifies the original array by removing or adding elements Key difference: 1. slice() is safe (does not change original array) 2. splice() is powerful but risky (changes original array) 📌 Day 5 of my JavaScript Array Functions series. Save this if it helped 👍 #JavaScript #JS #WebDevelopment #FrontendDeveloper #BackendDeveloper #FullStackDeveloper #LearnJavaScript #Programming #Coding #DeveloperCommunity #TechContent #100DaysOfCode

JavaScript Array Functions – reduce() reduce() is one of the most powerful (and confusing) array methods in JavaScript. It takes all the elements in an array and reduces them into a single value using an accumulator. In this post, I’ve shown: 1. How the accumulator works step by step 2. Why the initial value is important 3. How reduce() combines values across the array Common use cases: 1. Calculating totals 2. Aggregating data 3. Counting or grouping values 📌 Day 4 of my JavaScript Array Functions series. Next up: slice() vs splice() 👨💻🔥 #JavaScript #JS #WebDevelopment #FrontendDeveloper #BackendDeveloper #FullStackDeveloper #LearnJavaScript #Programming #Coding #DeveloperCommunity #TechContent #100DaysOfCode

JavaScript – Day 15 🚀 Event Loop (Call Stack & Callback Queue) JavaScript is single-threaded, but it can still handle asynchronous operations using the Event Loop. In this post, I’ve explained: Call Stack Web APIs Callback Queue How async code actually runs Understanding the Event Loop is crucial for writing efficient and bug-free JavaScript. 📌 Day 15 of my JavaScript learning series. Next: Promises (then / catch / finally) 🔥 #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #FrontendDeveloper #BackendDeveloper #FullStackDeveloper #LearnJavaScript #Programming #Coding #DeveloperCommunity #TechContent #100DaysOfCode

Conditional Types are one of those TypeScript features that completely change how you think about the type system. At first glance, they look simple. Almost harmless. But once you understand them, you realize they turn TypeScript into a logic engine for types. So, what are they? In simple terms, a conditional type lets TypeScript choose one type or another based on a specific condition. It operates almost exactly like a ternary operator (condition ? true : false), but entirely at compile time. Think of it like this: 'If type A satisfies condition B, use type X. Otherwise, use type Y.' That’s it. That’s the core idea. Why is this powerful? Because types in real applications are rarely static. We often deal with inputs that can be multiple shapes, APIs that return different results based on parameters, utility types that should adapt to what you pass in, and libraries that need to infer behavior from usage. Without conditional types, we’d have to duplicate a lot of types or fall back to 'any.' With conditional types, types become expressive and adaptive. One important thing to understand is that conditional types operate on types, not values. They don’t check runtime data. They check relationships between types. This is what enables TypeScript to narrow types automatically, infer return types based on input types, and power many built-in utility types you already use. In fact, types like 'Exclude', 'Extract', 'ReturnType', 'Awaited', and many others are all built on top of conditional types. The key mindset shift is this - Conditional types let you encode logic into your type system. Once you start seeing types as something that can react to other types, a lot of advanced TypeScript suddenly makes sense. I'll soon be posting about things like 'infer', distributivity, and more, so stay tuned! #TypeScript #JavaScript #Coding #Programming #WebDevelopment

JavaScript String Methods You MUST Know Strings are everywhere in JavaScript from form inputs to APIs and UI logic. Mastering these 𝐛𝐮𝐢𝐥𝐭-𝐢𝐧 𝐬𝐭𝐫𝐢𝐧𝐠 𝐦𝐞𝐭𝐡𝐨𝐝𝐬 can make your code 𝐜𝐥𝐞𝐚𝐧𝐞𝐫, 𝐟𝐚𝐬𝐭𝐞𝐫 𝐚𝐧𝐝 𝐦𝐨𝐫𝐞 𝐫𝐞𝐚𝐝𝐚𝐛𝐥𝐞. Some commonly used ones 👇 🔹 toLowerCase() / toUpperCase() 🔹 length 🔹 charAt() & indexing [ ] 🔹 includes() 🔹 endsWith() 🔹 concat() 🔹 slice() 🔹 split() 💡 Pro Tip: Don’t try to memorize everything. Practice these methods while solving 𝐫𝐞𝐚𝐥 𝐩𝐫𝐨𝐛𝐥𝐞𝐦𝐬 that’s how they stick. If you’re learning JavaScript, 𝐬𝐚𝐯𝐞 𝐭𝐡𝐢𝐬 𝐩𝐨𝐬𝐭 🔖 Which string method do you use most often? 👇 #javascript hashtag #learnjavascript hashtag #webdevelopment #frontenddeveloper #coding #programming #jsbasics #developers #codingtips #softwaredeveloper #techlearning

Most developers use Mapped Types. Few realize they can use them to 'filter' keys on the fly. Imagine you have a type with 50 properties. You need a new type that only includes keys matching a specific pattern, like those containing the word 'Id'. Not keys you manually list. Not keys you hardcode. But keys that match a rule. This is where selective remapping in mapped types shines. We know we can use the 'as' keyword to rename keys. But the real 'pro move' is knowing what happens when you remap a key to 'never.' In TypeScript, if a key is remapped to 'never', it is removed from the resulting type entirely. And that's an important point to keep in mind because this is what we can use to do a selective remapping in mapped types. By iterating over every key and applying a conditional check: 1. If the key matches your rule - Keep it. 2. If it doesn’t - Remap to 'never.' This pattern is extremely useful in real-world scenarios where you need only specific prefixed keys or you’re building reusable utility types. When you're building utility types, API response handlers, or form schemas, you often need specific subsets of properties. This pattern lets you extract them programmatically instead of maintaining duplicate type definitions. Once you realize you can conditionally 'filter' keys during transformation, you stop fighting the type system and start making it work for you. #TypeScript #JavaScript #Programming #Coding #WebDevelopment

🚀 Hoisting & Closure Two concepts that explain why JavaScript behaves the way it does 👇 🔹 Hoisting JavaScript moves declarations to the top of their scope before execution. ✔ `var` → hoisted as `undefined` ❌ `let` / `const` → hoisted but inaccessible (TDZ) ✔ Function declarations are fully hoisted 🔹 Closure A closure allows a function to remember variables from its outer scope, even after that outer function has finished execution. 👉 Used in data hiding, callbacks, event handlers & React hooks. 💡 Master these = better debugging + better interviews 💬 Which one confused you more when learning JS? #JavaScript #JSConcepts #WebDevelopment #Frontend #Programming #Coding #InterviewPrep #React #100DaysOfCode