DEV Community: Gaurav Aggarwal

JavaScript Closures Explained Simply (with Real Examples)

Gaurav Aggarwal — Wed, 09 Jul 2025 07:05:43 +0000

Ever wondered… How functions remember things… even after they've “forgotten” them.

🚀 Ever Seen JavaScript Do Magic?

Imagine if a function could remember everything it once knew — even after it’s long gone.
Sounds like wizardry? 🔮

Well, that’s not magic — that’s JavaScript Closures.

Closures are one of the most powerful, underestimated, and misunderstood features in JavaScript. Whether you’re building UI components, managing state, or writing reusable utilities — closures are quietly doing a lot of the heavy lifting.

📦 What is a Closure?

In JavaScript, a closure is created when a function “remembers” the variables from its lexical scope, even when that function is executed outside of that scope.

Example:

function outer() {
  let count = 0;

  function inner() {
    count++;
    console.log(`Count is ${count}`);
  }

  return inner;
}

const counter = outer(); // outer() runs, returns inner()
counter(); // Count is 1
counter(); // Count is 2

Even though outer() has finished executing, the count variable is still accessible to inner() because of closure.

🧠 Why Are Closures Important?

Closures enable:

Data encapsulation and privacy (like private variables)
Callbacks with preserved state
Partial application / currying
Creating factories or modules
Maintaining state without using global variables

🧪 Real-World Examples of Closures

✅ 1. Private Variables (Encapsulation)

function createBankAccount() {
  let balance = 1000;

  return {
    deposit: (amount) => {
      balance += amount;
      return balance;
    },
    withdraw: (amount) => {
      if (amount > balance) return "Insufficient funds";
      balance -= amount;
      return balance;
    },
    checkBalance: () => balance
  };
}

const account = createBankAccount();
console.log(account.deposit(500));    // 1500
console.log(account.withdraw(200));   // 1300
console.log(account.checkBalance());  // 1300
console.log(account.balance);         // undefined

Why it works: The balance variable is private, protected by a closure.

✅ 2. Function Factories (Like React Hooks or Custom Utilities)

function createGreeter(name) {
  return function (greeting) {
    console.log(`${greeting}, ${name}!`);
  };
}

const greetJohn = createGreeter("John");
greetJohn("Hello"); // Hello, John!
greetJohn("Good morning"); // Good morning, John!

This is essentially how React’s useState or useEffect hooks maintain internal values per component instance.

✅ 3. Currying / Partial Application

function multiply(x) {
  return function (y) {
    return x * y;
  };
}

const double = multiply(2);
console.log(double(5)); // 10

const triple = multiply(3);
console.log(triple(4)); // 12

Closures enable you to “store” the first parameter for future use.

✅ 4. Timers or Async Logic Holding State

function startCountdown(start) {
  let count = start;

  const intervalId = setInterval(() => {
    console.log(count);
    count--;

    if (count < 0) clearInterval(intervalId);
  }, 1000);
}

startCountdown(5);

The callback in setInterval closes over count, so it can update and access it every second.

✅ 5. Loop + Closure Bug Fix

// Common mistake
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3, 3, 3

// Fix using closure (or let)
for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 1000);
  })(i);
}
// Output: 0, 1, 2

Using a closure, we “capture” the value of i at each iteration.

🚧 Common Mistakes When Using Closures

Memory Leaks:
Keeping too many closures alive unnecessarily can retain memory.
Unexpected Shared State:
If you're using closures inside loops or factories, shared variables can behave unexpectedly.

🧩 Visualizing Closure

outer()
 └─ inner() ← retains access to `count` from outer scope
        ↑
   Closure keeps variables alive

🎯 Closure in One Line

"A closure is when a function remembers its lexical environment — even after that environment is gone."

✨ Conclusion: Closures Are Everywhere

From React Hooks to debounce functions, from callback logic to async APIs — closures are the glue holding it all together.

They may feel like black magic at first, but once you understand them, you’ll see them in everything — and write cleaner, more powerful code because of it.

✍️ Want to Try This Yourself?

Here are a few prompts for readers:

Build a once() function — it should only allow a callback to be called once.
Create a timer with start/pause/reset using closure.
Create a simple quiz app where questions retain their state using closures.

“Understanding closures doesn’t just make you a better JavaScript developer — it makes you a smarter problem solver.” 💡

🙌 Found This Helpful?

If you enjoyed this read:

Clap 👏 to support the post
Bookmark 📌 for future reference
Share it with a dev buddy who’s still afraid of closures 😄

Have questions or want a follow-up post on secure local storage using closures and encryption? Drop it in the comments below.

Happy Coding!!😊

Vite 7.0 Is Here: Rust-Powered Speed, Smarter Tooling & a Cleaner Build Experience

Gaurav Aggarwal — Thu, 26 Jun 2025 20:46:05 +0000

If you're a frontend developer who’s ever whispered “Why is my build taking forever?” — this one’s for you.

When Vite first hit the scene, it felt like cheating. Lightning-fast startup, instant hot reloads, and a dev experience so smooth it made Webpack look like a dinosaur. But now, Vite 7 has dropped — and it’s not just a version bump. It’s a full-on evolution.

Let’s crack open the new release and see what all the hype is about👇

🔧Rolldown: The Rust-Powered Engine Under the Hood

Remember when bundlers were synonymous with JavaScript? Not anymore.

Vite 7 introduces Rolldown, a new bundler written in Rust (yeah, the same language that powers parts of Firefox and ripgrep). While still experimental, it’s being positioned as the eventual replacement for Rollup — bringing in blazing speed, lower memory usage, and more consistent builds.

Why should you care?

Because devs like us love tools that just work. Rolldown is Vite's way of saying, “Let’s build for the future, not babysit the past.”

⚙️Middlewares, but Make It Fancy

Ever tried customizing the dev server and thought, "I wish I had more control here…”?

Well, Vite 7 grants your wish. It now allows pre-middleware configuration on both dev and preview servers (Introduces new hooks: configureServer and configurePreviewServer). Think of it as giving your tooling a pair of gloves and saying, “Go handle anything before the app even loads.”

It’s especially useful for custom setups, internal tools, or playing gatekeeper to APIs because it aligns with other modern frameworks, catering to scenarios like API gateways or development-time routing adjustments.

🧠Smarter Vite 7 Plugin System & API Improvements

You now get access to the current Vite version inside your plugin with this.meta.viteVersion. Why is this cool? Because if you build plugins (or just use many), you can now write safer, more compatible code that adapts to different versions.

Plus: Several legacy APIs have been removed, such as splitVendorChunkPlugin, and experimental flags like skipSsrTransform have been simplified—reflecting Vite’s maturing ecosystem. Vite is cleaning house. Think of it as your favorite IDE finally removing that buggy extension you never used.

🧹Farewell, Node 18

Vite 7 requires Node 20.19+ or 22.12+. If you’re still on Node 18, it’s time for a (long overdue) upgrade. Trust us — you’ll barely miss it.

🗺️Vite 7 Migration Guide: What to Expect

Vite has always taken care of its devs. This release is no different. A full migration guide is available, and most common plugins are already compatible (or well on their way).

The transition isn’t scary — it’s refreshing. Like finally cleaning out that one messy folder on your desktop.

💡Real Talk: Should You Upgrade?

Absolutely — and here’s why:

If you're someone who craves faster builds, Vite 7 is a clear win. With Rolldown (the new Rust-powered bundler) slowly being integrated, speed and efficiency are taking a major leap forward. It’s like upgrading from a bike to a race car.
If you're all about keeping your codebase clean and modern, you’ll appreciate that Vite 7 drops a lot of outdated, deprecated stuff. It’s tidier, leaner, and way easier to manage.
Need more control over how things work behind the scenes? The new middleware hooks give you more power to shape your dev server exactly the way you want it.

And let’s not forget the big one — future-proofing. Vite 7 moves away from older versions of Node.js and embraces newer standards, so your setup stays modern, stable, and ready for whatever’s next.

In short: if you’re using Vite, upgrading to Vite 7 will make your life easier, faster, and more flexible.

✨Final Thoughts

Vite 7 isn’t just a release — it’s a statement.

It says the future of frontend isn’t bloated configs and slow builds. It’s lean, fast, and written in Rust.

So go ahead — fire up your terminal, update your packages, and experience the next-gen dev workflow that Vite 7 promises.

P.S. Want the nitty-gritty? Read the official announcement.

If you found this post helpful, don’t forget to leave a like, bookmark it for later, and share it with your dev circle!
Got questions about Vite 7 or want a follow-up post on things like optimizing builds or creating lightning-fast dev setups?
Drop a comment below — I’d love to hear from you!

Happy Coding!!😊

Lock & Key: A Developer’s Guide to Encryption and Decryption in JavaScript

Gaurav Aggarwal — Sat, 21 Jun 2025 15:10:22 +0000

In a world where data is the new oil, encryption is the refinery.

Whether you're building a simple login form or a full-fledged fintech platform, data security is non-negotiable. With JavaScript being the language of the web, understanding how to encrypt and decrypt sensitive data on the client side (or even server side in Node.js) is essential for any developer.

🧠 Understanding the Basics

🔐 What is Encryption?
Encryption is the process of converting plain text into a coded format (cipher text) to prevent unauthorized access. Only someone with the decryption key can turn it back into readable text.

🧪 What is Decryption?
Decryption is the process of converting the cipher text back to plain text using a key or password.

🧰 Encryption Methods in JavaScript

1. 🧂 Base64 Encoding (Not Secure for Confidential Data)
This is not true encryption, but often mistaken as one. It is an encoding mechanism and can easily be reversed.

const data = "Hello World!";
const encoded = btoa(data); // Encrypt
const decoded = atob(encoded); // Decrypt

Use-case: Safely transmitting non-sensitive data in URLs or HTTP headers.

2. 🔐 AES (Advanced Encryption Standard) with CryptoJS
CryptoJS is one of the most popular JavaScript libraries for cryptography.

Installation:

npm install crypto-js

Encryption & Decryption Example:

const CryptoJS = require("crypto-js");

const secretKey = "my-secret-key";
const message = "Encrypt this message";

// Encrypt
const encrypted = CryptoJS.AES.encrypt(message, secretKey).toString();

// Decrypt
const bytes = CryptoJS.AES.decrypt(encrypted, secretKey);
const originalText = bytes.toString(CryptoJS.enc.Utf8);

console.log(originalText); // Encrypt this message

Use-case: Encrypting data stored in localStorage, cookies, or frontend apps.

3. 🔑 RSA Encryption (Public/Private Key Pair) with Node.js
RSA is commonly used for secure key exchange and digital signatures.
You can use the node-forge or crypto module (built-in in Node.js).

Example using node-forge:

npm install node-forge

const forge = require('node-forge');
const { publicKey, privateKey } = forge.pki.rsa.generateKeyPair(2048);

const message = "Hello RSA";

// Encrypt with public key
const encrypted = publicKey.encrypt(message, 'RSA-OAEP');

// Decrypt with private key
const decrypted = privateKey.decrypt(encrypted, 'RSA-OAEP');

console.log(decrypted); // Hello RSA

Use-case: Secure messaging, digital identity, verifying software integrity.

4. 🛡️ Web Crypto API (Browser-native)
Modern browsers come with a powerful, asynchronous Web Crypto API.

// Generate a key
const key = await crypto.subtle.generateKey(
  {
    name: "AES-GCM",
    length: 256
  },
  true,
  ["encrypt", "decrypt"]
);

// Convert text to Uint8Array
const encoder = new TextEncoder();
const data = encoder.encode("Secure message");

// Encrypt
const iv = crypto.getRandomValues(new Uint8Array(12));
const encrypted = await crypto.subtle.encrypt(
  {
    name: "AES-GCM",
    iv
  },
  key,
  data
);

// Decrypt
const decrypted = await crypto.subtle.decrypt(
  {
    name: "AES-GCM",
    iv
  },
  key,
  encrypted
);

const decoder = new TextDecoder();
console.log(decoder.decode(decrypted)); // Secure message

Use-case: Native browser apps, PWA security, file encryption.

5. 🪄 Custom Hashing (SHA256, MD5, etc.)
For password hashing, you don’t encrypt — you hash.

const CryptoJS = require("crypto-js");
const hashed = CryptoJS.SHA256("mypassword").toString();

console.log(hashed); // e.g., "f7c3bc1d808e04732adf679965ccc34ca7ae3441"

Use-case: Passwords, file integrity checks. Remember: Hashes can't be reversed, only verified.

🧨 Common Mistakes to Avoid:
❌ Storing keys in source code.
❌ Using Base64 for secure encryption.
❌ Not using IVs or salts with AES.
❌ Failing to handle errors in encryption/decryption.
❌ Using outdated libraries (always check for updates).

🧠 Final Thoughts:
JavaScript offers several powerful options for encryption and decryption — but with great power comes great responsibility. While client-side encryption is useful, never rely on it alone. Always complement it with secure backend validation, HTTPS, and server-side encryption for a complete security strategy.

🔏 Your app is only as secure as its weakest cryptographic link.

If you found this article helpful, don’t forget to clap, bookmark, and share. Have questions or want a follow-up post on storing encrypted data in databases or local Storage? Drop a comment below!

Happy Coding!!😊

React 19 is Here: Async Just Got Smarter, and Full-Stack is Now Front-End

Gaurav Aggarwal — Fri, 13 Jun 2025 06:32:16 +0000

React 19 isn’t just an update — it’s a transformation. With a sharper focus on asynchronous UI, server-first design, and zero-boilerplate developer experience, this version is a game-changer for modern React apps.

🔥 What's New in React 19?

1. 💥 Actions – Forms, Async, and Errors, All in One Place
React 19 introduces a brand new concept: Actions. They simplify async logic by directly integrating with forms and buttons — managing pending state, error handling, and optimistic updates for you.

const [error, submitAction, isPending] 
 = useActionState(async (prevState, formData) => {
  const name = formData.get("name");
  if (!name) return "Name is required!";
  await updateName(name); // simulate server update
  return null;
}, null);

🧠 Forms now support action={submitAction} directly. Say goodbye to onSubmit, useState, and loading states scattered everywhere.

2. ⚡ useOptimistic – Instant Feedback, Real Delight
Ever clicked a "Like" button and waited for the backend to respond? Not anymore. useOptimistic updates the UI instantly, then reconciles with the server response.

const [optimisticCount, addOptimisticCount] 
 = useOptimistic(count, (prev, next) => prev + next);

async function handleLike() {
  addOptimisticCount(1); // shows instantly
  await sendLikeToServer(); // actual call
}

🪄 Optimistic UI = perceived performance = happy users.

3. 🧵 The use() Hook – Suspense Is Now Supercharged
The new use() hook allows you to await promises directly in your components. React will “suspend” rendering until the data is available.

function Post() {
  const data = use(fetchPost());
  return <p>{data.title}</p>;
}

Ideal for Server Components (like in Next.js 14), it brings declarative data fetching to the heart of your render logic.

4. 🌐 Server Components & Server Actions – Fullstack, Simplified
Server Components are now stable and official. Paired with Server Actions, they let you run backend logic from the frontend — no API setup needed.

// actions.js
"use server";

export async function saveName(formData) {
  const name = formData.get("name");
  await db.insert({ name });
}

// page.jsx
<form action={saveName}>
  <input name="name" />
  <button type="submit">Save</button>
</form>

Frontend and backend blend into one — less code, fewer bugs, faster dev time.

5. 🧠 Metadata in JSX – Move Over HTML Head Tags
React 19 lets you define <title>, <meta>, <script>, and <link> tags directly in components. React will automatically lift them into the document head.

<>
  <title>React 19 Blog</title>
  <meta name="description" content="Learn all about React 19 features." />
</>

💡 Useful for SEO, per-page metadata, and asset control in apps like Next.js.

6. 🧷 refProp Without forwardRef
Function components can now accept the refprop without wrapping in forwardRef(). Just take it and use it.

function Input(props, ref) {
  return <input ref={ref} {...props} />;
}

No more boilerplate! Direct and simple.

🧾 Summary of React 19 Features

useActionState
Makes form handling easier by managing async actions, showing errors, and updating the UI when submitting.
useOptimistic
Instantly updates the UI while data is still being saved in the background—super smooth experience!
**use() Hook
Lets you use async data right inside your components—no need for extra logic or loaders.
Server Actions
Write backend code inside your React components. No API setup needed—perfect for full-stack apps.
Metadata in JSX
Add SEO tags and scripts directly inside components. It’s cleaner and more component-friendly.
Function ref Prop
Use refs in functional components without forwardRef. Simpler and cleaner code!

✅ Conclusion: React 19 is a Developer’s Dream

React 19 is one of those updates where the developer experience and user experience level up together.

You get:

Better async handling 🔁
Faster UIs ⚡
Cleaner code ✨
True full-stack React 🚀

If you're already using React, this is the version to explore deeply. And if you're just getting started — welcome to the future of front-end.

🧠 Want help upgrading or experimenting? Let me know in the comments.
🚀 Share this post if it helped you understand React 19 better!

Happy Coding!!😊