JavaScript Import and Export

In the previous lesson, we learned that modules let you split code across separate files. Now let’s see exactly how to send code out of one file with export and pull it into another with import.

📦 Named Exports

A named export sends out a value by its name. You add the export keyword in front of a const or a function, and you can export as many names as you like from one file.

// math.js
export const pi = 3.14159;

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

Here is what each line in math.js does:

• export const pi = 3.14159; creates a constant named pi and marks it as available to other files.
• export function add(a, b) { defines a function called add and exports it too, so two names leave this file.
• return a + b; gives back the sum of the two arguments when add is called.

To bring those names into another file, you list them inside curly braces. The names inside the braces must match the exported names exactly.

// app.js
import { add, pi } from "./math.js";

console.log(add(2, 3)); // 5
console.log(pi); // 3.14159

Here is how app.js uses those imports:

• import { add, pi } from "./math.js"; pulls both names in from the math.js file in the same folder.
• console.log(add(2, 3)); calls the imported add function with 2 and 3, printing 5.
• console.log(pi); prints the imported pi constant, 3.14159.

⭐ Default Exports

A default export sends out one main value from a file. You write export default in front of it, and there can be only one default per file. When you import it, you do not use curly braces, and you can pick any name you want.

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Here is what this file exports:

• export default function greet(name) { defines a function named greet and marks it as the file’s single default export.
• return `Hello, ${name}!`; returns a greeting string that inserts the name argument.

// app.js
import greet from "./greet.js";

console.log(greet("Alex")); // Hello, Alex!

Here is how app.js brings in the default export:

• import greet from "./greet.js"; imports the default value with no curly braces and gives it the local name greet.
• console.log(greet("Alex")); calls it with "Alex", printing Hello, Alex!.

🔄 Named vs Default Export

Here is how the two kinds of export compare side by side.

🧩 A Two-File Example

Putting it together, one file defines a function and exports it, and the other file imports and uses it. Here is math.js, which exports an add function as a named export.

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

Here is what math.js does:

• export function add(a, b) { defines the add function and exports it as a named export.
• return a + b; returns the sum of the two arguments to whoever called add.

Here is app.js, which imports add and calls it.

// app.js
import { add } from "./math.js";

const total = add(10, 5);
console.log(total); // 15

Here is how app.js uses it:

• import { add } from "./math.js"; pulls the named add export in from the neighboring file.
• const total = add(10, 5); calls add with 10 and 5 and stores the result, 15, in total.
• console.log(total); prints 15.

In the browser, the import path is a real file path. It starts with ./ for a file in the same folder, and it includes the .js extension.

🏷️ Renaming a Named Import

Sometimes a name from another file clashes with a name you already have. You can rename a named import with the as keyword to give it a new local name.

// app.js
import { add as sum } from "./math.js";

console.log(sum(2, 3)); // 5

Here is how the rename works:

• import { add as sum } from "./math.js"; imports the named export add but gives it the local name sum.
• console.log(sum(2, 3)); calls the function through its new name sum, printing 5.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ Named exports use export const or export function, and you import them inside curly braces
• ✅ A default export uses export default, and you import it without braces under any name
• ✅ Named import names must match the export, but a default import name is your choice
• ✅ In the browser, the import path is relative and includes the .js extension
• ✅ You can rename a named import with the as keyword

🚀 What’s Next?

Now that you can split code across files, we will learn how functions can run other functions after they finish. Let’s continue to Callbacks.