Default Exports

A module can have one default export: its main thing.

1
2
3
4
5

export default class Logger {
  log(message) {
    console.log("[log]", message);
  }
}

Import it without curly braces, and name it however you like:

1
2
3
4

import Logger from "./Logger.js";
import Log from "./Logger.js";      // same thing, different local name

new Logger().log("hello");

Other forms

1
2
3

export default function greet(name) { return "Hi " + name; }   // function
export default 42;                                              // a value
export default { theme: "dark" };                               // an object

Mixing default and named

1
2

export default function request(url) { /* ... */ }
export const BASE_URL = "https://api.example.com";

1

import request, { BASE_URL } from "./api.js";

Try it

1
2
3
4
5
6
7
8
9
10

<script type="module">
  const source = "data:text/javascript," + encodeURIComponent(`
    export default function greet(name) { return "Hello, " + name; }
    export const VERSION = 2;
  `);

  const module = await import(source);
  console.log(module.default("Maya")); // → Hello, Maya
  console.log(module.VERSION);         // → 2
</script>

A default export appears as the default property of the module object, which is how dynamic import() exposes it.

Default vs named

Which should I use?

Both are valid. Many teams prefer named exports because the name is the same everywhere, it is easy to search for, and typos in imports are caught. Default exports are common for classes and UI components, and some frameworks require them for specific files (for example, page components). Pick one convention for your project, and follow it.