Module scope in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of variable inside and outside module

Consider the following JavaScript module code. What will be the output when running this code in a modern ES module environment?

Javascript

const secret = 'hidden';
console.log(secret);
{
  const secret = 'inside block';
  console.log(secret);
}
console.log(secret);

A

"hidden"
"inside block"
"hidden"

B

"hidden"
"hidden"
"hidden"

C ReferenceError: secret is not defined

D

"inside block"
"inside block"
"inside block"

💡 Hint

Think about how block scope works with const inside modules.

The variable 'secret' declared with const at the top is accessible in the module scope. Inside the block, a new 'secret' variable shadows the outer one. So the first console.log prints 'hidden', the second prints 'inside block', and the last prints 'hidden' again.

❓ Predict Output

intermediate

Effect of top-level await on module scope

What will be the output of this ES module code snippet?

Javascript

const data = await Promise.resolve('loaded');
console.log(data);

A SyntaxError: await is only valid in async functions

B "loaded"

C ReferenceError: data is not defined

D Promise { 'loaded' }

💡 Hint

Modern ES modules support top-level await.

In ES modules, top-level await is allowed. The code waits for the Promise to resolve and then logs the resolved value 'loaded'.

🔧 Debug

advanced

Why does this module variable cause an error?

This code throws an error when run as an ES module. What is the cause?

Javascript

var count = 0;
function increment() {
  count++;
}
export { increment };
console.log(count);
increment();
console.log(count);

A No error; output is 0 then 1

B ReferenceError because 'count' is not exported

C SyntaxError due to missing export of 'count'

D No error; output is 0 then 0

💡 Hint

Variables inside a module are private unless exported, but accessible within the module.

The variable 'count' is private to the module but accessible inside it. The code logs 0, then increments count, then logs 1. No error occurs.

❓ Predict Output

advanced

Module scope and global scope interaction

What will be the output of this code when run as an ES module?

Javascript

globalThis.value = 10;
const value = 20;
console.log(value);
console.log(globalThis.value);

A

20
20

B

10
20

C ReferenceError: value is not defined

D

20
10

💡 Hint

Module scope variables do not affect globalThis unless explicitly assigned.

The module variable 'value' is 20 and shadows the globalThis.value which is 10. So console.log(value) prints 20, and console.log(globalThis.value) prints 10.

🧠 Conceptual

expert

Why does this module code not pollute global scope?

In ES modules, variables declared at the top level do not become global variables. Why is this behavior important?

A It makes variables accessible from any script on the page automatically.

B It forces all variables to be exported explicitly.

C It prevents accidental overwriting of global variables and keeps modules self-contained.

D It disables variable declarations outside functions.

💡 Hint

Think about how large projects avoid conflicts.

Module scope keeps variables private to the module, avoiding conflicts and accidental overwrites in the global environment. This helps maintain clean, modular code.