import/export

JavaScriptJunior~2 min read

What are import and export

Starting with ES6 (2015), JavaScript gained a built-in module system: the ability to split code into files (modules) and exchange variables, functions, classes, and so on between them.

export

Lets you send something (a function, object, class, etc.) out of a module, so other files can use it.

import

Lets you load data, functions, or classes from another module, where they were exported.

A basic example

math.js

javascript

export const PI = 3.14;

export function add(a, b) {
  return a + b;
}

app.js

javascript

import { PI, add } from './math.js';

console.log(PI);       // 3.14
console.log(add(2, 3)); // 5

Kinds of exports

1. Named export (`export`)

You can export several entities from a single file.

javascript

// math.js
export const PI = 3.14;
export function multiply(a, b) {
  return a * b;
}

You import it by name, in curly braces:

javascript

import { PI, multiply } from './math.js';

The names must match!

2. Default export (`export default`)

Lets you export one main entity from a file. Most often it's the "main object" or function.

javascript

// math.js
export default function add(a, b) {
  return a + b;
}

You can import it under any name, without curly braces:

javascript

import sum from './math.js';
console.log(sum(2, 3)); // 5

export default → you can name the import however you like.

Differences between `export` and `export default`

Criterion	`export` (named)	`export default`
Count per file	As many as you like	Only one
Import	In curly braces `{}`	Without curly braces
Name	Must match	Can be anything
Renaming on import	Through `as`	Just change the name
Example	`import { add } from './file.js'`	`import add from './file.js'`

Examples of the differences

Named export:

javascript

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }

javascript

// app.js
import { PI, add } from './math.js';
console.log(add(1, 2)); // 3

Default export:

javascript

// math.js
export default function(a, b) { return a * b; }

javascript

// app.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

Mixed export:

javascript

// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }

javascript

// app.js
import add, { PI } from './math.js';
console.log(add(1, 2), PI); // 3 3.14

3. Renaming on import and export

Renaming on export:

javascript

function sum(a, b) { return a + b; }
export { sum as add };

Renaming on import:

javascript

import { add as plus } from './math.js';
plus(2, 3); // 5

4. Importing an entire module

You can import everything at once as an object:

javascript

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

console.log(math.PI);       // 3.14
console.log(math.add(2, 3)); // 5

Handy when a module has many exports.

5. Re-exporting (forwarding from another file)

Sometimes one module simply "repackages" others:

javascript

// utils.js
export { add, multiply } from './math.js';

Now you can:

javascript

import { add } from './utils.js';

Important to remember

Feature	Description
Works only in modules (`type="module"` in HTML or `.mjs` in Node)	Otherwise you get a `SyntaxError`
Import/export are always static	Cannot be used inside `if`, `for`, `function`
Modules are cached	Loaded once and reused
`import` is always asynchronous	You can use `await import()` for dynamic loading

Dynamic import

You can load a module on demand:

javascript

const math = await import('./math.js');
console.log(math.add(2, 3)); // 5

Works inside an async function or modules (with type="module").

Summary

Keyword	What it does	Example
`export`	Sends variables/functions out	`export const PI = 3.14;`
`export default`	Sends the "main" object/function	`export default class User {}`
`import`	Brings in exported entities	`import { PI } from './math.js';`

Put simply:

export: "send out" import: "load in" export default: "send the one main thing"

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.