Made in Builder.io

Announcing Visual Copilot - Figma to live in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Web Development

Node.js module.exports vs. exports: The Right Choice

February 28, 2023

Written By Vishwas Gopinath

If you've worked with Node.js, you're probably familiar with module.exports and exports keywords used to export code from one module to another. While they may seem interchangeable at first glance, there's a good reason to use one over the other.

Import export patterns

Let's start by going over a few CommonJS import export patterns in Node.js.

// math.js
const add = (a, b) => {
  return a + b;
};

const subtract = (a, b) => {
  return a - b;
};

module.exports.add = add;
module.exports.subtract = subtract;

//index.js
const math = require("./math");

console.log(math.add(2, 3)); // 5
console.log(math.subtract(2, 3)); // -1

In the first pattern, functions are attached to properties on the module.exports object. We can see the correct values logged in index.js.

// math.js
const add = (a, b) => {
  return a + b;
};

const subtract = (a, b) => {
  return a - b;
};

exports.add = add;
exports.subtract = subtract;

//index.js
const math = require("./math");

console.log(math.add(2, 3)); // 5
console.log(math.subtract(2, 3)); // -1

In the second pattern, you attach functions to properties on the exports object. The correct values are still logged in index.js.

Now, this raises the question: why use module.exports when exports seems to achieve the same result with fewer keystrokes? To answer that, let's take a look at the following two patterns.

// math.js
const add = (a, b) => {
  return a + b;
};

const subtract = (a, b) => {
  return a - b;
};

module.exports = {
  add,
  subtract,
};

//index.js
const math = require("./math");

console.log(math.add(2, 3)); // 5
console.log(math.subtract(2, 3)); // -1

In the third pattern, a new object is assigned to module.exports. The correct values are then logged in index.js.

// math.js
const add = (a, b) => {
  return a + b;
};

const subtract = (a, b) => {
  return a - b;
};

exports = {
  add,
  subtract,
};

//index.js
const math = require("./math");

console.log(math.add(2, 3)); // TypeError: math.add is not a function
console.log(math.subtract(2, 3)); // TypeError: math.subtract is not a function
console.log(math); // {}

In the fourth pattern, a new object is assigned to exports. However, this pattern does not seem to work, as math appears to be an empty object. Let's understand why.

Let's revisit how object references work in JavaScript. When you assign one object to another, both objects point to the same memory address. Modifying one will modify the other as well. Let's see this in action.

const superhero1 = {
  name: "Bruce Wayne",
};

const superhero2 = superhero1; // Create a reference to superhero1

superhero2.name = "Clark Kent"; // Modify superhero2 name

console.log(superhero1); // { name: 'Clark Kent' } superhero1 name is updated

In this example, both superhero1 and superhero2 reference the same superhero. Modifying superhero2 also modifies superhero1.

However, assigning a new object will break the reference.

const superhero1 = {
  name: "Bruce Wayne",
};

let superhero2 = superhero1; // Create a reference to superhero 1

superhero2 = { name: "Clark Kent" }; // Assignment breaks the reference

superhero2.name = "Barry Allen"; // Only superhero2 is modified

console.log(superhero1); // { name: 'Bruce Wayne' } superhero1 is unaffected

In this case, the assignment breaks the reference and modifying superhero2 no longer affects superHero1.

Now that we understand how objects work in JavaScript, let's relate it to module.exports and exports. In Node.js, module is a plain JavaScript object with an exports property. exports is a plain JavaScript variable that happens to be set to module.exports. When you require a module in another file, the code within that module is executed, and only module.exports is returned.

var module = { exports: {} };

var exports = module.exports;

// Assigning exports to module.exports via object reference...

exports.add = add; // ...results in module.exports.add = add
exports.subtract = subtract; // ...results in module.exports.subtract = subtract

// The module.exports object contains both add and subtract properties

return module.exports;

However, if you assign a new object to exports, the reference is broken and updating exports no longer updates module.exports.

var module = { exports: {} };

var exports = module.exports;

// Below assignment breaks the object reference

exports = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

return module.exports; // module.exports = {}

If you try to access add or subtract on the exported object, an error is thrown because module.exports is empty. So, while module.exports and exports may seem interchangeable in the first import export pattern, they are not the same.

When should you choose exports over module.exports? The short answer is that you probably shouldn't. While exports may be shorter and seem more convenient, the confusion it can cause is not worth it. Remember that exports is just a reference to module.exports, and assigning a new object to exports breaks that reference.

Introducing Visual Copilot: a new AI model to convert Figma designs to high quality code using your existing components in a single click.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development8 MIN
Server-only Code in Next.js App Router
WRITTEN BYVishwas Gopinath
April 3, 2024
Web Development8 MIN
Material UI: Convert Figma Designs to React Components
WRITTEN BYVishwas Gopinath
March 27, 2024
Web Development6 MIN
Qwik’s Next Leap - Moving Forward Together
WRITTEN BYThe Qwik Team
March 26, 2024