Async Testing in JavaScript: Done, Promises, and Async/Await

🧪 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 - 𝗦𝘁𝘂𝗯𝘀 𝘃𝘀 𝗦𝗽𝗶𝗲𝘀 𝘃𝘀 𝗠𝗼𝗰𝗸𝘀 When you start writing serious unit tests in JavaScript, you quickly realize that testing real dependencies (APIs, databases) makes your tests slow, flaky, and produces side effects. That’s where Stubs, Spies and Mocks come in. 🔍 𝗦𝗽𝗶𝗲𝘀 — “𝗢𝗯𝘀𝗲𝗿𝘃𝗲, 𝗱𝗼𝗻’𝘁 𝗶𝗻𝘁𝗲𝗿𝗳𝗲𝗿𝗲” A spy is used when you want to track how a function is called without changing its actual behavior. 𝗨𝘀𝗲 𝗖𝗮𝘀𝗲𝘀 ♦️ Was the function called? ♦️ How many times? ♦️ With what arguments? 👉 The original function still runs — you're just watching it. 🎭 𝗦𝘁𝘂𝗯𝘀 — “𝗖𝗼𝗻𝘁𝗿𝗼𝗹 𝘁𝗵𝗲 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝗿” A stub not only tracks calls but also replaces the actual implementation. 𝗨𝘀𝗲 𝗰𝗮𝘀𝗲𝘀 ♦️ Avoid calling real APIs ♦️ Return predefined values ♦️ Simulate function execution 👉 The real function is never executed. 🎯 𝗠𝗼𝗰𝗸𝘀 — “𝗘𝘅𝗽𝗲𝗰𝘁𝗮𝘁𝗶𝗼𝗻 + 𝗩𝗲𝗿𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻” A mock is like a strict version of a stub, you define expectations upfront and test fails if expectations are not met. 𝗨𝘀𝗲 𝗰𝗮𝘀𝗲𝘀 ♦️ When interaction itself is critical ♦️ You want strict contract testing Example -  const mock = sinon.mock(api); mock.expects("getUser")   .once()   .returns({ id: 1 }); api.getUser(); mock.verify(); 👉 If getUser() is not called → test fails. 🧠 𝗪𝗵𝗲𝗻 𝘁𝗼 𝗨𝘀𝗲 𝗪𝗵𝗮𝘁? 🔍 Use Spies → When you want visibility (logging, analytics, side effects) 🎭 Use Stubs → When you need control (API, DB, randomness) 🎯 Use Mocks → When behavior contract matters (critical flows) 🧰 𝗦𝗶𝗻𝗼𝗻.𝗷𝘀 𝗟𝗶𝗯𝗿𝗮𝗿𝘆 Sinon.js is a powerful standalone library for -  ♦️ Spies ♦️ Stubs ♦️ Mocks ♦️ Fake timers ♦️ Works with any test framework (Mocha, Jest, etc.) 👉 We’ll dive deeper into 𝗔𝘀𝘆𝗻𝗰 𝗖𝗼𝗱𝗲 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 in the upcoming posts. Stay tuned!! 🔔 Follow Nitin Kumar for daily valuable insights on LLD, HLD, Distributed Systems and AI. ♻️ Repost to help others in your network. #javascript #nodejs #testing #tdd #mocha #sinon

✅ JavaScript Advanced Concepts You Should Know 🔍💻 These concepts separate beginner JS from production-level code. Understanding them helps with async patterns, memory, and modular apps. 1️⃣ Closures A function that "closes over" variables from its outer scope, maintaining access even after the outer function returns. Useful for data privacy and state management. function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2 2️⃣ Promises & Async/Await Promises handle async operations; async/await makes them read like sync code. Essential for APIs, timers, and non-blocking I/O. // Promise chain fetch(url).then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err)); // Async/Await (cleaner) async function getData() { try { const res = await fetch(url); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } } 3️⃣ Hoisting Declarations (var, function) are moved to the top of their scope during compilation, but initializations stay put. let/const are block-hoisted but in a "temporal dead zone." console.log(x); // undefined (hoisted, but not initialized) var x = 5; console.log(y); // ReferenceError (temporal dead zone) let y = 10; 4️⃣ The Event Loop JS is single-threaded; the event loop processes the call stack, then microtasks (Promises), then macrotasks (setTimeout). Explains why async code doesn't block. 5️⃣ this Keyword Dynamic binding: refers to the object calling the method. Changes with call site, new, or explicit binding. const obj = { name: "Sam", greet() { console.log(`Hi, I'm ${this.name}`); }, }; obj.greet(); // "Hi, I'm Sam" // In arrow function, this is lexical const arrowGreet = () => console.log(this.name); // undefined in global 6️⃣ Spread & Rest Operators Spread (...) expands iterables; rest collects arguments into arrays. const nums = [1, 2, 3]; const more = [...nums, 4]; // [1, 2, 3, 4] function sum(...args) { return args.reduce((a, b) => a + b, 0); } sum(1, 2, 3); // 6 7️⃣ Destructuring Extract values from arrays/objects into variables. const person = { name: "John", age: 30 }; const { name, age } = person; // name = "John", age = 30 const arr = [1, 2, 3]; const [first, second] = arr; // first = 1, second = 2 8️⃣ Call, Apply, Bind Explicitly set 'this' context. Call/apply invoke immediately; bind returns a new function. function greet() { console.log(`Hi, I'm ${this.name}`); } greet.call({ name: "Tom" }); // "Hi, I'm Tom" const boundGreet = greet.bind({ name: "Alice" }); boundGreet(); // "Hi, I'm Alice" 9️⃣ 💡 Practice these in a Node.js REPL or browser console to see how they interact. 💬 Tap ❤️ if you're learning something new!

🚀 JavaScript Simplified Series — Day 28 Promises made async code better… But still… something feels messy 😵 👉 Too many .then() 👉 Hard to read 👉 Looks like chaining hell What if async code could look like normal synchronous code? 🤔 🔥 Solution → Async / Await 🔹 The Problem with Promises fetchData() .then(data => { console.log(data) return processData(data) }) .then(result => { console.log(result) }) .catch(err => console.log(err)) 👉 Works… but not clean ❌ 🔹 Async / Await (Cleaner Way) async function handleData() { try { let data = await fetchData() console.log(data) let result = await processData(data) console.log(result) } catch (err) { console.log(err) } } handleData() 👉 Looks simple & readable ✅ 🔍 What is happening? 👉 async → function always returns a promise 👉 await → waits for promise to resolve 🔹 Example function fetchData() { return new Promise(resolve => { setTimeout(() => { resolve("Data received") }, 2000) }) } async function getData() { let data = await fetchData() console.log(data) } getData() 👉 Output: Data received 🔥 Real Life Example Think of cooking 🍳 👉 Order ingredients 👉 Wait for delivery 👉 Then cook With async/await: Step by step… clean and clear 🔥 Simple Summary async → makes function async await → waits for result Result → clean & readable code 💡 Programming Rule Write async code like sync code. Clarity > complexity. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

Understanding Promises in JavaScript (Made Simple) If you’ve ever struggled with messy callbacks, this is for you - The Problem: Handling asynchronous operations (API calls, timers, etc.) using callbacks often leads to: • Callback hell • Hard-to-read code • Difficult error handling The Solution: Promises A Promise represents the future result of an async operation. It has 3 states: • Pending • Fulfilled • Rejected  Basic Example: const fetchData = new Promise((resolve, reject) => {   let success = true;   if (success) {     resolve("Data fetched");   } else {     reject("Error fetching data");   } }); fetchData   .then(res => console.log(res))   .catch(err => console.log(err)); Why Promises Matter: • Cleaner than callbacks • Better error handling • Easy chaining • Foundation for async/await Pro Tip: If you’re using async/await, you’re already using Promises under the hood! async function getData() {   try {     const res = await fetchData;     console.log(res);   } catch (err) {     console.log(err);   } } Bonus 1: Promise.all() (Must Know) Promise.all([p1, p2, p3])   .then(results => console.log(results))   .catch(err => console.log(err)); Runs all in parallel, fails fast if any fails. Bonus 2: Promise.allSettled() (Underrated) Promise.allSettled([p1, p2, p3])   .then(results => console.log(results)); Returns all results (success + failure) Bonus 3: Promise.race() (Speed Matters) Returns the first settled promise (either success OR failure). const p1 = new Promise(res => setTimeout(() => res("API 1"), 2000)); const p2 = new Promise((_, rej) => setTimeout(() => rej("API 2 failed"), 1000)); Promise.race([p1, p2])   .then(res => console.log(res))   .catch(err => console.log(err)); // "API 2 failed" Key Point: • Fastest result wins • Can return success OR failure • Useful for timeouts Bonus 4: Promise.any() (First Success Wins) Returns the first fulfilled promise and ignores failures. const p1 = Promise.reject("API 1 failed"); const p2 = new Promise(res => setTimeout(() => res("API 2 success"), 1500)); const p3 = new Promise(res => setTimeout(() => res("API 3 success"), 2000)); Promise.any([p1, p2, p3])   .then(res => console.log(res)) // "API 2 success"   .catch(err => console.log(err)); Key Point: • Ignores rejected promises • Fails only if ALL promises fail • Best for fallback APIs Real-world usage: • Race → API timeout handling • Any → fallback API strategy • All → parallel API calls • AllSettled → partial results handling Which Promise method do you use the most in real projects? #JavaScript #WebDevelopment #FrontendDeveloper #AsyncProgramming #CodingTips #ReactJS #Angular #SoftwareDevelopment

🚀 Day 22/100 – Implementing Deep Clone Function in JavaScript Today I explored how to create a deep clone function in JavaScript. Unlike shallow copy, a deep clone creates a completely independent copy of an object, including all nested objects and arrays. 🧠 Problem: Create a custom implementation of a deep clone function. ✅ Solution: function deepClone(value, weakMap = new WeakMap()) { // Handle primitives and functions if (value === null || typeof value !== "object") { return value; } // Handle circular references if (weakMap.has(value)) { return weakMap.get(value); } // Handle Date if (value instanceof Date) { return new Date(value); } // Handle RegExp if (value instanceof RegExp) { return new RegExp(value); } // Handle Array or Object const clone = Array.isArray(value) ? [] : {}; weakMap.set(value, clone); for (let key in value) { if (value.hasOwnProperty(key)) { clone[key] = deepClone(value[key], weakMap); } } return clone; } // Example const obj = { name: "Ben", address: { city: "Ghaziabad", }, }; obj.self = obj; // circular reference const cloned = deepClone(obj); console.log(cloned); console.log(cloned !== obj); // true console.log(cloned.address !== obj.address); // true ✅ Output: Deep copied object without shared references 💡 Key Learnings: • Deep clone copies nested structures completely • Handles circular references using WeakMap • Works with arrays, objects, Date, and RegExp • Prevents accidental mutation of original data 📌 Real World Usage: • State management (React / Redux) • Avoiding mutation bugs • Caching and data snapshots • Complex form handling Understanding deep cloning helps in writing predictable and bug-free applications 🔥 I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, I’d love to connect 🤝 #OpenToWork #FrontendDeveloper #JavaScript #DeepClone #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode

⚡ 𝗦𝗮𝗺𝗲 `...` 𝗦𝘆𝗻𝘁𝗮𝘅, 𝗧𝗼𝘁𝗮𝗹𝗹𝘆 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝘁 𝗕𝗲𝗵𝗮𝘃𝗶𝗼𝗿 ⤵️  Spread vs Rest Operators in JavaScript 🧠  🔗 𝗥𝗲𝗮𝗱 𝗵𝗲𝗿𝗲: https://lnkd.in/drV-7dZa  𝗧𝗼𝗽𝗶𝗰𝘀 𝗰𝗼𝘃𝗲𝗿𝗲𝗱 ✍🏻:   ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺   ⇢ Spread vs Rest — simple mental model   ⇢ Expanding arrays & objects using spread   ⇢ Collecting values using rest parameters   ⇢ Key differences based on context   ⇢ Real-world use cases (merge, clone, functions)   ⇢ Common mistakes developers make   ⇢ Tradeoffs: shallow copy & performance  Thanks Hitesh Choudhary Sir & Piyush Garg Sir, and the amazing Chai Aur Code community 🙌  #ChaiAurCode #JavaScript #WebDevelopment #Programming #Frontend #CleanCode #Hashnode

JavaScript is evolving quietly… and it’s actually getting better. While most of us are busy debating frameworks and AI tools, JavaScript itself has been shipping some seriously practical features lately. Here are a few that stood out to me: ✨ Iterator helpers (lazy evaluation) Chain operations like .map() and .filter() directly on iterators without creating intermediate arrays → better performance and memory usage ✨ Built-in Set operations Union, intersection, difference — things we used to write utility functions for are now native ✨ groupBy() (finally! 🙌) Grouping data is now much cleaner and more readable without custom reduce logic: Object.groupBy(users, user => user.role) ✨ Temporal API (fixing dates for real this time) A more reliable and predictable replacement for the current Date API 💡 My takeaway: We often look for new tools to improve productivity, but sometimes the language itself evolves to remove years of boilerplate. Curious — Which JavaScript feature have you started using recently that made your life easier? More info in this blog: https://lnkd.in/gFi8VyES #JavaScript #SoftwareEngineering #Frontend

Debugging inconsistent runtime behavior steals time from feature delivery. ────────────────────────────── JSON.parse and JSON.stringify Guide with Examples In this comprehensive guide, you will learn how to effectively use JSON.parse and JSON.stringify in JavaScript. With clear examples and practical scenarios, you'll grasp these essential methods for handling JSON data. hashtag#javascript hashtag#json hashtag#webdevelopment hashtag#programming hashtag#beginner ────────────────────────────── Core Concept JSON.parse and JSON.stringify are built-in JavaScript methods that help in working with JSON (JavaScript Object Notation). JSON is a lightweight data format that is easy for humans to read and write, and easy for machines to parse and generate. The JSON.stringify method was introduced in the early days of JavaScript, around 2009, as part of the ECMAScript 5 standard. This method is crucial for converting JavaScript objects into a JSON string representation. It enables developers to send data to web servers in a format that is universally accepted. On the flip side, JSON.parse is equally important as it helps convert JSON strings back into JavaScript objects. Both methods are essential for data interchange between a client and server, especially in web applications. Key Rules • Always validate JSON: Before parsing, ensure the JSON string is well-formed to avoid errors. • Use try-catch: Wrap JSON.parse in a try-catch block to gracefully handle potential errors. • Limit string size: Be mindful of large JSON strings to avoid performance issues. 💡 Try This // Sample object const obj = { name: 'Alice', age: 30 }; // Convert object to JSON string ❓ Quick Quiz Q: Is JSON.parse and JSON.stringify different from XML? A: JSON is often compared to XML. While both formats are used for data interchange, JSON is lighter and easier to read, making it a preferred choice in modern web development. JSON's syntax is straightforward, requiring less markup compared to XML, which has a more verbose structure. 🔑 Key Takeaway In this guide, we explored JSON.parse and JSON.stringify, two essential methods for working with JSON data in JavaScript. You learned how to convert objects to JSON strings and parse strings back to objects, along with best practices and common pitfalls. These methods are vital for web development, especially when dealing with APIs and client-server communication. As you continue your learning journey, try applying these concepts in real-world applications to solidify your understanding. ────────────────────────────── 🔗 Read the full guide with code examples & step-by-step instructions: https://lnkd.in/gEKnqsEp

Day 1/100 of Javascript Today Topic : Javascript Engine JS code is first tokenized and parsed into an AST (Abstract Syntax Tree). The interpreter converts this into bytecode and begins execution. While running, the engine identifies hot code and uses a JIT compiler to optimize it into machine code for better performance. 1. What is Tokenizing? Tokenizing = breaking your code into small meaningful pieces (tokens) After tokenizing: Code Part Token Type let keyword x identifier = operator 10 literal ; punctuation 2. What Happens After Tokenizing? Tokens → Parsing Parser converts tokens into: 👉 AST (Abstract Syntax Tree) Example (conceptually): VariableDeclaration ├── Identifier: x └── Literal: 10 3. Why JavaScript is JIT Compiled? JS is called JIT (Just-In-Time) compiled because: 👉 It compiles code during execution, not before. ⚙️ Flow Code → Tokens → AST → Bytecode → Execution → Optimization → Machine Code 🔥 Step-by-Step 1. Interpreter Phase AST → Bytecode Starts execution immediately 👉 Fast start, but not the fastest execution 2. Profiling Engine watches: Which code runs frequently (hot code) 3. JIT Compilation Hot code → compiled into optimized machine code 👉 Now it runs much faster Also looked at different JavaScript engines: 👉V8 (Google) → Uses Ignition (interpreter) + TurboFan (optimizer), heavily optimized for performance 👉SpiderMonkey (Mozilla) → Uses Interpreter + Baseline + IonMonkey (JIT tiers) 👉Chakra (Microsoft) → Has its own JIT pipeline with profiling and optimization stages Each engine has a different internal architecture, but all follow the same core idea. Reference : 1. https://lnkd.in/gvCjZRJK 2. https://lnkd.in/gwcWp-dE 3. https://lnkd.in/gWGiNJZk. 4. https://lnkd.in/g7D4MiQ8 #Day1 #JavaScript #100DaysOfCode

𝗕𝗲𝘀𝘁 𝗝𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀 𝗶𝗻 𝟮𝟬𝟮𝟲 Starting with JavaScript is just the first step. Frameworks feel complicated next. This guide cuts through the noise. It shows you which tools to learn first in 2026 and why. Frameworks handle repetitive code. They let you build features faster. Over 70% of developers use one daily. Picking the right one saves you months of frustration. Look for these traits as a beginner: - Easy first project setup - Clear documentation - Helpful community - Good performance - Path to a job Here are the top choices. **React** Backed by Meta. Component-based, like Lego for UI. Huge job market. Setup: `npx create-react-app` or use Vite. Simple counter example: ```javascript import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } ``` Pros: Massive ecosystem, many jobs. Cons: Needs extra tools for routing, hooks have a learning curve. Netflix uses React. Server tweaks cut their load times by 30%. **Vue** Progressive and flexible. Easy to add to any project. Great docs. Setup: `npm init vue@latest`. Todo list example: ```vue <script setup> import { ref } from "vue"; const items = ref([]); const newItem = ref(""); function addItem() { if (newItem.value) { items.value.push(newItem.value); newItem.value = ""; } } </script> <template> <input v-model="newItem" @keyup.enter="addItem" placeholder="Add todo" /> <ul> <li v-for="item in items" :key="item">{{ item }}</li> </ul> </template> ``` Pros: Lightweight, reactive system. Cons: Smaller ecosystem than React. Alibaba uses Vue. It sped up their development by 50%. **Svelte** Compiles to tiny, fast vanilla JS. Minimal code. Feels natural. Setup: `npm create svelte@latest`. Reactive example: ```html <script> let name = 'world'; $: greeting = `Hello ${name}!`; </script> <input bind:value={name} /> <p>{greeting}</p> ``` Pros: Blazing speed, no virtual DOM. Cons: Smaller library selection. The New York Times uses Svelte. Slashed load times by 40%. **Next.js** React with built-in server features. Great for full apps. Setup: `npx create-next-app@latest`. Server component example: ```javascript async function Home() { const data = await fetch("https://api.example.com").then(res => res.json()); return <div>{data.message}</div>; } ``` Pros: Easy deploying, fast builds. Cons: Must learn React first. TikTok uses it for enterprise scale. **Angular** Full framework from Google. TypeScript-based. Highly structured. Setup: `ng new my-app`. Component with signal: ```typescript import { Component, signal } from "@angular/core"; @Component({ selector: "app-greeting", template: `<h1>Hello {{ message() }}!</h1>`, }) export class Gr