javascript-300x120

Modules are an important part of any programming language. All prior JavaScript versions have lacked this feature. But that did not stop the community from creating their own modularized code. ECMAScript 2015 (ES6) has finally introduced modules as a fully realized function into JavaScript. Modules are now fully naturalized citizens of the JavaScript programming language. Their function has been to employ compact syntax and Asynchronous module loading functions.

This article will give you a review of how JavaScript Modules came to be, coding examples and how to transpile your ES6 modules to ES5, in order to work in current browsers.

 Basis for Modules
The most commonly used platform for JavaScript is the web browser. By design it executes its code in a fully uniform global context. The problem programmers run into, is the ability to write compact code while avoiding naming conflicts. The basis of the problem comes down to keeping your code organized and not conflicting with preexisting variables.

In the past, JavaScript applications were partitioned in files while building in real time. In order to overcome this, users and the broad community of JavaScript starting wrapping files in an IIFE which is a function that runs right as it’s defined.

This type of construction creates a local area and was the basis for module introduction and creation in JavaScript. ES6 has now formalized the concept and properly implemented the feature and made it official.

ES6 Module Syntax

In ES6, every module is now defined inside a separate individual file. All functions, variables or actions are defined inside the module and will not be visible or called upon unless the programmer exports the code. A programmer now has the possibility to write code inside the module that won’t affect other parts of the application unless explicitly told to do so.

As each ES6 module is defined in its own file, it is important to know the functions or variables defined in a module are not visible outside. This means that you can write code in your module and only export those values when you want it to be accessed by other parts of code. Other parts of your application will be able to utilize this protected module code and access it when a programmer deems fit.

The nature of modules then calls for two keywords that will allow you to export the module code and then take in exported variables. The respective keywords are export and import.

Module Creation

We’re going to create simple module with basic JavaScript to display the module in action. The first order of business is to create a separate .JS file, for the example’s sake it will be called multiply.js.

The function is going to create a random number generator that also multiplies two different variables. One function will be a standard random generator called randomNum() followed by a declared multiplication function called mult (X, Y). Pay attention to the last line of code. The following code as a module will look like this:

javascript
// multiply.js
function randomNum() {
return Math.random();
}

function mult(X, Y) {
return X * Y;
}

export { randomNum, mult }

The export keyword line is what allows for the code to be put into a larger file of an application. If you were take this into the main.js, then it would be called with the following line of code:

Importing the module can can allow you to choose only one or a specific amount of functions from the exported module. For example if you wanted to only pull out the randomNum() function, the code would look like this:

import { randomNum } from ‘multiply’;

That is the crux of module creation and implementation in ES6. Programmers will find that using the latest features of a programming language will not always be compatible with the latest of browsers. The way to get past this is through using a transpiler.

Finding an ES6 Transpiler

It used to be a risky endeavor to use new JavaScript before they became localized and standard across major browsers. An incompatible browser could make your code unable to be used. Now, that is no longer an issue as you can use Babel as a transpiler to convert your ES6 modules into JavaScript that is currently understandable for today’s modern browsers. Eventually, these modules will be natively read by the browsers and you can skip this step all together.

Overall Benefits of ES6 Modules

ES6 modules allow for new features that can’t be added by an external library. A small syntax and static structure can be more widely used causing overall optimization and more. It also allows for fragmentation in the JavaScript community, as multiple ways to create modules have been created over the years. There has been no uniformity to the process until now.

Math or JSON were simple namespaces in past versions of JavaScript, now they have full range functionality when placed to create a module.There is now a native standard for modules that is imbued into the language itself, programmers will be able to quickly use a single method benefitting them tremendously. ES6 Modules are incredibly powerful and will pave the way for future advancements in the language.

Comments