Parse Objects

  • Blog
  • JavaScript
  • Login
Home  /  Blog • JavaScript  /  Understanding the imports and exports of JavaScript ES6

Understanding the imports and exports of JavaScript ES6

Aditya June 02, 2017 Blog, JavaScript Leave a Comment
javascript es6 : import - export

 

 

JavaScript ES6 supports for exporting and importing functions, variables from one module to another. There are two kinds of exports: A named export and a default export.

Table of Contents

  • Named Export:
  • Default Export
  • Exporting a class

Named Export:

In JavaScript ES6, Named export are used to export multiple things from a module by adding the keyword export to their declaration. These exports are distinguished by their names. While importing these named functions or variables, one can use the same name to refer to these corresponding functions or variables.

Consider the following example. I have created the named functions in a JavaScript file called functionsFile.js.

//exporting a function
export function squareNumber(x) {
  return x * x; 
}

//exporting a variable 
export var pi = 3.14; 



//Another way of named export: 



//exporting a function
function squareNumber(x) {
  return x * x; 
}

//exporting a variable 
var pi = 3.14; 

export {squareNumber, pi} ; 

 

 

Now the function squareNumber and the variable pi are ready for import. I will create a file called main.js and import the above exported values.

//main.js 


import {squareNumber, pi} from "functionsFile"; 

var radius = 7; 
console.log("Area of a circle is", pi * squareNumber(7)); 


//Another way of importing 

import * as mathFuncs from "functionsFile"; 
console.log("Area of circle is ", mathFuncs.pi * mathFuncs.squareNumber(7)); 

 

Default Export

Default export in Javascript ES6 permits only a single default export per module. A default export can be for a function, class or an object. The default export is accomplished as follows:

//functionsFile.js

export default function(x) { 
  return x * x ; 
}

 

Then in another file, it is straightforward to import the default export.

//main.js 

import squareNumber from "functionsFile"; 
squareNumber(7);

 

Exporting a class

In Javascript ES6, classes can also be exported like functions. An example of that is shown below:

//MyClass.js 

export default class MyClass {
  ...
} 


//Main.js

import MyClass from "MyClass";

 

If this example is considered in React, where the MyClass is a component and needs to be rendered inside the Main, it will look as follows:

//MyClass.js 

import React from "react"; 
export default class MyClass extends React.Component {
  ...
} 


//Main.js

import React from "react"; 
import MyClass from "MyClass";

export default class Main extends React.Component {
  render() {
    return(
        <MyClass />
      );
  }
}

 

It should also be noted that you cannot conditionally import or export things. One cannot nest import and export inside a block.

Tags: export default, javascript, javascript es6, javascript export, javascript import, named export, reactjs
Previous Article
Next Article

About Author

Aditya

I am a Web Software Developer and I currently work on building real-time genetic analysis tools. I enjoy planning and developing web applications and digitally marketing them. My favorite football (soccer) team is Arsenal!

Related Posts

  • Publish Vue.js components to NPM

    How to publish Vue.js components to NPM

    February 5, 2020
  • Binary Search Algorithm

    Binary Search Algorithm in JavaScript

    October 22, 2018
  • nodeJS project

    NodeJS Application with Express – Handlebars and Mongoose

    June 6, 2017

Recent Posts

  • How to publish Vue.js components to NPM
  • Binary Search Algorithm in JavaScript
  • NodeJS Application with Express – Handlebars and Mongoose
  • Understanding the imports and exports of JavaScript ES6
  • Understanding What is Webpack

Categories

  • Blog12
  • JavaScript8

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.