What are Javascript Modules?

What are Javascript Modules?

  • 2016-08-11
  • 1495

What’s Javascript Modules?

Javascript modules are a great way to structure your code. Just like Object Oriented programming, they help you categorize your code making it easy to maintain especially if you have a large code base. Also, it makes it easier to read your code, different developers can work on different files for the same project which in other words assist deployment. The best part of modules is that you can reuse a module multiple times for different projects, because nothing hurts more than writing the same code over and over again for different projects.

The News

There is good news and bad news. The bad news is the use of modules initially only works with NodeJS applications…… the good news is, with the help of module bundlers like browserify and webpack, you can bundle your modules into one javascript file, the user will only download one bundled javascript file (optimizing load time). If you have no prior knowledge of what webpack is, you can take a look at the intro tutorial here.

File Structure

JsModules
    |-- index.js
    |-- modules
    |      |-- mymodule.js

The Code

For the purpose of this tutorial, we will be using nodeJS, so go ahead and make sure you have node installed and create a working directory so we can get started.

A Simple Module

For starters, we can go and ahead and add a simple console message to mymodule.js file:

modules/mymodule.js

 console.log("I am a module");

Pretty simple huh? Now, let’s include that simple file in our index.js file:

_ index.js_

require('./modules/mymodule.js');

If you run index.js file using node, we get the message “I am a module” printed out on the terminal.

For a function, we can change the content of our mymodule.js file to:
module/mymodule.js

bacon = function () {
  console.log("I am working from a module");
}

This will define a global for us to use. And as usual, we will require our mymodule file in our index.js file and then call the function:

index.js

require('./modules/mymodule');
 
// declare the function
bacon();

This will log the message to the console.

Module.exports Anonymous Function

To expose and make an anonymous function available in our project, we use the module.exports object. For example, we want to create an anonymous function that logs “I am waffles” to the console, our module file will look something like:

module/mymodule.js

module.exports = function () {
  console.log("I am waffle");
}

Next, we have to assign the required module to a variable in our index.js file that we can use later in our project:

index.js

var waffle = require('./modules/mymodule');
 
// Do some other random stuffs
console.log("I am before waffles");
 
// Finally use our anonymous method
waffle();

In the above instance, our anonymous function that is being assigned to a variable does not run until it is called. Therefore, “I am before waffles” logs to the console first before “I am waffles”.

exports Named Function

In the case of named functions, the module exports method is a little different, we simple use exports.FunctionName. For instance, we have a food module (yes, a food module) that has functions for different foods and we want to export it as a module and make it available to our application.

modules/mymodule.js

exports.bacon = function () {
  console.log("I am bacon");
};
 
exports.waffle = function () {
  console.log("I am waffle");
};

The functions bacon and waffle are now available for our application to use:

index.js

var food = require('./modules/mymodule');
 
food.waffle();
food.bacon();

This way, we can have multiple functions in one module and use it as desired.

Module.exports Anonymous Object

We can create an object along with it’s prototypes and then export an instance of the object making it and its prototypes available to our application:

module/mymodule.js

var Foodie = function () {};
 
Foodie.prototype.waffle = function () {
  console.log("I am the waffle method");
};
 
Foodie.prototype.bacon = function () {
  console.log("I am the waffle method");
};
 
module.exports = new Foodie();

And we can use it in our index.js file as:

index.js

var food = require('./modules/mymodule');
 
food.waffle();
food.bacon();

exports Named Object

Our modules file will have:

modules/mymodule.js

var Foodie = function () {};
 
Foodie.prototype.waffle = function (name) {
  console.log(name + " ate my waffle method");
};
 
Foodie.prototype.bacon = function (name) {
  console.log(name + " ate my bacon method");
};
 
exports.foodie = new Foodie();

And in our application, we have to specify the module that we want to import from the module file, like so:

index.js

var food = require('./modules/mymodule').foodie;
 
food.waffle("Bliss");
food.bacon("Nelly");

That is it for javascript modules, you can go ahead and use them as much as you can in your applications and projects. Have any question? I want to hear them, post them in the comment section below.

Suggest

JavaScript for Absolute Beginners

JavaScript For Beginners - Learn JavaScript From Scratch

JavaScript for Beginners

JavaScript Bootcamp - 2016

JavaScript Tutorials: Understanding the Weird Parts

ES6 Javascript: The Complete Developer’s Guide