Javascript

Introducing Javascript Statements Export and Import

javascript es6 export and import

When writing modern web applications that’s include a lot of javascript it’s important to separate the code into modules. For this to work javascript provided us with two statements Export and Import.

 

 

If you are familiar with languages such as C# or Java or PHP may be you see the concept of namespaces which is used to separate the code into packages to make the code more modular, likewise in javascript there are also two statements that can be used in such situations which are Export and Import statements. Export statement used to export a function, a class, or variables from the current module. Import statement used to import exported functions, classes, or variables from other modules.

At the time of this writing not all browsers fully supports these two keywords but you can use something like webpack bundler to build such scripts that contain import and export. Most popular javascript frameworks such as angular, Reactjs and Vuejs relay on those two statements.

 

Export statement

The export statement used to export functions, classes, objects or variables from the current module so that it can be used by other modules by importing them.

Syntax

export function myFunction() {}

export class myClass {}

There are three types of export:

  • Named exports: expressions exported by their name and this type allows more than one export per module.
  • Default exports: expressions exported with the default keyword and this type allows only one export per module.

Named exports

function myFunction(x)
{
   return x * 3;
}

let var1 = true;

export { myFunc, var1 }; 

In the above code i exported a list of data on one line for example export let var2 or export function myFunc(). Also you can export individual items when you declare items like this:

export let var2 = Math.sqrt(2);

export function myFunc() { 
    console.info("Hello from myFunc");
 };

You can also rename named exports to avoid naming conflicts:

export { myFunc as function1,
         myVar as variable };

example:

module.js

function sum(num1, num2) {
  return num1 + num2;
}

const multiply = function(num1, num2) {
   return num1 * num2;
}

const sqrt = Math.PI + Math.SQRT2;

var graph = {
  options: {
      color:'white',
      thickness:'2px'
  },
  draw: function() {
      console.log('From graph draw function');
  }
}

export { sum, multiply, sqrt, graph };

index.js

import { sum, multiply, sqrt, graph } from './module.js';

graph.options = {
    color:'blue',
    thickness:'3px'
};
 
graph.draw();
console.log(sum(10, 4)); 
console.log(sqrt);

When running those scripts you have to use a module bundler like webpack to build those scripts or if intend to run it directly in browsers you have to do the following:

  • You need to include this script in your HTML with a <script> element of type=”module“, so that it gets recognised as a module and dealt with appropriately.
  • You have to run the scripts using an Http Server.
  • In firefox you have to set to true the variable dom.moduleScripts.enabled in about:config

 

Default exports

export default function() { ... } 

export default class { .. }

In default exports you are allowed only to export one object, class or function for that default exports used for single file modules an example for this is Vuejs file based components.

module.js

export default function() {
 console.log("Hello world");
};

entry.js

import m from './module';
console.log(m); 

Note that when using default export you can use any name when importing the data like above import m from ‘./module’.

 

Import statement

The import statement used to import functions, classes, objects or variables from modules, usually these modules have to export data first so it can be imported.

Syntax

import myClass from 'myClass';
import { export1 } from "myModule";
import { export1 , export2 } from "myModule";
import { module as newName } from "myModule";
import * as name from "myModule";

The import statement has a lot of variants, where you can import a default exported module, you can import named modules by enclosing them with parenthesis {export1, export2, …, exportN}, you can import and give an alias to the imported object so that you can refer to it with that alias.

Examples

Importing single named exports

import { sum } from './module.js';

console.log(sum(10, 4)); 

Importing multiple named objects

import { sum, multiply, sqrt, graph } from './module.js';

console.log(sum(10, 4)); 

console.log(sqrt);

graph.draw();

Importing all named exports using *

You can import an entire module contents without mentioning the name of each exported item using the “*” like this:

import * as myModule from './module.js'

Now to use any item of module.js you have to reference it with myModule like this:

console.log(myModule.sum(3, 6));

Importing an export using alias

To avoid naming conflicts between import data, you can an alias like this:

import {graph as G} from '/module.js';

Importing multiple exports and using alias

import {
  graph as G,
  sum as s
} from '/module.js';

Importing a default export

When importing a default export you can use any name to reference the exported data like this example:

import sum from './my-module';

my-module.js

export default function (x, y) {
    return x + y;
};

 

 

0 0 votes
Article Rating

What's your reaction?

Excited
0
Happy
0
Not Sure
0
Confused
0

You may also like

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments