This short tutorial aims to get you started creating and using JavaScript modules and provides some simple examples.
What is ES6?
JavaScript’s official name is actually ECMAScript, and version 6 introduced module functionality to create and consume modules, so you might see JavaScript Modules referred to as ES6 or ES2015 Modules.
What is a JavaScript Module?
As you get more adventurous with your JavaScript programming projects and your code becomes more complex, it might start to become harder to manage.
One way of mitigating this is splitting your code into multiple files – each focussing on a specific task or relating to a certain aspect of your program.
That’s what the JavaScript modules functionality achieves – it allows you to organize your code into separate files and import them when needed.
It also allows you to use modules that other people have written and made available for use – a real time-saver!
Creating a Module
I’ll keep this example simple. Let’s create a module that contains two functions:
- A function called shortestWord returns the shortest word from a given string
- A function called longestWord returns the longest word from a given string
Here’s the example module for this article, wordCalc.js:
// Define the function called **shortestWord** which returns the shortest word from a given string
function shortestWord(words){
let splitWords = words.split(' ');
let sortArray = splitWords.sort(function(a, b) { return a.length - b.length; }); // Sort the array from shortest to longest
return sortArray[0]; // Return the first element in the array, which will be the shortest
}
// Define the function called **longestWord** which returns the longest word from a given string
function longestWord(words){
let splitWords = words.split(' '); // Split the words up into an array of words
let sortArray = splitWords.sort(function(a, b) { return a.length - b.length; }); // Sort the array from shortest to longest
return sortArray[sortArray.length-1]; // Return the last item in the array, which will be the longest
}
// Export the above functions for use in other scripts
export { shortestWord, longestWord };
The export Statement
In the above code, you’ll see the export statement in use. That’s what makes modules work. You export variables and functions from your module and import them in other files where it is required.
Using a Module
Now you have a module; you can use it. Variables and functions exported from a module can be imported into your other JavaScript files:
// Import the functions from the module created in wordCalc.js
import { shortestWord, longestWord } from './wordCalc.js';
// Call the shortestWord from the module to test it
console.log(shortestWord("terrible dog")); // Prints 'dog'
// Call the longestWord from the module to test it
console.log(longestWord("fancy cat")); // Prints 'fancy'
The import Statement
The final piece of the module puzzle is the import statement used above. It has imported the functions from the wordCalc.js module file created previously. Of course, you don’t have to import everything from a module – you can leave out the variables or functions you don’t need to keep things easy to read.
Modules can import from other modules and be stored in subdirectories. It’s a handy way to keep your project organized.
Scopes
Variables are scoped in JavaScript. Therefore, variables declared in one module aren’t available outside of it unless exported. This includes globally scoped variables within modules – they will be unavailable to other modules or your application at large unless explicitly exported.
