ES Modules import and export in Node.js - Step-by-Step Execution

Concept Flow - ES Modules import and export

Create module file

↓

Export variables/functions

↓

Create main file

↓

Import exported items

↓

Use imported items

↓

Run program and see output

This flow shows how you create a module with exports, then import those exports in another file to use them.

Execution Sample

Node.js

export const greeting = 'Hello';
export function sayHi(name) {
  return `${greeting}, ${name}!`;
}

import { greeting, sayHi } from './module.js';
console.log(sayHi('Alice'));

Exports a constant and a function from one file, imports them in another, then calls the function to print a greeting.

Execution Table

Step	Action	Evaluation	Result
1	Export const greeting	greeting = 'Hello'	greeting available to import
2	Export function sayHi	sayHi is a function	sayHi available to import
3	Import greeting and sayHi	Imported greeting = 'Hello', sayHi function	Imported items ready to use
4	Call sayHi('Alice')	sayHi('Alice') returns 'Hello, Alice!'	Output string ready
5	console.log output	Prints 'Hello, Alice!'	User sees: Hello, Alice!

💡 Program ends after printing the greeting message.

Variable Tracker

Variable	Start	After Export	After Import	After Function Call	Final
greeting	undefined	'Hello'	'Hello'	'Hello'	'Hello'
sayHi	undefined	function	function	function	function
result	undefined	undefined	undefined	'Hello, Alice!'	'Hello, Alice!'

Key Moments - 3 Insights

Why do we use curly braces {} when importing?

Curly braces are used to import named exports exactly as they were exported. See execution_table step 3 where greeting and sayHi are imported by name.

Can we import without exporting first?

No, you must export variables or functions in the module file before importing them. Step 1 and 2 show exports happen before import in step 3.

What happens if we call sayHi before importing it?

You get an error because sayHi is undefined until imported. The variable_tracker shows sayHi is undefined at start and only defined after import.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of greeting after import?

A null

B undefined

C 'Hello'

D 'Hi'

💡 Hint

Check execution_table step 3 under Evaluation column.

At which step does the program print the greeting message?

A Step 3

B Step 5

C Step 4

D Step 2

💡 Hint

Look for console.log output in execution_table.

If we remove the export keyword from greeting, what happens when importing?

A Import fails because greeting is not exported

B Import still works normally

C greeting imports as undefined but no error

D Program prints 'Hello' anyway

💡 Hint

Refer to key_moments about needing export before import.

Concept Snapshot

ES Modules let you share code between files.
Use 'export' to share variables or functions.
Use 'import {name}' to bring them in.
Curly braces import named exports.
Run Node.js with --experimental-modules or .mjs extension.
This keeps code organized and reusable.

Full Transcript

This lesson shows how ES Modules work in Node.js. First, you create a module file where you export variables or functions using the export keyword. Then, in another file, you import those exports using import with curly braces around the names. After importing, you can use the imported items like normal variables or functions. The example exports a greeting string and a sayHi function, then imports and calls sayHi to print a greeting message. The execution table traces each step from exporting, importing, calling the function, to printing the output. The variable tracker shows how variables change from undefined to defined after export and import. Key moments clarify why curly braces are needed, why export must come before import, and what happens if you call a function before importing it. The visual quiz tests understanding of variable values after import, when output happens, and the importance of export. The snapshot summarizes the syntax and purpose of ES Modules in Node.js.

Practice

1. What is the main purpose of using export and import in Node.js ES Modules?

easy

A. To create new variables inside a file

B. To run JavaScript code faster in Node.js

C. To convert JavaScript code into another language

D. To share code between different files by exporting and importing parts

Solution

1. Step 1: Understand the role of export

   The export keyword allows parts of a file (like functions or variables) to be shared with other files.

2. Step 2: Understand the role of import

   The import keyword is used to bring those shared parts into another file to use them.

3. Final Answer:

   To share code between different files by exporting and importing parts -> Option D

4. Quick Check:

   Export and import = share code [OK]

Hint: Export shares code, import uses it elsewhere [OK]

Common Mistakes:

• Thinking export/import changes code speed
• Confusing export with variable creation
• Believing export/import converts languages

2. Which of the following is the correct syntax to export a function named greet in an ES Module file?

easy

A. export function greet() {}

B. module.exports = greet;

C. export = greet;

D. exports.greet = function() {}

Solution

1. Step 1: Identify ES Module export syntax

   In ES Modules, use export function functionName() {} to export a function.

2. Step 2: Check other options for CommonJS syntax

   Options B and D use CommonJS style, not ES Modules. export = greet; is invalid syntax.

3. Final Answer:

   export function greet() {} -> Option A

4. Quick Check:

   ES Modules export function = export function [OK]

Hint: Use 'export function' for ES Modules exports [OK]

Common Mistakes:

• Using CommonJS syntax in ES Modules
• Writing invalid export syntax
• Confusing export default with named export

3. Given the following files, what will be logged when running node main.js?

// utils.js
export const value = 5;
export function double(x) { return x * 2; }

// main.js
import { value, double } from './utils.js';
console.log(double(value));

medium

A. 10

B. 5

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand the imports and exports

   The file utils.js exports a constant value = 5 and a function double that multiplies input by 2.

2. Step 2: Trace the code in main.js

   It imports value and double, then calls double(value) which is double(5), returning 10.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   double(5) = 10 [OK]

Hint: Import exports correctly, then call functions with values [OK]

Common Mistakes:

• Forgetting to add .js extension in import
• Confusing export default with named exports
• Expecting value instead of double(value)

4. What is the error in the following code snippet?

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

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

medium

A. Function add is not exported correctly

B. Cannot import named exports with curly braces

C. Missing file extension in import statement

D. Using CommonJS syntax in ES Modules

Solution

1. Step 1: Check import statement syntax

   The import statement uses import { add } from './math'; but misses the .js extension required in Node.js ES Modules.

2. Step 2: Confirm export syntax is correct

   The function add is correctly exported with export function add(), so no error there.

3. Final Answer:

   Missing file extension in import statement -> Option C

4. Quick Check:

   Node.js ES Modules need file extensions [OK]

Hint: Always include .js extension in ES Module imports [OK]

Common Mistakes:

• Omitting file extensions in import paths
• Confusing CommonJS and ES Module syntax
• Assuming named exports don't use curly braces

5. You have two files:

// data.js
const secret = 'hidden';
export const visible = 'shown';
export default function getSecret() { return secret; }

// index.js
import getSecret, { visible } from './data.js';
console.log(visible);
console.log(getSecret());

What will be the output when running node index.js?

hard

A. SyntaxError due to mixed import syntax

B. shownhidden

C. shownundefined

D. hiddenshown

Solution

1. Step 1: Understand default and named exports

   getSecret is the default export function returning secret. visible is a named export with value 'shown'.

2. Step 2: Analyze import and console.log calls

   import getSecret, { visible } correctly imports default and named exports. Logging visible prints 'shown'. Calling getSecret() returns 'hidden'.

3. Final Answer:

   shown
   hidden -> Option B

4. Quick Check:

   Default + named import works = shown, hidden [OK]

Hint: Default import first, named imports in braces [OK]

Common Mistakes:

• Mixing default and named imports incorrectly
• Expecting secret variable to be exported directly
• Confusing order of import syntax