JavaScript import

Written by Swapnil RajaPublished 24 Aug 2026

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

javascript

// 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);

PreviousJavaScript export NextJavaScript Module Scripts

Example

javascript

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));

Example

javascript

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));

Complete Example

html

<!-- 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> -->

JavaScript import

Example

Import Forms

Syntax

Named Imports Must Match

Example

Renaming on Import

Example

Importing the Default

Example

Importing Everything

Example

Combining Default and Named

Example

Complete Example

Try It Yourself

Important Points

Conclusion