Mastering Template Literal Types in TypeScript for Predictable String Patterns

So you're trying to verify types in TypeScript - it's a thing. But here's the deal, JavaScript doesn't really care about types at runtime. TypeScript types are basically erased after compilation, leaving you with just JavaScript values. You can do runtime checks, though - like checking if something's a string with `typeof x === "string"`, or if it's a Date object with `x instanceof Date`. Or, you know, checking if an object has a certain property with `"swim" in animal`. And then there's the `animal.kind === "fish"` check - that's a good one too. TypeScript uses these checks to narrow down union types, which is pretty cool. For example, you can use `typeof` narrowing in a function like `padLeft` - it takes a padding value that can be either a number or a string, and an input string. Or, you can use `instanceof` narrowing in a function like `logValue` - it takes a value that can be either a Date object or a string. And then there's the `"in"` narrowing - that's useful when you have a type like `Fish` that has a `swim` method. You can also reuse a check across multiple places using type predicates - like the `isFish` function that checks if an animal is a fish. It's like, you can use it to filter an array of animals and get only the fish. If you can change the data shape, using a `kind` property is a good idea - like, you can have a `Fish` type with a `kind` property that's set to `"fish"`. It's just easier that way. So, to sum it up: use JavaScript checks to narrow types, and type predicates to reuse the narrowing - that's the way to do it. Check out this article for more info: https://lnkd.in/gFKxe3ZE #TypeScript #TypeVerification #JavaScript

Today I finally understood something that confused me for a long time in JavaScript 👇 “JavaScript uses prototypal inheritance.” At first, it sounded confusing. But once I focused on how property lookup actually works, things started to click. Here’s the key realization for me: ✅ JavaScript doesn’t copy properties ✅ It delegates property access through the prototype chain ✅ If a property isn’t found on an object, JS looks “somewhere else” — its prototype Understanding this made concepts like: ✔ __proto__ vs prototype ✔ constructor functions ✔ ES6 classes ✔ built-in methods feel much clearer. I wrote a short blog explaining prototypal inheritance from a learner’s perspective, with simple examples and diagrams 👇 🔗 https://lnkd.in/ghBSBg5R If you’re also learning JavaScript, this might help you too 🙂 Hitesh Choudhary Piyush Garg Chai Aur Code Akshay Saini 🚀 #javascript #learninginpublic #webdevelopment #frontend #programming

So, you're building something with JavaScript - and it's getting big. One file just isn't cutting it anymore. JavaScript module system to the rescue. It's like a librarian for your code, helping you keep things tidy and organized. You can break up your code into smaller, reusable files - and control what's visible, what's not. Only load what you need, when you need it. Modern JavaScript is all about ES Modules (ESM), by the way. They're the way to go. Here's the lowdown: - You can have named exports and imports, which is super useful. - Default exports and imports are a thing too. - And then there's aliasing - which helps you avoid naming conflicts, like when you're working with multiple modules that have the same variable names. - Namespace imports are another cool feature - you can import all values from a module as an object. - Combined imports are also possible - you can import both default and named exports at the same time. - And let's not forget dynamic imports - which load modules at runtime, like when you need to load a big library, but only when the user interacts with a certain part of your app. A JavaScript module is basically a file with its own scope - it's like a little box that can export variables, functions, or classes, and import values from other modules. To use modules in the browser, just add type="module" to your script tag. Easy peasy. You can export multiple values from one file, no problem. Just remember, when you import them, the names have to match. And you can only have one default export per module - but you can import it with any name you want, which is nice. Aliasing is also super helpful - it lets you rename imports to avoid conflicts. Dynamic imports are pretty cool too - they load modules at runtime, which is great for code splitting, lazy loading, and performance optimization. They always return a Promise, so you can use Promise.all to load multiple modules in parallel. So, what's the big deal about the JavaScript module system? It makes your code easier to maintain, more scalable, and better organized - which is a win-win-win. Check out this article for more info: https://lnkd.in/gBPF8NUr #JavaScript #ESModules #CodeOrganization

JavaScript Fundamentals - Part 3 Hoisting It is behavior of processing declarations before executing code. In simple terms: - JavaScript knows about variables and functions before running the code - This happens during the memory creation phase of an execution context So, hoisting is not moving code upward rather its preparing memory upfront. Why hoisting exists - its is side effect of how JS creates execution contexts. Before execution: - memory is allocated - identifiers are registered - scope is set up This allows: - function calls before their definition - predictable scope resolution Hoisting by Declaration Type var hoisting console.log(a); var a = 10; What happens: - a is hoisted - initialized with undefined - assigned 10 during execution So, console.log(a); // undefined Function Declaration Hoisting sayHi(); function sayHi(){ console.log("Hi"); } What happens: - entire function is hoisted - function can be called before declaration let and const Hoisting console.log(b); let b = 20; // ReferenceError: Cannot access 'b' before initialization What happens: - b is hoisted - but not initialized - exists in TDZ - Function Expressions sayHello(); var sayHello = function() { console.log("Hello"); }; What happens; - sayHello is hoisted as undefined - function body is not hoisted Result: TypeError: sayHello is not a function TDZ -it is the time between entering a scope and initializing let or const variable - variable exists - but cannot be accessed - prevents accidental usage before declaration TDZ is not special zone in memory, it is a state of a binding between hoisting and initialization { // TDZ starts console.log(a); //ReferenceErrror let a = 10; // TDZ ends } So, based on our above details, how can you describe Hoisting in one line ? Please follow for Part 4 updates. 👍 #javascriptfundamentals #uideveloper #corejs

What is Scope Chain in JavaScript? Understanding how JavaScript looks for variables helps everything make more sense. 🔹 Knowing why inner functions can access outer variables 🔹 Debugging undefined issues with confidence 🔹 Writing clean, predictable and bug-free JS code ❌ The code below can be confusing without understanding the Scope chain let x = 50; function outerFunction() {  function innerFunction() {   console.log(x); // Where does x come from?  }  innerFunction(); } outerFunction(); // output 50 ✅ The code below works because of the Scope Chain let x = 10; function outerFunction() {  let y = 20;  function innerFunction() {   console.log(x, y);  }  innerFunction(); } outerFunction(); // output 10 20 Scope chain follow some steps that are listed below. 1️⃣ First, it looks in the current scope 2️⃣ Then, it checks the outer (parent) scope 3️⃣ This continues up to the global scope 4️⃣ If the variable is not found, JavaScript throws a ReferenceError ✅ Key takeaway: Inner functions can access variables from their outer scopes because of the scope chain. #JavaScript #ScopeChain #JSConcepts #WebDevelopment #FrontendDevelopment #LearnJavaScript #SoftwareDevelopment #DeveloperTips

Most beginners don’t hate JavaScript… They hate callbacks 😐 Because once your app grows, your code starts looking like this 👇 Nested callbacks. Unreadable logic. Debugging nightmare. This problem even has a name 👉 Callback Hell 🔥 That’s exactly why JavaScript introduced PROMISES. Promises didn’t change async behavior. They changed how humans read async code. ✔️ No deep nesting ✔️ Clear execution flow ✔️ One place for error handling I explained this step-by-step with visuals and real code examples in 👉 JavaScript Confusion Series – Part 2 🔗 Read here: https://lnkd.in/gdxzCMEB If callbacks ever made you think “I understand JS… but something still feels off” 👉 this will finally make it CLICK 💡 💬 Comment “NEXT” if you want Part 3: Why async/await feels like magic 🔥 #JavaScript #WebDevelopment #FrontendDevelopment #LearnJavaScript #JavaScriptConfusionSeries #Programming #CodeNewbie

🧠 Thinking in Code: My JavaScript Problem-Solving Snapshot Today, I spent time focusing on how I think while coding, not just what I code. I chose a simple yet powerful JavaScript problem: 👉 Counting the number of vowels in a sentence Why this problem? Because it combines loops, condition checks, and clean logic, which are core fundamentals for any frontend or JavaScript developer. ✏️ Pseudo Code (Before Writing Any JS) Before touching the keyboard, I broke the logic down in plain English: Convert the sentence to lowercase Loop through each character Check if the character is a vowel Increase a counter when a vowel is found Writing this first made the actual coding much smoother. 💻 JavaScript Code function countVowels(str) { let count = 0; let vowels = "aeiou"; for (let i = 0; i < str.length; i++) { if (vowels.includes(str[i])) { count++; } } return count; } // Test cases console.log(countVowels("Hello World")); // 3 console.log(countVowels("JavaScript")); // 3 console.log(countVowels("AEIOU")); // ❌ Initially returned 0 🐞 What Went Wrong & How I Fixed It My function failed for uppercase vowels. Using console.log(), I quickly realized the comparison was case-sensitive. ✅ Fix applied: str = str.toLowerCase(); After adding this line, all test cases worked as expected. 💡 Key Takeaway (Aha Moment) This small exercise reminded me that: Good logic starts before writing code. Pseudo code + console.log() = faster debugging and clearer thinking. Even simple problems can teach big lessons about structure, clarity, and mindset. 📣 Let’s Learn Together How do you approach JavaScript problems? Do you write pseudo code first, or dive straight into coding? Would love to hear your process 👇 AlmaBetter #AlmaBetter #JavaScript #Debugging #ProblemSolving #FrontendBasics #CodeThinking #ISTJourney #LearningInPublic

Why for loop with setTimeout in JavaScript does not work the way we think Look at the simple code below: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } We can assume here that the output will be: 0, 1, 2 But the actual output is: 3, 3, 3 If the code is without setTimeout: for (var i = 0; i < 3; i++) { console.log(i); } The result is clear: 0, 1, 2 And the same result for the below as well: for (let i = 0; i < 3; i++) { console.log(i); } Output: 0, 1, 2 Confused!! Earlier, I bypassed the concept and simply used let instead of var whenever I used any asynchronous callback inside a for loop, so the code worked fine. But at the same time, I wanted the reason for the different behavior. Let me share what I explored after a long time going deeper into JavaScript and how it plays with variable types - var and let where loop is concerned. In case of let, JavaScript creates a variable instance in memory for each loop iteration. Each setTimeout looks for its corresponding instance: Iteration 0 → i0 (instance) → value: 0 → captured by setTimeout 1 Iteration 1 → i1 (instance) → value: 1 → captured by setTimeout 2 Iteration 2 → i2 (instance) → value: 2 → captured by setTimeout 3 But in case of var, there will be only a single instance, which is updated on each iteration. Since setTimeout takes 100 ms to execute, by that time the loop is finished, so the setTimeout always sees the final result. hashtag #javascript #webdevelopment #frontend #reactjs #nextjs #axios #fetchapi #JavaScriptTraps #FrontendDevelopment #AsyncJavaScript #Closures #JavaScriptTips #JavaScriptGotchas #CodingConcepts #programmingtips #developercommunity #codinglife #softwareengineering #webdev #learnjavascript #techcontent #100daysofcode

Today I learned about Functions in JavaScript! A Function is a reusable block of code designed to perform a specific task. It executes when it is "invoked" or called, helping developers follow the DRY (Don't Repeat Yourself) principle. There are four key types of functions in JavaScript: 1. Function Declaration These are hoisted, meaning they can be called before they are defined in the code. ex. console.log(greet("Vaseem")); function greet(name) { return `Hello, ${name}!`; } 2. Function Expression: A function assigned to a variable. Unlike declarations, these are not hoisted. ex. const add = function(a, b) { return a + b; }; 3. Arrow Functions (ES6+) A concise syntax introduced in modern JavaScript. They do not have their own this binding, making them ideal for callbacks. ex. const multiply = (x, y) => x * y; 4. Immediately Invoked Function Expression (IIFE) A function that runs as soon as it is defined. It is commonly used to create a private scope. ex. (function() { console.log("Programming started.."); })(); #JavaScript #WebDevelopment #Programming #CodingTips #SoftwareEngineering #Frontend #JSFunctions #TechLearning

New to JavaScript? Learn how comparison operators like ==, ===, >, and < really work through simple, hands-on examples. Understand your code’s decisions—read the full guide now!