module.exports vs require vs import vs export in JavaScript

In JavaScript, if we want to access functions from another file we have to use module.exports and require. This involves two steps.

• Step 1: Expose list of functions which needs to be used outside of the file using module.exports

// wish.js file
var hi = function () {
  console.log("Hi there!!");
};

function hello() {
  console.log("Hello there!!!");
}

function welcome() {
  console.log("Welcome!!!");
}
// exposing hi and hello functions to outisde world and not welcome function
module.exports = { hi, hello };

• Step 2: Use require keyword to include module/file from which you want to access functions

// app.js file 

// this will give permission in this file to use 
// exposed functions in greet.js file/module
var wish = require("./greet.js"); 

wish.hi();
wish.hello();

Lets discuss about module.exports and require in detail how they works.

module.exports:

• module.exports is a special variable or object
• Only functions attached to this object will be accessed outside this file
• exports also can be used to expose functions from the file
• exports and module.exports both are pointing to the same location initially
• You cant directly assign function to exports as that will break the link between exports and module.exports.
• But you can attach a function to exports which will not break the link with module.exports and works as per expectations

// this will break the reference link to module.export and require function
// will return empty object as module.exports is still empty
exports = function(){
  console.log("Hello!!")
}

// This is the propery way of exporting using exports keyword, 
// This way we are modifying/mutating object and not breaking the reference link
exports.Hello = function(){
   console.log("Hello!!")
}

// This is better and simple way
var sayHello = function(){
   console.log("Hello!!")
}

module.exports = {sayHello};

require:

• require is a function
• require takes all the js module/file content and wraps into another function(IIFE) and limits scope to within this scope
• require returns module.exports
• require will load node module or native module or files
  - A node module is an external package(s)
  - A Native module is inbuilt JS module
  - A file is a custom file created in the project
• require needs a string parameter
• String parameter is location of the module/file name
  - for node modules, just module name works
  - for file names, need to specify the path of the file
• By default require checks for specified string js file
• If file extension is not specified, require will append .js internally and checks for the file
• For non .js extension files, need to specify file extension(like .json)
• If file name and node module names are same, require will differentiate using the path.
  - For file, need to specify path like require(“./utils”)
  - For node module, need to specify just module name require(“utils”)
• if path not specified, require treat it a native module

export and import

• export and import are ES6 version of module.exports and require
• export support only one default function
• the export default keywords specify the main component in the file

Sample code snippet for export and import:

// wish.js file
// Exporting a named function
export function sayHello() {
  console.log("Hello!!!");
}

export function sayHi() {
  console.log("Hi!!!");
}

//app.js
// Importing one function
import { sayHello } from "./wish";

// Importing multiple function
import { sayHello, sayHi } from "./wish";

// importing all functions from a file
import * as wishes from "./wish";
wishes.sayHello()

Default export function example:

// wish.js file

// Exporting default function
export default function sayWelcome() {
  console.log("Welcome!!!");
}

//app.js
// importing default function
import sayWelcome from "./wish";