Why modules are used in Javascript - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use modules in JavaScript?

Why do developers use modules in JavaScript?

A To convert JavaScript into another language automatically

B To organize code into reusable pieces and avoid name conflicts

C To prevent the code from running in browsers

D To make the code run faster by skipping parsing

💡 Hint

Think about how breaking code into parts helps manage big projects.

Modules help organize code into smaller, reusable parts and avoid naming conflicts by keeping variables and functions private to each module.

❓ Predict Output

intermediate

Output of importing a module

What will be the output of this JavaScript code using modules?

Javascript

export const greeting = 'Hello';

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

A ReferenceError

B undefined

C SyntaxError

D Hello

💡 Hint

Imported variables keep their exported values.

The variable greeting is exported and then imported correctly, so logging it prints 'Hello'.

❓ Predict Output

advanced

What happens if you import a module twice?

Consider this code:

import { value } from './mod.js';
import { value as val2 } from './mod.js';
console.log(value, val2);

What is the output?

A 42 42

B 42 undefined

C ReferenceError

D SyntaxError

💡 Hint

Modules are cached and importing multiple times returns the same values.

Importing the same module multiple times does not reload it. Both imports get the same exported value, so both variables hold 42.

🧠 Conceptual

advanced

Why do modules help avoid global scope pollution?

How do JavaScript modules help prevent global scope pollution?

A By running code only once per browser session

B By automatically renaming all variables globally

C By keeping variables and functions inside the module scope instead of the global scope

D By disabling global variables entirely

💡 Hint

Think about where variables live when you use modules.

Modules create their own scope, so variables and functions declared inside do not appear in the global scope, avoiding conflicts.

❓ Predict Output

expert

Output of circular module imports

Given two modules:

// a.js
import { bValue } from './b.js';
export const aValue = 'A';
console.log('a.js:', bValue);

// b.js
import { aValue } from './a.js';
export const bValue = 'B';
console.log('b.js:', aValue);

What will be printed when a.js is run?

A

b.js: undefined
a.js: B

B

b.js: A
a.js: B

C ReferenceError due to circular import

D

b.js: undefined
a.js: undefined

💡 Hint

Think about how JavaScript handles circular imports and initialization order.

When b.js imports aValue from a.js, aValue is not yet initialized, so it is undefined. Then bValue is exported as 'B'. When a.js logs bValue, it is 'B'.