In this series I cover the new features introduced with EcmaScript 2015 (sometimes referred to as ES6).

Import and Export

Modules allow us to break a large project into smaller, more manageable components. At the time of writing, JavaScript modules are yet to be fully supported by the major browsers though are in active development for Chrome, Firefox and Edge.

At the heart of modules are the export and import statements, separate modules(or files) can export references to data which can be imported into files which call for it. Let's look at a basic example of this export/import behavior which occurs between two JavaScript files; my-module.js and main.js:

  // my-module.js file
export let firstName = 'George';

  // main.js file
import {firstName} from 'my-module';
console.log(firstName); // 'George'

In the above code, the file my-module.js is nominating the variable firstName for export, allowing other files to obtain the reference to that value by importing it. The file main.js is looking to import the reference to the value of firstName, specifying the module it is accepting it from, my-module.

As we have successfully imported the value reference of firstName into main.js from my-module.js, we can now console log the value George as if the variable firstName was declared in main.js.

IMPORTANT: Declarations such as variables and functions made within a module are scoped locally to that module, there is no shared global scope between modules. Additionally, modules default to strict mode.

We can also export and import function references:

  // my-module.js file
export let firstName = 'George';
export function sayHello(){
  console.log('Hello');
}

  // main.js file
import {firstName} from 'my-module';
import {sayHello} from 'my-module';
sayHello(); // 'Hello'

As both of our export and import operations involve the same file, we can use a shorter syntax and group the operations into single statements:

  // my-module.js file
let firstName = 'George';
function sayHello(){
  console.log('Hello');
}
export {firstName, sayHello}; //single export statement

  // main.js file
import {firstName, sayHello} from 'my-module'; //single import statement
sayHello(); // 'Hello'

Default

With the default keyword you can assign a default export value to each module. This comes in handy when you want to export a single value from a module or set a fallback, similar to the behavior of the default keyword used in a switch statement. Let's look at an example:

  // my-module.js file
let firstName = 'George';
let msg = 'The default message';
function sayHello(){
  console.log('Hello');
}
export {firstName, sayHello}; 
export default msg; //export the default value

  // main.js file
import {firstName, sayHello} from 'my-module';
import fallback from 'my-module'; //import the default value
sayHello();
console.log(fallback);

  //Console output:
// 'Hello'
// 'The default message'

IMPORTANT: You can only have one default export statement per module.

Two things to note with the default value; When exporting and importing, you do not wrap the value in curly braces. Additionally, notice that when we import the default value from the my-module module, we can assign the value to a variable name of our choosing. It is the default, so it does not look for a matching name nor care for what it is called, in the example above we export msg which is imported and assigned to the variable fallback in main.js.

Import aliases

You can immediately assign imported values to another alias by using as:

  // my-module.js file
export let firstName = 'George';
let msg = 'The default message';
export default msg; 

  // main.js file
import {firstName as username} from 'my-module'; // Alias in use
import fallback from 'my-module';
console.log(username); // 'George'
console.log(fallback); // 'The default message'

As you see in the code above, when we import firstName we immediately assign it to the new alias of username, throughout the rest of the application in main.js we would use username instead of firstName.

We can combine our imports of firstName and the default import from my-module.js into a single statement. In the event of multiple imports which includes the default, the default value is assigned to the first variable which appears in the import statement:

  // my-module.js file
export let firstName = 'George';
let msg = 'The default message';
export default msg; 

  // main.js file
import fallback, {firstName as username} from 'my-module'; // fallback receives the default value
console.log(username); // 'George'
console.log(fallback); // 'The default message'

We see that fallback is correctly assigned the default export value reference from my-module.js

Importing everything with *

You can import everything a particular module exports without the need to specify variable names by using an asterisk *. When using asterisk we group all of our imports into a single object, values are converted into property value pairs and can be accessed like regular object properties:

  // my-module.js file
let firstName = 'George';
let surName = 'Smith';
export {firstName, surName}; 

  // main.js file
import * as collection from 'my-module'; 
console.log(collection); // {firstName: 'George', surName: 'Smith'}

As native browser support flourishes, ES2015 modules will be a staple of larger projects.


642 0 2