Module scope in Javascript - Step-by-Step Execution

Concept Flow - Module scope

Start Module

↓

Declare variables/functions

↓

Variables/functions exist only inside module

↓

Export what is needed

↓

Other modules import exports

↓

Outside module, internal variables are NOT accessible

↓

End Module

Module scope means variables and functions declared inside a module are private to it, unless explicitly exported.

Execution Sample

Javascript

const secret = 42;
export const visible = 10;

console.log(secret); // inside module

// Outside module: secret is not accessible

This code shows a variable 'secret' inside a module that is not exported, so it stays private.

Execution Table

Step	Action	Variable/Function	Value/State	Accessible Outside Module?
1	Declare variable 'secret'	secret	42	No
2	Declare and export 'visible'	visible	10	Yes
3	Console log 'secret' inside module	secret	42	N/A (inside module)
4	Try to access 'secret' outside module	secret	ReferenceError	No
5	Access 'visible' outside module	visible	10	Yes

💡 Module ends; only exported variables/functions are accessible outside.

Variable Tracker

Variable	Start	After Declaration	Final
secret	undefined	42	42 (private)
visible	undefined	10	10 (exported)

Key Moments - 2 Insights

Why can't I access 'secret' outside the module?

Because 'secret' is not exported, it stays private inside the module as shown in execution_table step 4.

How do I make a variable accessible outside the module?

You must export it, like 'visible' in step 2, so other modules can import and use it.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'secret' inside the module at step 3?

A 42

B undefined

C ReferenceError

D 10

💡 Hint

Check the 'Value/State' column at step 3 in the execution_table.

At which step does 'secret' become inaccessible outside the module?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Accessible Outside Module?' column for 'secret' in execution_table.

If we export 'secret', how would the accessibility change in the table?

A 'secret' would still be inaccessible

B 'secret' would be accessible outside module

C 'visible' would become inaccessible

D No change

💡 Hint

Refer to the difference between 'secret' and 'visible' accessibility in execution_table steps 1 and 2.

Concept Snapshot

Module scope in JavaScript:
- Variables/functions declared inside a module are private by default.
- Use 'export' keyword to make them accessible outside.
- Other modules import exported items.
- Unexported items cause ReferenceError if accessed externally.
- Keeps code organized and avoids name conflicts.

Full Transcript

Module scope means that variables and functions declared inside a JavaScript module are private to that module. They cannot be accessed from outside unless explicitly exported. In the example, 'secret' is declared but not exported, so it stays private. 'visible' is exported and can be accessed from other modules. Trying to access 'secret' outside causes a ReferenceError. Exporting variables or functions is how you share code between modules. This keeps code clean and avoids conflicts.

Practice

1. What does module scope mean in JavaScript?

easy

A. All variables are global and accessible everywhere

B. Variables and functions are private to the file unless exported

C. Functions can only be used inside loops

D. Variables must be declared with var only

Solution

1. Step 1: Understand module scope concept

   Module scope means code inside a file is private unless explicitly shared.

2. Step 2: Compare options with this concept

   Only Variables and functions are private to the file unless exported correctly states variables/functions are private unless exported.

3. Final Answer:

   Variables and functions are private to the file unless exported -> Option B

4. Quick Check:

   Module scope = private unless exported [OK]

Hint: Remember: module code is private unless exported [OK]

Common Mistakes:

• Thinking all variables are global
• Confusing module scope with block scope
• Believing functions must be inside loops

2. Which of the following is the correct way to export a function named greet from a module?

easy

A. export function greet() {}

B. function export greet() {}

C. export greet() {}

D. export = greet()

Solution

1. Step 1: Recall correct export syntax

   To export a function, use export function functionName() {}.

2. Step 2: Check each option

   export function greet() {} matches the correct syntax; others are invalid or incorrect.

3. Final Answer:

   export function greet() {} -> Option A

4. Quick Check:

   Export function syntax = export function name() [OK]

Hint: Use 'export function' before function name [OK]

Common Mistakes:

• Placing export after function keyword
• Using incorrect export assignment syntax
• Missing parentheses in function declaration

3. Given this module code:

const secret = 42;
export const visible = 'hello';

console.log(typeof secret);
console.log(typeof visible);

What is the output when this module runs?

medium

A. "number" and "string"

B. "undefined" and "string"

C. "number" and "undefined"

D. ReferenceError for secret

Solution

1. Step 1: Understand variable scope and export

   Both secret and visible exist inside the module; secret is private, visible is exported.

2. Step 2: Check typeof outputs inside the same module

   Inside the module, both variables exist, so typeof secret is "number" and typeof visible is "string".

3. Final Answer:

   "number" and "string" -> Option A

4. Quick Check:

   typeof secret = number, typeof visible = string [OK]

Hint: Inside module, all declared variables exist [OK]

Common Mistakes:

• Thinking private variables are undefined inside module
• Confusing export with variable existence
• Expecting ReferenceError inside same file

4. What is wrong with this module code?

const count = 10;
export count = 20;

medium

A. Cannot export a variable twice

B. count is not declared before export

C. Syntax error: export cannot be used with assignment

D. No error, code works fine

Solution

1. Step 1: Analyze export syntax

   Export keyword cannot be used with assignment like export count = 20;. It must be export const count = 20; or export existing variables.

2. Step 2: Identify error type

   This causes a syntax error because export expects declaration or named export, not assignment.

3. Final Answer:

   Syntax error: export cannot be used with assignment -> Option C

4. Quick Check:

   Export syntax must declare or export existing variables [OK]

Hint: Export must declare or export, not assign [OK]

Common Mistakes:

• Trying to export by assignment
• Missing const/let/var with export
• Assuming export can change variable value

5. You have two modules:

// file1.js
const secret = 'hidden';
export const data = 123;

// file2.js
import { data } from './file1.js';
console.log(secret);
console.log(data);

What will happen when file2.js runs?

hard

A. Logs undefined and 123

B. Logs 'hidden' and 123

C. SyntaxError due to import

D. ReferenceError: secret is not defined

Solution

1. Step 1: Understand module scope and imports

   The variable secret is private to file1.js and not exported, so it cannot be accessed in file2.js.

2. Step 2: Predict runtime behavior

   Trying to access secret in file2.js causes a ReferenceError. The imported data logs correctly.

3. Final Answer:

   ReferenceError: secret is not defined -> Option D

4. Quick Check:

   Private variables cause ReferenceError outside module [OK]

Hint: Only exported variables are accessible in other modules [OK]

Common Mistakes:

• Assuming private variables are imported automatically
• Confusing import syntax errors with runtime errors
• Expecting undefined instead of ReferenceError