Unlock Top Level Await in JavaScript with Module Type

Welcome to the modern era of Vanilla JS: **`Object.groupBy()`**. ```javascript const inventory = [ { name: 'Apples', type: 'fruit' }, { name: 'Beef', type: 'meat' }, { name: 'Bananas', type: 'fruit' } ]; // ❌ The Old Way (Hard to read) const groupedOld = inventory.reduce((acc, item) => { (acc[item.type] = acc[item.type] || []).push(item); return acc; }, {}); // ✅ The Modern Native Way const groupedNew = Object.groupBy(inventory, item => item.type); /* Result: { fruit: [{name: 'Apples'...}, {name: 'Bananas'...}], meat: [{name: 'Beef'...}] } */ This is now a native JavaScript standard. It makes your data transformation logic declarative and instantly readable! #JavaScript #VanillaJS #WebDevelopment #CodingTips #SoftwareEngineering

🔑 JavaScript Set Methods – Quick Guide 1. Creation const letters = new Set(["a","b","c"]); // from array const letters = new Set(); // empty letters.add("a"); // add values 2. Core Methods MethodPurposeExampleReturns add(value)Add unique valueletters.add("d")Updated Set delete(value)Remove valueletters.delete("a")Boolean clear()Remove all valuesletters.clear()Empty Set has(value)Check existenceletters.has("b")true/false sizeCount elementsletters.sizeNumber 3. Iteration Methods MethodPurposeExample forEach(callback)Run function for each valueletters.forEach(v => console.log(v)) values()Iterator of valuesfor (const v of letters.values()) {} keys()Same as values() (compatibility with Maps)letters.keys() entries()Iterator of [value, value] pairsletters.entries() 4. Key Notes Unique values only → duplicates ignored. Insertion order preserved. typeof set → "object". set instanceof Set → true. 📝 Exercise Answer Which method checks if a Set contains a specified value? 👉 Correct answer: has() 🎯 Memory Hooks Set = Unique Collection Think: “No duplicates, only distinct members.” add to insert, has to check, delete to remove, clear to reset.

𝗧𝗵𝗲 𝗕𝗲𝗻𝗲𝗳𝗶𝘁𝘀 𝗢𝗳 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗟𝗶𝘁𝗲𝗿𝗮𝗹𝘀 𝗜𝗻 𝗝𝗮𝗵𝗮𝘀𝗰𝗿𝗶𝗽𝘁 You handle strings daily as a JavaScript developer. Traditional string concatenation can be messy and hard to read. Template literals make your code cleaner and easier to write. - They are more readable - They reduce errors - They make your code look natural You used to combine strings with +. Now you can use template literals with backticks. You can insert variables directly into your strings with ${}. For example: - Old way: "Total price is $" + price + " after discount." - New way: `Total price is $${price} after discount.` Template literals also make multi-line strings easier to work with. You can build URLs and run JavaScript expressions inside your strings. Use template literals when you need dynamic values in strings or cleaner code. They help you write cleaner code, more readable strings, and fewer bugs. Source: https://lnkd.in/gC7JV3Nf

Day 3 of My JavaScript Journey Today, I learned about JavaScript data types and how to define variables. JavaScript has two main types of data: Primitive data types: These include 7 types such as number, string, boolean, null, undefined, symbol, and bigint. Object: used to store more complex data. I also learned three ways to declare variables in JavaScript: • let • const • var One key thing I understood: "const" should be used by default, "let" when the value needs to change, and "var" is mostly outdated. Example: const name = "John"; let age = 20; Key takeaway: Understanding data types and variable declarations is fundamental to writing clean and predictable JavaScript code. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

💡 A small thing about Requests and Responses that finally clicked for me Recently I realized something simple but very useful when working with APIs. When we handle HTTP communication in JavaScript (for example with fetch or in API routes), there are two layers involved: 1️⃣ The Request / Response objects These contain the metadata of the HTTP communication, such as: --> method (GET, POST, etc.) --> headers --> status code --> URL --> body stream Example: const response = await fetch("/api/data") At this point, response only represents the HTTP response object, not the actual data yet. 2️⃣ The .json() method To access the actual data, we call: const data = await response.json() The .json() method does two important things: ✅ Reads the raw body stream from the request/response ✅Converts the JSON text into a JavaScript object using JSON.parse() So conceptually it looks like this: HTTP Response ↓ Read raw body ↓ JSON.parse() ↓ JavaScript Object ✅ The same idea applies to incoming requests in API handlers: const body = await request.json() request → contains HTTP info (headers, method, etc.) request.json() → extracts and parses the actual payload sent by the client 🧠 Key takeaway Think of it like this: Request / Response → the envelope .json() → opening the envelope and reading the message Sometimes the simplest concepts become the clearest once you understand what’s happening under the hood. Sharing in case this helps someone else learning APIs like it helped me. #WebDevelopment #JavaScript #APIs #LearningInPublic

#111DaysOfLearningForChange Day 5: Today I implemented infinite scrolling in vanilla js using IntersectionObserver Object(API). #111DaysOfLearningForChange #CodeCodeCode for Change #MERN #React #frontend 🍀 js snippet: let i = 1; const parent = document.querySelector('.parent'); const footer = document.querySelector('.footer'); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { footer.innerHTML = 'You saw meee'; } if (entry.intersectionRatio > 0.1) { entry.target.innerHTML += '<br>you saw 10% of me'; } if (entry.intersectionRatio > 0.5) { entry.target.innerHTML += '<br>you saw half of me'; } if (entry.intersectionRatio > 0.8) { entry.target.innerHTML = "<br>Keep going and <br>you won't see me"; } if (entry.intersectionRatio > 0.9) { entry.target.style.height = '20vh'; } if (entry.intersectionRatio == 1) { parent.innerHTML += `<div class="box">This is new Box - ${i++}</div>`; if (i > 25) { parent.innerHTML += `<div class="stop">Ok That's enough Scrolling</div>`; footer.remove(); } } }); }, { threshold: [0, 0.1, 0.5, 0.8, 0.9, 1], } ); observer.observe(document.querySelector('.footer'));

Hey LinkedIn Family 👋 A small JavaScript habit that improved how I handle arrays: 🚀 Use Array.filter(Boolean) to clean data quickly. Earlier, I used to write: const values = ["React", "", null, "JavaScript", undefined]; const clean = values.filter(item => item); Now I prefer: const values = ["React", "", null, "JavaScript", undefined]; const clean = values.filter(Boolean); Result 👇 ["React", "JavaScript"] Why this works well ✅ Cleaner and more expressive ✅ Removes falsy values (null, undefined, "", 0, false) ✅ Very useful for API responses and dynamic data Real-world usage 👇 const tags = [user?.skill1, user?.skill2, user?.skill3].filter(Boolean); ⚠️ Watch out This also removes 0 and false. If those are valid values in your data, this can introduce subtle bugs. Biggest Lesson: Good JavaScript is not just about shortcuts… It’s about knowing when to use them and when not to. What’s a small JS trick you use that saved you from a bug? 👇 #JavaScript #ReactJS #ReactNative #Programming #SoftwareEngineering #CodingTips #DeveloperLife

𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗟𝗶𝘁𝗲𝗿𝗮𝗹𝘀 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Stop using plus signs to join strings. It makes your code messy. Use template literals instead. Old JavaScript required plus signs for variables. Example: "Hi, I am " + name + "." This leads to errors. You forget spaces. It is hard to read. Multi-line strings need special characters. Use the backtick character instead of quotes. Put variables inside $\{\}. Example: Use backticks and write Hi, I am $\{name\}. The code looks like a normal sentence. Benefits: - Put math or functions inside $\{\}. - Write multi-line strings by pressing enter. - Create HTML templates easily. - Use single and double quotes inside the string without errors. Comparison: - Old: "Hello " + name - New: Use backticks and $\{name\} - Old: Needs \n for new lines. - New: Press enter. Use backticks now. Your code stays clean. Source: https://lnkd.in/gcRGugD3

🧠 JavaScript Data Types Explained If you're just starting with JavaScript, understanding data types is non-negotiable. They are the foundation of everything you'll build. There are two main types of data in JavaScript. 🔹 𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝗧𝘆𝗽𝗲𝘀: Basic data type that holds a single value and is stored directly in memory. ✅ 𝙎𝙩𝙧𝙞𝙣𝙜: Text, like "hello" or 'world'. ✅ 𝘽𝙤𝙤𝙡𝙚𝙖𝙣: Either true or false. ✅ 𝙉𝙪𝙢𝙗𝙚𝙧: Any number, like 42 or 3.14. ✅ 𝘽𝙞𝙜𝙄𝙣𝙩: For really, really big numbers beyond normal limits. ✅ 𝙪𝙣𝙙𝙚𝙛𝙞𝙣𝙚𝙙: A variable that hasn’t been given a value yet. ✅ 𝙣𝙪𝙡𝙡: An empty or intentional “nothing” value. ✅ 𝙎𝙮𝙢𝙗𝙤𝙡: A unique identifier (rarely used by beginners). 🔸 𝗡𝗼𝗻-𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝗧𝘆𝗽𝗲𝘀: Complex data type that can store multiple values and is stored by reference. ✅ 𝙊𝙗𝙟𝙚𝙘𝙩: A collection of key-value pairs. ✅ 𝘼𝙧𝙧𝙖𝙮: A list of values (a special kind of object). ✅ 𝙁𝙪𝙣𝙘𝙩𝙞𝙤𝙣: Reusable blocks of code (also an object under the hood). Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #javascript #js #webdevelopment #CheatSheet #WebDevelopment #DataTypes

🧠 JavaScript Data Types Explained If you're just starting with JavaScript, understanding data types is non-negotiable. They are the foundation of everything you'll build. There are two main types of data in JavaScript. 🔹 𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝗧𝘆𝗽𝗲𝘀: Basic data type that holds a single value and is stored directly in memory. ✅ 𝙎𝙩𝙧𝙞𝙣𝙜: Text, like "hello" or 'world'. ✅ 𝘽𝙤𝙤𝙡𝙚𝙖𝙣: Either true or false. ✅ 𝙉𝙪𝙢𝙗𝙚𝙧: Any number, like 42 or 3.14. ✅ 𝘽𝙞𝙜𝙄𝙣𝙩: For really, really big numbers beyond normal limits. ✅ 𝙪𝙣𝙙𝙚𝙛𝙞𝙣𝙚𝙙: A variable that hasn’t been given a value yet. ✅ 𝙣𝙪𝙡𝙡: An empty or intentional “nothing” value. ✅ 𝙎𝙮𝙢𝙗𝙤𝙡: A unique identifier (rarely used by beginners). 🔸 𝗡𝗼𝗻-𝗣𝗿𝗶𝗺𝗶𝘁𝗶𝘃𝗲 𝗧𝘆𝗽𝗲𝘀: Complex data type that can store multiple values and is stored by reference. ✅ 𝙊𝙗𝙟𝙚𝙘𝙩: A collection of key-value pairs. ✅ 𝘼𝙧𝙧𝙖𝙮: A list of values (a special kind of object). ✅ 𝙁𝙪𝙣𝙘𝙩𝙞𝙤𝙣: Reusable blocks of code (also an object under the hood). Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #javascript #js #webdevelopment #CheatSheet #WebDevelopment #DataTypes