# JavaScript Modules: ES Modules & CommonJS Explained

> **Stop putting everything in one file.** Modules are how real JavaScript apps are built — and once you get them, your code will never look the same again.

* * *

## The Problem: Why Modules Exist

Imagine you're building a web app. You start with one file — `app.js`. It works great… until it doesn't.

A few weeks in, your single file looks like this:

```js
// app.js — 800 lines of chaos
function formatDate() { ... }
function calculateTax() { ... }
function fetchUser() { ... }
function renderCart() { ... }
function validateEmail() { ... }
// ... 50 more functions
```

**The problems start piling up:**

*   🔴 You scroll endlessly to find one function
    
*   🔴 Two functions accidentally share the same name — one overwrites the other
    
*   🔴 You can't reuse `formatDate()` in another project easily
    
*   🔴 Your teammate edits the same file and you get merge conflicts every hour
    
*   🔴 One bug in the file can break everything
    

This is exactly why **JavaScript modules** were introduced. Modules let you **split your code into separate files**, each with its own scope, and then **connect them using** `import` **and** `export`.

* * *

## What Is a JavaScript Module?

A **module** is simply a JavaScript file that explicitly:

*   **Exports** things it wants to share (functions, variables, classes)
    
*   **Imports** things it needs from other files
    

Every module has its own **private scope** — nothing leaks out unless you explicitly export it.

> 💡 JavaScript has **two module systems**: **ES Modules** (the modern standard, uses `import`/`export`) and **CommonJS** (the classic Node.js system, uses `require`/`module.exports`). This post covers both in depth.

* * *

## File Structure We'll Use

Throughout this post, here's the project structure we'll work with:

```plaintext
project/
│
├── utils/
│   ├── math.js        ← math helper functions
│   ├── string.js      ← string helper functions
│   └── constants.js   ← shared constants
│
├── api/
│   └── users.js       ← user-related API calls
│
└── main.js            ← entry point, imports everything
```

* * *

## Part 1: Named Exports

**Named exports** let you export multiple things from a single file. Each export has a specific name that must be used when importing.

### Exporting

```js
// utils/math.js

export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) throw new Error("Cannot divide by zero");
  return a / b;
}
```

You can also export things at the bottom of the file instead:

```js
// utils/string.js

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

function truncate(str, maxLength) {
  return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
}

function slugify(str) {
  return str.toLowerCase().replace(/\s+/g, "-");
}

// Export all at once at the bottom
export { capitalize, truncate, slugify };
```

### Importing Named Exports

```js
// main.js

import { add, multiply } from "./utils/math.js";
import { capitalize, slugify } from "./utils/string.js";

console.log(add(5, 3));           // 8
console.log(multiply(4, 6));      // 24
console.log(capitalize("hello")); // Hello
console.log(slugify("My Blog Post")); // my-blog-post
```

Notice the **curly braces** `{}` — they're required for named imports.

### Renaming During Import

If two modules export something with the same name, you can rename on import using `as`:

```js
import { add as addNumbers } from "./utils/math.js";
import { add as addStrings } from "./utils/string.js"; // hypothetical

console.log(addNumbers(2, 3)); // 5
```

### Import Everything with `* as`

You can import all named exports as a namespace object:

```js
import * as MathUtils from "./utils/math.js";

console.log(MathUtils.add(10, 5));      // 15
console.log(MathUtils.subtract(10, 5)); // 5
console.log(MathUtils.multiply(3, 4));  // 12
```

This is handy when a module has many exports and you want them grouped under one name.

* * *

## Part 2: Default Exports

Each module can have **one default export**. Default exports are typically used for the "main thing" a module does — like a class, a component, or a primary function.

### Exporting a Default

```js
// api/users.js

async function fetchUser(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data;
}

export default fetchUser;
```

Or inline:

```js
// api/posts.js

export default async function fetchPosts() {
  const response = await fetch("https://api.example.com/posts");
  return response.json();
}
```

### Importing a Default Export

```js
// main.js

import fetchUser from "./api/users.js";
import fetchPosts from "./api/posts.js";

// Note: NO curly braces for default imports!
const user = await fetchUser(42);
const posts = await fetchPosts();
```

Since there's only one default export per file, you can **name it anything you want** during import:

```js
import getUser from "./api/users.js";      // ✅ valid rename
import loadUser from "./api/users.js";     // ✅ also valid
import fetchUser from "./api/users.js";    // ✅ using original name
```

* * *

## Part 3: Default + Named Together

You can mix both in one file. This is very common in real projects.

```js
// utils/math.js

// Named exports
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { return a * b; }

// Default export — the "main" utility
export default function calculate(operation, a, b) {
  switch (operation) {
    case "add": return add(a, b);
    case "subtract": return subtract(a, b);
    case "multiply": return multiply(a, b);
    default: throw new Error("Unknown operation");
  }
}
```

Importing both at once:

```js
import calculate, { add, subtract } from "./utils/math.js";
//     ^^^^^^^^^ default    ^^^^^^^^^^^^^^ named

console.log(calculate("add", 10, 5));  // 15
console.log(add(10, 5));               // 15
console.log(subtract(10, 5));          // 5
```

* * *

## Part 4: Exporting Constants and Variables

Modules aren't just for functions — you can export any value.

```js
// utils/constants.js

export const API_BASE_URL = "https://api.example.com";
export const MAX_RETRIES = 3;
export const TIMEOUT_MS = 5000;

export const STATUS = {
  PENDING: "pending",
  SUCCESS: "success",
  ERROR: "error",
};

export const SUPPORTED_LANGUAGES = ["en", "hi", "fr", "de", "es"];
```

```js
// main.js
import { API_BASE_URL, MAX_RETRIES, STATUS, SUPPORTED_LANGUAGES } from "./utils/constants.js";

console.log(API_BASE_URL);        // https://api.example.com
console.log(STATUS.SUCCESS);      // success
console.log(SUPPORTED_LANGUAGES); // ["en", "hi", "fr", "de", "es"]
```

* * *

## Part 5: Exporting Classes

Classes are a perfect use case for default exports.

```js
// models/User.js

export default class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }

  greet() {
    return `Hi, I'm ${this.name}!`;
  }

  toJSON() {
    return { id: this.id, name: this.name, email: this.email };
  }
}
```

```js
// main.js
import User from "./models/User.js";

const user = new User(1, "Aarav", "aarav@example.com");
console.log(user.greet());    // Hi, I'm Aarav!
console.log(user.toJSON());   // { id: 1, name: "Aarav", email: "aarav@example.com" }
```

* * *

## Part 6: Re-exporting (Barrel Files)

As your project grows, you might have many small modules. **Barrel files** let you re-export everything from a single entry point so imports stay clean.

```plaintext
utils/
├── math.js
├── string.js
├── constants.js
└── index.js   ← the barrel file
```

```js
// utils/index.js — barrel file

export { add, subtract, multiply } from "./math.js";
export { capitalize, truncate, slugify } from "./string.js";
export { API_BASE_URL, MAX_RETRIES, STATUS } from "./constants.js";
```

Now instead of messy imports:

```js
// ❌ Without barrel file
import { add } from "./utils/math.js";
import { capitalize } from "./utils/string.js";
import { API_BASE_URL } from "./utils/constants.js";
```

You get clean, single-line imports:

```js
// ✅ With barrel file
import { add, capitalize, API_BASE_URL } from "./utils/index.js";
```

* * *

## Part 7: Dynamic Imports

Sometimes you don't want to load a module immediately — you want to load it **on demand**. That's what dynamic imports are for.

```js
// main.js

const button = document.querySelector("#load-chart");

button.addEventListener("click", async () => {
  // Module only loads when button is clicked!
  const { renderChart } = await import("./utils/chart.js");
  renderChart("#container", data);
});
```

Dynamic imports return a **Promise**, so you use `async/await` or `.then()`.

Another use case — loading locale files based on user preference:

```js
async function loadLocale(lang) {
  const module = await import(`./locales/${lang}.js`);
  return module.default; // translations object
}

const translations = await loadLocale("hi"); // loads ./locales/hi.js
```

> ⚡ Dynamic imports are great for **code splitting** — your app loads faster because it only fetches code when needed.

* * *

## Named vs Default: Quick Comparison

| Feature | Named Export | Default Export |
| --- | --- | --- |
| Syntax (export) | `export function foo() {}` | `export default function() {}` |
| Syntax (import) | `import { foo } from '...'` | `import foo from '...'` |
| Per file limit | Unlimited | Only **one** per file |
| Must match name? | ✅ Yes (or use `as`) | ❌ No — pick any name |
| Best for | Multiple utilities | The primary thing a module does |
| Tree-shakeable | ✅ Easier to tree-shake | ⚠️ Slightly harder |

* * *

## Real-World Example: Putting It All Together

Let's build a small user dashboard module system.

```js
// utils/format.js
export function formatDate(date) {
  return new Intl.DateTimeFormat("en-IN", {
    day: "numeric", month: "long", year: "numeric"
  }).format(new Date(date));
}

export function formatCurrency(amount, currency = "INR") {
  return new Intl.NumberFormat("en-IN", {
    style: "currency", currency
  }).format(amount);
}
```

```js
// api/dashboard.js
import { API_BASE_URL } from "../utils/constants.js";

export async function fetchStats(userId) {
  const res = await fetch(`${API_BASE_URL}/stats/${userId}`);
  return res.json();
}

export async function fetchRecentOrders(userId) {
  const res = await fetch(`${API_BASE_URL}/orders?userId=${userId}`);
  return res.json();
}
```

```js
// components/Dashboard.js
import { formatDate, formatCurrency } from "../utils/format.js";
import { fetchStats, fetchRecentOrders } from "../api/dashboard.js";

export default class Dashboard {
  constructor(userId) {
    this.userId = userId;
  }

  async render() {
    const [stats, orders] = await Promise.all([
      fetchStats(this.userId),
      fetchRecentOrders(this.userId),
    ]);

    console.log(`Total Revenue: ${formatCurrency(stats.revenue)}`);
    console.log(`Last Order: ${formatDate(orders[0].date)}`);
  }
}
```

```js
// main.js — entry point
import Dashboard from "./components/Dashboard.js";

const dashboard = new Dashboard(42);
dashboard.render();
```

Everything is clean, separated, and each file has **one clear job**. 🎯

* * *

## Module Scope: Variables Don't Leak

One of the best things about modules — variables stay **private by default**:

```js
// counter.js

let count = 0; // private — not exported, not accessible outside

export function increment() {
  count++;
}

export function getCount() {
  return count;
}
```

```js
// main.js
import { increment, getCount } from "./counter.js";

increment();
increment();
console.log(getCount()); // 2
console.log(count);      // ❌ ReferenceError: count is not defined
```

This is **encapsulation** — you control exactly what's public.

* * *

## Common Mistakes to Avoid

### ❌ Forgetting the file extension

```js
// ❌ This may fail in browsers
import { add } from "./utils/math";

// ✅ Always include the extension
import { add } from "./utils/math.js";
```

### ❌ Using curly braces for default imports

```js
// ❌ Wrong — fetchUser is a default export
import { fetchUser } from "./api/users.js";

// ✅ Correct
import fetchUser from "./api/users.js";
```

### ❌ Multiple default exports

```js
// ❌ SyntaxError — only one default per file
export default function foo() {}
export default function bar() {}

// ✅ Use named exports for multiple things
export function foo() {}
export function bar() {}
```

### ❌ Circular imports

```js
// a.js
import { b } from "./b.js";
export const a = b + 1;

// b.js
import { a } from "./a.js"; // ⚠️ circular — a depends on b, b depends on a
export const b = a + 1;
```

This can cause `undefined` values at runtime. Restructure to avoid circular dependencies.

* * *

## Benefits of Modular Code

✅ **Maintainability** — each file has one responsibility, easy to find and fix things

✅ **Reusability** — write `formatCurrency()` once, use it everywhere

✅ **Encapsulation** — internal implementation details stay private

✅ **Testability** — small, isolated modules are much easier to unit test

✅ **Collaboration** — your team can work on different modules without conflicts

✅ **Performance** — dynamic imports enable on-demand loading and code splitting

✅ **Readability** — imports at the top of a file tell you exactly what it depends on

* * *

## Summary

Here's the ES Modules cheat sheet — scroll up for the full CommonJS cheat sheet in the CommonJS section.

```js
// ─── NAMED EXPORTS ───────────────────────────────────────────
export function greet() {}           // inline named export
export const MAX = 100;

export { greet, MAX };               // export at bottom

// ─── DEFAULT EXPORT ──────────────────────────────────────────
export default function main() {}    // inline default

export default main;                 // export at bottom

// ─── NAMED IMPORTS ───────────────────────────────────────────
import { greet, MAX } from "./mod.js";
import { greet as sayHello } from "./mod.js";  // rename
import * as Mod from "./mod.js";               // namespace

// ─── DEFAULT IMPORT ──────────────────────────────────────────
import main from "./mod.js";        // any name works
import myFunc from "./mod.js";      // still valid

// ─── MIXED IMPORT ────────────────────────────────────────────
import main, { greet, MAX } from "./mod.js";

// ─── RE-EXPORT (barrel) ──────────────────────────────────────
export { greet } from "./mod.js";
export * from "./mod.js";

// ─── DYNAMIC IMPORT ──────────────────────────────────────────
const { greet } = await import("./mod.js");
```

* * *

## CommonJS Modules: `type="commonjs"` (Node.js Classic)

Before ES Modules became the standard, Node.js had its own module system called **CommonJS (CJS)**. You'll still encounter it constantly — in older codebases, many npm packages, config files, and Node.js scripts. Understanding it is essential.

> 📦 CommonJS is the **default** module type in Node.js. Every `.js` file is treated as CommonJS unless you explicitly switch to ES Modules.

* * *

### How to Enable CommonJS

CommonJS is Node.js's default — you don't need to do anything special. But to be explicit (and to understand the contrast with ES Modules), here's how the `type` field in `package.json` works:

```json
// package.json

{
  "name": "my-app",
  "type": "commonjs"   // ← default; all .js files are CommonJS
}
```

Compare with ES Modules:

```json
{
  "name": "my-app",
  "type": "module"     // ← all .js files become ES Modules
}
```

| `package.json "type"` | `.js` files treated as | To force the other system |
| --- | --- | --- |
| `"commonjs"` (default) | CommonJS | Use `.mjs` extension for ES Modules |
| `"module"` | ES Modules | Use `.cjs` extension for CommonJS |

* * *

### Exporting with `module.exports`

In CommonJS, you export using the `module.exports` object.

#### Exporting a single value (like a default export)

```js
// utils/math.js

function add(a, b) {
  return a + b;
}

module.exports = add;  // export one thing
```

#### Exporting multiple values (like named exports)

```js
// utils/math.js

function add(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }

module.exports = { add, subtract, multiply };
```

#### Using `exports` shorthand

`exports` is a shortcut reference to `module.exports`. You can attach properties directly to it:

```js
// utils/string.js

exports.capitalize = function(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
};

exports.slugify = function(str) {
  return str.toLowerCase().replace(/\s+/g, "-");
};

exports.truncate = function(str, maxLength) {
  return str.length > maxLength ? str.slice(0, maxLength) + "..." : str;
};
```

> ⚠️ **Never reassign** `exports` **directly.** This breaks the link to `module.exports`:
> 
> ```js
> // ❌ This does NOT work
> exports = { capitalize, slugify };
> 
> // ✅ This works
> module.exports = { capitalize, slugify };
> ```

* * *

### Importing with `require()`

In CommonJS, you import using the `require()` function.

```js
// main.js

const add = require("./utils/math.js");           // single export
const { subtract, multiply } = require("./utils/math.js"); // destructured

console.log(add(5, 3));       // 8
console.log(subtract(10, 4)); // 6
console.log(multiply(3, 4));  // 12
```

#### Importing from `exports` shorthand module

```js
const { capitalize, slugify } = require("./utils/string.js");

console.log(capitalize("hello")); // Hello
console.log(slugify("My Post"));  // my-post
```

#### Importing built-in Node.js modules

```js
const fs   = require("fs");
const path = require("path");
const http = require("http");
```

#### Importing npm packages

```js
const express = require("express");
const lodash  = require("lodash");
const axios   = require("axios");
```

* * *

### Exporting Classes in CommonJS

```js
// models/User.js

class User {
  constructor(id, name, email) {
    this.id    = id;
    this.name  = name;
    this.email = email;
  }

  greet() {
    return `Hi, I'm ${this.name}!`;
  }

  toJSON() {
    return { id: this.id, name: this.name, email: this.email };
  }
}

module.exports = User;
```

```js
// main.js

const User = require("./models/User.js");

const user = new User(1, "Aarav", "aarav@example.com");
console.log(user.greet());   // Hi, I'm Aarav!
```

* * *

### Exporting Constants in CommonJS

```js
// utils/constants.js

const API_BASE_URL = "https://api.example.com";
const MAX_RETRIES  = 3;
const TIMEOUT_MS   = 5000;

const STATUS = {
  PENDING: "pending",
  SUCCESS: "success",
  ERROR:   "error",
};

module.exports = { API_BASE_URL, MAX_RETRIES, TIMEOUT_MS, STATUS };
```

```js
// main.js

const { API_BASE_URL, STATUS } = require("./utils/constants.js");

console.log(API_BASE_URL);    // https://api.example.com
console.log(STATUS.SUCCESS);  // success
```

* * *

### Real-World CommonJS Example

Let's rewrite the dashboard example from earlier in CommonJS style:

```js
// utils/format.js

function formatDate(date) {
  return new Intl.DateTimeFormat("en-IN", {
    day: "numeric", month: "long", year: "numeric"
  }).format(new Date(date));
}

function formatCurrency(amount, currency = "INR") {
  return new Intl.NumberFormat("en-IN", {
    style: "currency", currency
  }).format(amount);
}

module.exports = { formatDate, formatCurrency };
```

```js
// api/dashboard.js

const { API_BASE_URL } = require("../utils/constants.js");

async function fetchStats(userId) {
  const res = await fetch(`${API_BASE_URL}/stats/${userId}`);
  return res.json();
}

async function fetchRecentOrders(userId) {
  const res = await fetch(`${API_BASE_URL}/orders?userId=${userId}`);
  return res.json();
}

module.exports = { fetchStats, fetchRecentOrders };
```

```js
// components/Dashboard.js

const { formatDate, formatCurrency }       = require("../utils/format.js");
const { fetchStats, fetchRecentOrders }    = require("../api/dashboard.js");

class Dashboard {
  constructor(userId) {
    this.userId = userId;
  }

  async render() {
    const [stats, orders] = await Promise.all([
      fetchStats(this.userId),
      fetchRecentOrders(this.userId),
    ]);

    console.log(`Total Revenue: ${formatCurrency(stats.revenue)}`);
    console.log(`Last Order: ${formatDate(orders[0].date)}`);
  }
}

module.exports = Dashboard;
```

```js
// main.js

const Dashboard = require("./components/Dashboard.js");

const dashboard = new Dashboard(42);
dashboard.render();
```

Same structure, different syntax — same clean separation of concerns. ✅

* * *

### CommonJS is Synchronous

One key thing to understand: `require()` **is synchronous**. Node.js reads and executes the file immediately and blocks until it's done.

```js
// This blocks until the file is fully loaded
const math = require("./utils/math.js");

// Only runs after require() is complete
console.log(math.add(2, 3));
```

This is fine for server-side startup code but is why CommonJS can't be used in browsers natively — browsers need asynchronous loading.

ES Modules (`import`) are **statically analyzed** and **asynchronous** by design, which is why they work in browsers.

* * *

### `require()` is Dynamic

Unlike ES Module `import` (which must be at the top of the file), `require()` can be called **anywhere** — inside functions, conditionals, loops:

```js
// Conditionally load a module
function getLogger(env) {
  if (env === "production") {
    return require("./loggers/productionLogger.js");
  } else {
    return require("./loggers/devLogger.js");
  }
}

// Load inside a function
function processFile(filePath) {
  const fs   = require("fs");
  const path = require("path");
  const ext  = path.extname(filePath);
  return fs.readFileSync(filePath, "utf-8");
}
```

> 💡 Node.js **caches** `require()` calls — the second time you `require()` the same file, it returns the cached export instantly without re-executing the file.

* * *

### ES Modules vs CommonJS: Full Comparison

| Feature | ES Modules (`import`/`export`) | CommonJS (`require`/`module.exports`) |
| --- | --- | --- |
| Syntax | `import` / `export` | `require()` / `module.exports` |
| Where it runs | Browser + Node.js | Node.js only (natively) |
| Loading | Asynchronous, static | Synchronous, dynamic |
| When imports are resolved | At parse time (before execution) | At runtime (when `require()` is called) |
| Can use conditionally? | ❌ No (must be top-level) | ✅ Yes (`require()` anywhere) |
| Default file extension | `.js` (with `"type":"module"`) or `.mjs` | `.js` (default) or `.cjs` |
| Tree shaking support | ✅ Yes | ❌ No |
| Named exports | `export function foo()` | `exports.foo = function()` |
| Default export | `export default foo` | `module.exports = foo` |
| Top-level `await` | ✅ Supported | ❌ Not supported |
| `__dirname` / `__filename` | ❌ Not available natively | ✅ Available |
| Status | Modern standard | Legacy (still widely used) |

* * *

### Getting `__dirname` in ES Modules

One thing developers miss when switching from CJS to ESM is `__dirname` and `__filename` — they're not available in ES Modules. Here's the fix:

```js
// CommonJS — works out of the box
console.log(__dirname);   // /home/user/project
console.log(__filename);  // /home/user/project/main.js

// ES Modules — need to reconstruct them
import { fileURLToPath } from "url";
import { dirname } from "path";

const __filename = fileURLToPath(import.meta.url);
const __dirname  = dirname(__filename);

console.log(__dirname);  // /home/user/project
```

* * *

### Mixing ES Modules and CommonJS

Sometimes you need to use both in the same project. Here are the rules:

#### ✅ ESM can import CommonJS

```js
// ES Module importing a CommonJS module
import lodash from "lodash";         // most npm packages are CJS — this works!
import { readFileSync } from "fs";   // Node built-ins support both
```

#### ⚠️ CommonJS cannot `require()` an ES Module

```js
// ❌ This will throw an error
const myESMModule = require("./esm-module.mjs");

// ✅ Use dynamic import() instead
async function load() {
  const myESMModule = await import("./esm-module.mjs");
}
```

#### Using `.cjs` and `.mjs` extensions to mix both

```plaintext
project/
├── package.json          ← "type": "module" (default is ESM)
├── main.js               ← ES Module (because of "type":"module")
├── legacy-helper.cjs     ← CommonJS (forced by .cjs extension)
└── new-feature.mjs       ← ES Module (forced by .mjs extension)
```

* * *

### CommonJS Cheat Sheet

```js
// ─── EXPORTING ─────────────────────────────────────────────────

// Single value (like a default export)
module.exports = myFunction;
module.exports = MyClass;

// Multiple values (like named exports)
module.exports = { foo, bar, baz };

// Attach individually (exports shorthand)
exports.foo = function() {};
exports.bar = 42;

// ─── IMPORTING ─────────────────────────────────────────────────

// Import a single export
const myFunction = require("./module.js");

// Destructure multiple exports
const { foo, bar } = require("./module.js");

// Rename on import
const { foo: myFoo } = require("./module.js");

// Import everything as an object
const utils = require("./utils.js");
utils.foo();
utils.bar();

// Import built-in modules
const fs   = require("fs");
const path = require("path");

// Import npm packages
const express = require("express");

// Conditional import
if (isDev) {
  const devTools = require("./devTools.js");
}

// Dynamic path
const plugin = require(`./plugins/${pluginName}.js`);
```

* * *

## What's Next?

Now that you understand both module systems, here are great next steps:

*   **Bundlers** (Vite, Webpack, esbuild) — how modules get bundled for production
    
*   **Tree shaking** — how bundlers remove unused exports to shrink bundle size
    
*   **Module patterns** in frameworks like React, Vue, and Svelte
    
*   **TypeScript modules** — how `import`/`export` works with types
    

Modules are the foundation everything else builds on. Master them, and the rest becomes a lot clearer. 🚀

* * *

*Found this helpful? Drop a reaction and share it with someone who's still putting everything in one file. 😄*