JavaScript Spread and Rest Operators Explained

🚀 Day 5 / 21 — Frontend Challenge Today I built: 👉 Form Validation 🧠 Flow I designed before coding: Form Construction: Built a UI with necessary input fields and a clear area for displaying error messages. Input Capture: Used JavaScript to grab values from all fields when the user clicks the submit button. Validation Check: Implemented logic to check for empty data and used Regex to ensure inputs (like email or password) follow the correct format. Error Handling: If the data is invalid, custom error messages appear and the form submission is prevented. Dynamic Feedback: Added logic to clear old errors and show/hide messages based on real-time input. Navigation Logic: After a successful signup, the user is redirected to the Login page. Once the login is successful, the user is redirected temporarily back to the Signup page late we add home ,about page etc. 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: User Input Validation: Real-time checking to ensure all data is accurate. Custom Error Messages: Specific feedback for the user instead of generic browser alerts. Submission Prevention: Stops the form from sending invalid data to ensure data integrity. 🚧 Challenges Faced: The most challenging part was perfecting the Regex (Regular Expressions) for different input types and ensuring that errors cleared properly when the user corrected their mistake. Coordinating the redirect logic between the Signup and Login states also required careful handling of the page flow to ensure it felt smooth and logical. 💡 Key Learning: Planning before coding makes development faster & cleaner. Form validation is the first line of defense for security and a great way to improve user experience. 🙏 Guidance by: Keyur Gohil 🏫 Learning at: Red & White Skill Education Official 📂 GitHub Repo: https://lnkd.in/drPddMas #21DaysJSWithKeyur #RedandWhite #Skill #JavaScript #FrontendDevelopment #BuildInPublic #WebDevelopment

🧠 JavaScript Array Methods — Complete Cheat Sheet While working with JavaScript daily, I realized one thing… 👉 Strong fundamentals = Faster development + Better code So I created a quick breakdown of the most useful array methods 👇 🔹 Creation Create arrays from different sources → Array.from(), Array.of(), Array.isArray() 🔹 Add / Remove Modify array elements → push(), pop(), shift(), unshift() 🔹 Modify Control structure of arrays → splice() (mutates) → slice() (non-mutating) 🔹 Searching Find values quickly → indexOf(), includes() 🔹 Find ( Important) → find(), findIndex() → findLast(), findLastIndex() 🔹 Transform / Loop → map() → transform data → filter() → select data → reduce() → build single result 🔹 Conditions → some() → at least one true → every() → all true 🔹 Sorting → sort() (mutates) → toSorted() (immutable) 🔹 Flatten / Combine → concat(), flat(), flatMap() 🔹 Modern ( Must Know) → toSpliced(), toReversed(), with() 👉 Immutable operations = cleaner code 🔹 Access → at() (supports negative index 👀) 💡 Key Learning: JavaScript arrays are not just lists — they are powerful tools to write clean, efficient, and scalable code. Understanding when to use: → map vs forEach → filter vs find → mutable vs immutable methods …can completely change your coding style 🚀 📌 Tip: Start using more immutable methods — they help avoid bugs in large applications. Which array method do you use the most? 🤔 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareDevelopment

Day 4/30 — JavaScript Journey JavaScript Loops + Functions Repeat smart. Automate everything. This is where coding actually begins. 🚀 Most beginners write code that works once. Developers write code that works forever. 🔁 LOOPS = Controlled Repetition Loops eliminate manual repetition and turn logic into scalable systems. Core types: for → precise control (start, stop, step) while → runs until condition fails for...of → clean iteration over arrays for...in → iterate object keys 👉 Think of loops as: “Run this logic N times without rewriting it.” for (let i = 0; i < 5; i++) {  console.log(i); } ⚡ Real power: Process arrays Automate tasks Handle large datasets Build dynamic UI logic ⚙️ FUNCTIONS = Reusable Intelligence Functions turn logic into portable, reusable units. 👉 Think of functions as: “Write once. Use everywhere.” function greet(name) {  return `Hello ${name}`; } Types that matter: Function Declaration Function Expression Arrow Functions (=>) → modern + concise const add = (a, b) => a + b; ⚡ Real power: Avoid repetition (DRY principle) Modular code (clean architecture) Easy debugging & testing 🔥 TOGETHER = AUTOMATION ENGINE Loops + Functions = scalable programming function printUsers(users) {  for (let user of users) {   console.log(user);  } } 👉 This is the shift: ❌ Hardcoding values ✅ Writing systems that handle any input 🧠 MINDSET SHIFT Loops = How many times? Functions = What should happen? Master this combo and you stop writing code… You start building logic machines. 💡 FINAL TRUTH If you understand loops + functions: You can automate 80% of programming problems. Everything else? Just combinations of these two.

🚀 50 Weeks, 50 Projects – Week 6 Complete To push my development skills beyond tutorials, I'm continuing my 50 Weeks, 50 Projects challenge, where I build and ship one project every week. 🛠 Week 6 – API Lens: AI-Powered JSON Explorer Ever stared at a raw API response and had no idea what half the fields meant? That's exactly why I built this. Tech Stack: HTML · CSS · Vanilla JS · OpenRouter API (Mistral-7B, free tier) Design Style: Warm, human-first UI — cream tones, serif typography (Fraunces), and a layout that feels more like a notebook than a dev tool. Built specifically to be approachable for beginners. Functionality: 📋 Paste raw JSON or fetch any public API URL directly 🤖 AI explains every field in plain English — no docs needed 🌳 Interactive collapsible field tree with color-coded types ⏱ Unix timestamps decoded to human-readable dates automatically 🛡 Auto-detects response type: JWT, paginated list, error, REST 📋 One-click copy for JS, Python & cURL code snippets ⚡ 3-layer CORS proxy fallback — works with almost any public API Suggestions: I'd love feedback from the community! What other API patterns should I detect? Any features that would make this more useful in your daily workflow? Live URL : https://lnkd.in/dBcejh34 #50WeeksChallenge #BuildInPublic #WebDev #JavaScript #API #OpenSource #100DaysOfCode

- Temporal API: Replace every date library with this. Immutable, timezone-aware, no zero-indexed months. - using / await using: Stop writing try/finally for resource cleanup. Add [Symbol.dispose] to your resource types. - Error.isError(): Use this instead of instanceof Error in catch blocks, especially in library code. - Array.fromAsync(): Collect async iterables into arrays in one line. - Import attributes: Explicitly type your JSON and CSS imports. - Math.sumPrecise(): Precise floating point summation for when it matters. None of these require rewriting your existing codebase. Start using them in new code, add the polyfills where you need them, and watch the category of bugs each one addresses stop appearing in your projects. https://lnkd.in/gxbwbYgk

JavaScript Data Operations : Leveling Up My Syllabus (and My Understanding) While refining the Data Operations in JavaScript module for my upcoming Frontend Engineering course, I had a fantastic "back-to-basics" moment. It reminded me that even as experienced developers, we never truly stop learning. We often teach the spread operator [...] as a standard way to copy data, but in a real-world e-commerce application, misusing it can lead to devastating bugs in state management (looking at you, React). Here is the professional breakdown I’ll be teaching my students regarding two modern essentials I re-solidified today. 1. Deep Copying: structuredClone() Type: Global Method (Function) Year of Widespread Release: 2022 The Problem: The spread operator [...products] only creates a shallow copy. While the array is new, any nested objects inside are still shared references. Modifying a copied product affects the original catalog. 😳 The Solution: structuredClone(). This is now the native, safe way to create a fully independent deep copy of complex, nested data structures without reaching for external libraries or the old JSON stringify hack. 2. Duplicate Removal: new Set() Type: Built-in Object (Constructor) Year of Release: 2015 (ES6) The Problem: Historically, we wrote verbose arr.filter() loops or used for loops with tracking variables just to get a unique list of product IDs. This is cluttered and slow on large datasets. The Solution: new Set(). By passing an array through the Set constructor—e.g., [...new Set(productIds)]—we get instant, O(1) duplicate removal in a single, clean line. Important Note: Remember that Set checks uniqueness by reference for objects, not value. Final Insight: As I tell my students: Our job isn't just to write code that works; it’s about choosing the precise tool that ensures data integrity and prevents future regressions. The curriculum is shaping up nicely. Still learning, still building. 🚀 #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips #TechEducation #CleanCode #ECommerce #100DaysOfCode

𝗪𝗵𝗮𝘁'𝘀 𝗗𝗧𝗢𝘀 𝗶𝗻 𝗡𝗲𝘀𝘁 𝗷𝘀 In NestJS, a 𝗗𝗧𝗢 (Data Transfer Object) is an object that defines how data is sent over the network. Think of it as a contract or a blueprint that specifies exactly what data a client (like a mobile app or a browser) must send to your server. While DTOs are a general software pattern, NestJS uses them powerfully to handle validation and type safety. 𝟭. 𝗪𝗵𝘆 𝗱𝗼 𝘄𝗲 𝘂𝘀𝗲 𝗗𝗧𝗢𝘀? Without a DTO, your application wouldn't know if the incoming data is correct. If a user tries to register but sends a "username" as a number instead of a string, your database might crash. DTOs help prevent this by: 𝗩𝗮𝗹𝗶𝗱𝗮𝘁𝗶𝗼𝗻: Ensuring the data has the right format, length, and type. 𝗗𝗮𝘁𝗮 𝗧𝗿𝗮𝗻𝘀𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Stripping away unwanted data that the client shouldn't be sending (e.g., trying to set their own isAdmin status). 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: Providing IntelliSense and auto-completion in your code so you know exactly what properties exist on the request body. 𝟮. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 𝘃𝘀. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 In NestJS, it is highly recommended to use Classes for DTOs rather than Interfaces. 𝗜𝗻𝘁𝗲𝗿𝗳𝗮𝗰𝗲𝘀 are removed during JavaScript compilation, meaning NestJS cannot check them at runtime. 𝗖𝗹𝗮𝘀𝘀𝗲𝘀 are preserved in the final code, allowing NestJS to use Pipe validation to check data as it arrives. #Programming #BackendDevelopment #TypeScript #NestJS

Latest JavaScript Updates You Should Know in 2026 JavaScript continues to evolve every year, becoming more powerful, cleaner, and developer-friendly. The latest ECMAScript updates focus less on “new syntax hype” and more on solving real-world problems developers face daily. Here are some of the most exciting recent updates: * Temporal API (Better Date Handling) Finally, a modern replacement for the confusing Date object—making time zones, parsing, and formatting much easier. (W3Schools) * Array by Copy Methods Methods like toSorted(), toReversed(), and toSpliced() allow immutable operations—perfect for React state management. (Progosling) * New Set Operations Built-in methods like union, intersection, and difference simplify complex data handling without extra libraries. (Progosling) * Iterator Helpers Functions like .map(), .filter(), .take() directly on iterators enable more efficient, lazy data processing. (Frontend Masters) * Explicit Resource Management Using using and await using helps manage resources automatically—cleaner and safer code. (W3Schools) * RegExp.escape() & Improved Error Handling Safer regex creation and better error detection improve reliability in production apps. (Progosling) * Array.fromAsync() & Async Improvements Handling asynchronous data collections is now simpler and more intuitive. (W3Schools) # The direction is clear: JavaScript is becoming more predictable, maintainable, and developer-centric, reducing the need for external utilities and boilerplate code.

🧠 Day 25 — JavaScript Destructuring (Advanced Use Cases) Destructuring isn’t just syntax sugar — it can make your code cleaner and more powerful 🚀 --- 🔍 What is Destructuring? 👉 Extract values from arrays/objects into variables --- ⚡ 1. Object Destructuring const user = { name: "John", age: 25 }; const { name, age } = user; --- ⚡ 2. Rename Variables const { name: userName } = user; console.log(userName); // John --- ⚡ 3. Default Values const { city = "Delhi" } = user; --- ⚡ 4. Nested Destructuring const user = { profile: { name: "John" } }; const { profile: { name } } = user; --- ⚡ 5. Array Destructuring const arr = [1, 2, 3]; const [a, b] = arr; --- ⚡ 6. Skip Values const [first, , third] = arr; --- 🚀 Why it matters ✔ Cleaner and shorter code ✔ Easier data extraction ✔ Widely used in React (props, hooks) --- 💡 One-line takeaway: 👉 “Destructuring lets you pull out exactly what you need, cleanly.” --- Master this, and your code readability improves instantly. #JavaScript #Destructuring #WebDevelopment #Frontend #100DaysOfCode 🚀

One PR to a parser unlocked prerendering in Brisa. When I started building Brisa, my JavaScript framework, I chose Meriyah as the AST parser. Fast, lightweight, pure JS, ESTree-compliant. Perfect for a build pipeline that parses every source file. Then I hit a wall. Brisa has a feature called renderOn="build" that prerenders components at compile time. Under the hood, it injects an import with `with { type: 'macro' }`; an import attribute from TC39's proposal. Meriyah didn't support that syntax. I had two options: work around it, or fix the parser. I opened a PR to Meriyah adding import attributes support. It landed. Brisa's entire prerender pipeline worked end to end. That experience reminded me of something: understanding ASTs isn't just for compiler engineers. If you write build tools, ESLint rules, codemods, or framework internals, you're already working with abstract syntax trees. The difference between "I've heard of ASTs" and "I can contribute to a parser" is mostly about seeing enough trees that the patterns become obvious. I wrote about the full journey; from struggling with TypeScript's compiler API in next-translate to contributing parser features for Brisa. I also built an AST Visualizer where you can compare Acorn, Meriyah, and SWC side by side, entirely in your browser. https://lnkd.in/ezn7Ke-B #JavaScript #OpenSource #WebDevelopment #AST #Parsing #Brisa #CompilerDesign