JavaScript Import

Summary: in this tutorial, you will learn how to use the JavaScript import keyword to import variables, functions, and classes from another module.

Introduction to JavaScript import keyword

ES6 modules allow you to structure JavaScript code into modules and share values (variables, functions, classes, etc.) between them.

To import values from a module, you use the import keyword. Also, you need to load the JavaScript source file as a module. In HTML , you can do it by specifying the type="module" in the script tag:

<script type="module" src="app.js"></script>Code language: JavaScript (javascript)

We’ll take a simple example to illustrate how to use the import keyword.

Suppose we have a project with the following structure:

├── index.html
└── js
   ├── app.js
   └── greeting.jsCode language: JavaScript (javascript)

In this project, the index.html loads the app.js as a module:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JavaScript import</title>
    </head>
    <body>
        <script src="js/app.js" type="module"></script>
    </body>
</html>Code language: JavaScript (javascript)

The greeting.js module has a function sayHi() function that display a message. It exports the sayHi() function as a default export:

export default function sayHi() {
  alert('Hi');
}Code language: JavaScript (javascript)

The app.js will import the sayHi() method from the greeting.js module and execute it.

Import a default export

If a module uses a default export, you can import the default export from that module using the following syntax:

import name from 'module.js';Code language: JavaScript (javascript)

For example, you can import the sayHi() function from the greeting.js module to the app.js module as follows:

import sayHi from './greeting.js';

sayHi();Code language: JavaScript (javascript)

If you open the index.html in the web browser, you’ll see an alert message.

Because the sayHi() function is a default export, you can assign it any names you want when you import it.

For example, you can import the sayHi function from the greeting.js module and set its name to displayGreeting() as follows:

import displayGreeting from './greeting.js';

displayGreeting();Code language: JavaScript (javascript)

Import named exports

Unlike importing a default export, you need to specify the exact name of the named exports when you import them into a module. In addition, you need to place the named exports inside a pair of curly braces.

Here’s the syntax for importing named exports:

import { namedExport1, namedExport2} from 'module.js';Code language: JavaScript (javascript)

For example, we can modify the greeting.js module that contains two named exports:

export function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

To import the sayHi() and sayBye() functions to the app.js module, you use the following code:

import { sayHi, sayBye } from './greeting.js';Code language: JavaScript (javascript)

You can also call these functions:

import { sayHi, sayBye } from './greeting.js';

sayHi();
sayBye();Code language: JavaScript (javascript)

If you open the index.html in the web browser, you’ll see two alerts created by these two functions.

Namespace import

A module namespace object is a static object that includes all exports from a module. It is a static object that JavaScript creates when evaluating the module.

To access the module namespace object, you use the following syntax:

import * as name from 'module.js';Code language: JavaScript (javascript)

In this syntax, the name is the module namespace object that includes all exports from the module.js module as the properties.

For example, if the modules.js has the myVariable, myFunction, and myClass named exports, you can access them via the name object like this:

name.myVariable
name.myFunction
name.myClassCode language: JavaScript (javascript)

To illustrate how the namespace import works, we can change the app.js to use the namespace import as follows:

import * as greeting from './greeting.js';

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

The following specifies the greeting as the module namespace object:

import * as greeting from './greeting.js';Code language: JavaScript (javascript)

Once we have the module namespace object, we can call the sayHi() and sayBye() functions:

greeting.sayHi();
greeting.sayBye();Code language: JavaScript (javascript)

If the importing module has a default export, you can access it via the default keyword:

name.defaultCode language: JavaScript (javascript)

For example, we can change the sayHi function to a default export in the greeting.js module:

export default function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Code language: JavaScript (javascript)

And import the exports from the greeting.js module into the app.js module using the namespace import:

import * as greeting from './greeting.js';

greeting.default(); // sayHi()
greeting.sayBye();Code language: JavaScript (javascript)

In this case, we can call the sayHi() funtion via the default() as shown above. Note that you cannot access the sayHi() function using its name like this:

greeting.sayHi();Code language: JavaScript (javascript)

If you do so, you’ll get the following error:

Uncaught TypeError: greeting.sayHi is not a functionCode language: JavaScript (javascript)

Renaming a named export

When you import a named export, you can assign it a new name. It is useful when you import the function with the same name from different modules:

import { name as name1 } from "module1.js";
import { name as name2 } from "module2.js";Code language: JavaScript (javascript)

For example, the following illustrates how to rename the sayHi() and sayBye() functions to hi() and bye() when importing to the app.js module:

import { sayHi as hi, sayBye as bye } from './greeting.js';

hi();
bye();Code language: JavaScript (javascript)

Summary

Use JavaScript import keyword to import variables, functions, and classes into a module.

Was this tutorial helpful ?