JavaScript import

import brings an exported value from another module into the current file.

The syntax mirrors export closely.

What you import must match what the other file actually exported.

Example

// Standing in for a module already imported elsewhere.
const mathModule = {
  double: function (n) { return n * 2; },
  PI_ROUNDED: 3
};

const { double, PI_ROUNDED } = mathModule;

console.log(double(5));
console.log(PI_ROUNDED);

The output is 10 then 3.

The real syntax is import { double, PI_ROUNDED } from "./math.js";.

Import Forms

import { name } from "..." imports one named export.

import name from "..." imports the default export.

import * as name from "..." imports everything as one object.

Syntax

import { double } from "./math.js";
import circle from "./shapes.js";
import * as shapes from "./shapes.js";

Curly braces only for named imports, never for the default.

Named Imports Must Match

The name inside the braces has to be exactly what was exported.

Example

const mathModule = { double: function (n) { return n * 2; } };

const { double } = mathModule;

console.log(double(10));

Importing a name the file never exported would fail in a real module.

Renaming on Import

as avoids a clash with a name already used locally.

Example

const mathModule = { double: function (n) { return n * 2; } };

const { double: doubleValue } = mathModule;

console.log(doubleValue(7));

The real syntax is import { double as doubleValue } from "./math.js";.

Importing the Default

No curly braces, and the local name can be anything you like.

Example

const shapesModule = { default: function (r) { return Math.round(Math.PI * r * r); } };

const circleArea = shapesModule.default;

console.log(circleArea(3));

The real syntax is import circleArea from "./shapes.js";.

Importing Everything

Useful when you want to use several exports under a namespace.

Example

const shapesModule = {
  square: function (s) { return s * s; },
  circle: function (r) { return Math.round(Math.PI * r * r); }
};

const shapes = shapesModule;

console.log(shapes.square(4));
console.log(shapes.circle(3));

The real syntax is import * as shapes from "./shapes.js";.

Combining Default and Named

A file can offer both, and both can be imported together.

Example

const shapesModule = {
  default: function (r) { return Math.round(Math.PI * r * r); },
  square: function (s) { return s * s; }
};

const circleArea = shapesModule.default;
const square = shapesModule.square;

console.log(circleArea(3) + " and " + square(4));

The real syntax is import circleArea, { square } from "./shapes.js";.

Complete Example

<!-- main.js -->
<script type="module">
  import circleArea, { square } from "/samples/shapes.js";
  import { double } from "/samples/math.js";

  console.log(circleArea(3));
  console.log(square(4));
  console.log(double(5));
</script>

<!-- In the HTML: -->
<!-- <script type="module" src="main.js"></script> -->

Try It Yourself

Real import syntax needs a module file to import from.

Try the simulated version:

Run the opening example and destructure a different property.

Important Points

• Named imports use curly braces and must match the export name.
• Default imports use no braces and can be named anything.
• import * as name imports everything as one object.
• as renames an import to avoid a clash.
• Default and named imports can be combined in one statement.

Conclusion

Import mirrors export, form for form.

Getting braces right is the most common early mistake.

Once the shapes are familiar, reading any module's imports becomes quick.