Exporting values in Javascript - Step-by-Step Execution

Concept Flow - Exporting values

Define value or function

↓

Export using export keyword

↓

Import in another file

↓

Use the exported value

You create a value or function, export it, then import it elsewhere to use it.

Execution Sample

Javascript

export const greeting = "Hello";

// In another file
import { greeting } from './file.js';
console.log(greeting);

Exports a constant greeting and imports it in another file to print it.

Execution Table

Step	Action	Code Line	Result/Output
1	Define constant greeting	const greeting = "Hello";	greeting = "Hello"
2	Export greeting	export { greeting };	greeting is available to import
3	Import greeting in another file	import { greeting } from './file.js';	greeting imported successfully
4	Print greeting	console.log(greeting);	Hello
5	End	No more code	Program ends

💡 All steps complete, greeting printed and program ends

Variable Tracker

Variable	Start	After Export	After Import	Final
greeting	undefined	"Hello"	"Hello"	"Hello"

Key Moments - 3 Insights

Why do we use the export keyword before a variable or function?

The export keyword makes the variable or function available to other files, as shown in step 2 of the execution_table.

What happens if we forget to import the exported value in another file?

Without import (step 3), the value is not available and using it will cause an error, so importing is necessary to access exported values.

Can we export multiple values from one file?

Yes, you can export many values by adding export before each or using export { a, b }, similar to step 2 but repeated for each value.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'greeting' after step 1?

A undefined

B null

C "Hello"

D Error

💡 Hint

Check the 'Result/Output' column for step 1 in the execution_table.

At which step does the greeting become available to other files?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' column describing export in the execution_table.

If we remove the import statement in step 3, what will happen when running step 4?

A It will cause an error

B It will print undefined

C It will print "Hello" anyway

D It will print null

💡 Hint

Refer to key_moments about what happens if import is missing.

Concept Snapshot

Exporting values in JavaScript:
- Use 'export' before variables/functions to share them.
- Import them in other files with 'import { name } from "file"'.
- Exported values can be constants, functions, or objects.
- Without import, exported values are not accessible.
- Multiple exports allowed per file.

Full Transcript

This visual execution shows how JavaScript exports values. First, a constant named greeting is defined and exported. Exporting makes it available to other files. Then, in another file, greeting is imported. Finally, greeting is printed to the console. Variables track the value of greeting through these steps. Key moments clarify why export and import are needed. The quiz tests understanding of when greeting is defined, exported, and imported, and what happens if import is missing.

Practice

1. What does the export keyword do in JavaScript modules?

easy

A. It makes variables or functions available to other files.

B. It imports code from other files.

C. It runs the code immediately.

D. It deletes variables after use.

Solution

1. Step 1: Understand the purpose of export

   The export keyword is used to share variables or functions from one file so other files can use them.

2. Step 2: Differentiate from import and execution

   import brings code in, and running code is separate; export only shares code.

3. Final Answer:

   It makes variables or functions available to other files. -> Option A

4. Quick Check:

   export shares code = A [OK]

Hint: Export means share code to other files [OK]

Common Mistakes:

• Confusing export with import
• Thinking export runs code
• Believing export deletes variables

2. Which of the following is the correct syntax to export a constant named PI?

easy

A. const PI = 3.14; export PI;

B. export const PI = 3.14;

C. export = const PI = 3.14;

D. const PI = 3.14 export;

Solution

1. Step 1: Check correct export syntax

   To export a variable while declaring it, use export const PI = 3.14;.

2. Step 2: Identify syntax errors in other options

   const PI = 3.14; export PI; (const PI = 3.14; export PI;) uses incorrect export syntax after declaration (needs export { PI };); B and D have invalid syntax.

3. Final Answer:

   export const PI = 3.14; -> Option B

4. Quick Check:

   export const PI = 3.14; = C [OK]

Hint: Put export before variable or function declaration [OK]

Common Mistakes:

• Placing export after variable declaration
• Using incorrect export assignment syntax
• Missing semicolons causing confusion

3. Given this code in math.js:

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

export const number = 5;

What will be the output of this code in app.js?

import { add, number } from './math.js';
console.log(add(number, 10));

medium

A. 15

B. 510

C. NaN

D. SyntaxError

Solution

1. Step 1: Understand imported values

   The function add adds two numbers, and number is 5.

2. Step 2: Calculate the function call

   Calling add(5, 10) returns 15.

3. Final Answer:

   15 -> Option A

4. Quick Check:

   5 + 10 = 15 [OK]

Hint: Add imported values as normal functions [OK]

Common Mistakes:

• Treating number as string causing concatenation
• Forgetting to import both values
• Syntax errors from wrong import path

4. What is wrong with this code in utils.js?

function greet() {
  return 'Hello';
}

export greet;

medium

A. Missing export keyword before function declaration

B. No error; code is correct

C. Incorrect export syntax; should be export { greet };

D. Function greet cannot be exported

Solution

1. Step 1: Identify export syntax error

   The line export greet; is invalid syntax in JavaScript modules.

2. Step 2: Correct export syntax for existing functions

   To export an already declared function, use export { greet };.

3. Final Answer:

   Incorrect export syntax; should be export { greet }; -> Option C

4. Quick Check:

   Export existing function with braces = D [OK]

Hint: Use export { name } for existing declarations [OK]

Common Mistakes:

• Trying to export without braces
• Confusing export declaration with export statement
• Assuming export greet; is valid

5. You want to export multiple values from a file: a function calculate, a constant PI, and a variable radius. Which is the best way to export all three at once?

hard

A. export calculate, PI, radius;

B. export default calculate, PI, radius;

C. export const calculate, PI, radius;

D. export { calculate, PI, radius };

Solution

1. Step 1: Understand exporting multiple named values

   To export several named values together, use export { name1, name2, name3 };.

2. Step 2: Eliminate incorrect syntax options

   Options A, C, and D are invalid syntax; A lacks braces, C misuses export const for multiple, D is for default export only.

3. Final Answer:

   export { calculate, PI, radius }; -> Option D

4. Quick Check:

   Use braces to export multiple names = B [OK]

Hint: Use export { a, b, c } to export many values [OK]

Common Mistakes:

• Trying to export multiple values without braces
• Using export default for multiple named exports
• Mixing const and export syntax incorrectly