JavaScript Import and Export

With the modular approach in JavaScript you can create a module which may contain variables, classes, functions. You can make them available in another JS file, for that you use export and import.

Breaking your code into separate modules makes it easy to maintain, more readable and increases reusability.

Export in JavaScript

Export declaration is used to export values (variables, classes, functions) from a JavaScript module. There are two types of exports-

Named exports
Default exports

Named exports

For using named exports you have two ways; either use export keyword with each entity or use export at the end with all entities at once.

Example when used with each entity individually.

ExportImport.js

// exporting an array
export let numArr = [1, 2, 3, 4, 5];

// exporting a constant
export const MODULE_NAME = 'ExportImport';

// exporting a function
export function hello(){
  return 'Greetings';
}

Exporting later

let numArr = [1, 2, 3, 4, 5];
const MODULE_NAME = 'ExportImport';
function hello(){
  return 'Greetings';
}
export {numArr, MODULE_NAME, hello};

You can also specify an alias while exporting using as keyword.

export {numArr, MODULE_NAME as mn, hello};

Default Exports

You may have modules declaring a single entity. Actually, this approach is preferred most of the time. If there is only a single entity in your module then you can use export default to export that entity.

You can have only a single export default per file.

ExportDefault.js

const hello = () => {
  const user = {
    name: 'Robert',
    email: 'abc@xyz.com'
  }
  console.log(user);
}

export default hello;

Import in JavaScript

You can import in a file using import keyword. If you are importing a named export then you have to wrap it in curly braces. When importing a default export then curly braces are not to be used.

JavaScript import example for named exports

Here is a HTML which imports named export from ExportImport.js file.

ExportImportDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="module">
import {numArr, MODULE_NAME, hello} from './ExportImport.js'
document.getElementById("func").innerHTML = hello();
document.getElementById("mod").innerHTML = MODULE_NAME;
document.getElementById("arr").innerHTML = numArr;
</script>
<p id="func"></p>
<p id="mod"></p>
<p id="arr"></p>
</body>
</html>

Points to note here-

You need to include script in your HTML with a <script> element of type="module", so that it gets recognized as a module.
Named exports are imported by using import keyword and wrapping entities with in curly braces.

import {numArr, MODULE_NAME, hello} from './ExportImport.js'

You can't run JS modules directly in a browser via a file:// URL — you'll get CORS errors. You need to run it via an HTTP server. I used IIS in a Windows machine.

JavaScript import example for default exports

Here is a HTML which imports named export from ExportDefault.js file.

ExportDefaultDemo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script type="module">
import hello from './ExportDefault.js'
hello();
</script>
</body>
</html>

Note that the curly braces are not required when importing default export.

import hello from './ExportDefault.js'

That's all for this topic JavaScript Import and Export. If you have any doubt or any suggestions to make please drop a comment. Thanks!

Related Topics

You may also like-

Tech Tutorials

Wednesday, November 30, 2022