Exporting values in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this ES module export-import code?

Consider two files:
module.js:

export const a = 5;
export const b = 10;

main.js:

import { a, b } from './module.js';
console.log(a + b);

What will be printed when running main.js?

Javascript

export const a = 5;
export const b = 10;

// In main.js
import { a, b } from './module.js';
console.log(a + b);

A NaN

B undefined

C 15

D ReferenceError

💡 Hint

Remember that named exports can be imported by their exact names.

The variables 'a' and 'b' are exported and imported correctly. Their values 5 and 10 add up to 15, which is printed.

❓ Predict Output

intermediate

What does this default export import print?

Given
module.js:

const greeting = 'Hello World';
export default greeting;

main.js:

import greet from './module.js';
console.log(greet);

What will be the output when running main.js?

Javascript

const greeting = 'Hello World';
export default greeting;

// In main.js
import greet from './module.js';
console.log(greet);

A Hello World

B undefined

C ReferenceError

D greet

💡 Hint

Default exports can be imported with any name.

The default export is the string 'Hello World'. It is imported as 'greet' and logged, so output is 'Hello World'.

❓ Predict Output

advanced

What error does this code produce?

Look at this code in module.js:

export const x = 10;
export default 20;

And this in main.js:

import { x, default as y } from './module.js';
console.log(x + y);

What happens when running main.js?

Javascript

export const x = 10;
export default 20;

// In main.js
import { x, default as y } from './module.js';
console.log(x + y);

A SyntaxError

B TypeError

C ReferenceError

D 30

💡 Hint

You cannot import default export using named import syntax.

The syntax 'import { default as y }' is invalid. Default exports must be imported without curly braces or renamed differently.

❓ Predict Output

advanced

What is the output of this re-exporting code?

Given three files:
file1.js:

export const num = 7;

file2.js:

export { num } from './file1.js';

main.js:

import { num } from './file2.js';
console.log(num);

What will be printed when running main.js?

Javascript

// file1.js
export const num = 7;

// file2.js
export { num } from './file1.js';

// main.js
import { num } from './file2.js';
console.log(num);

A ReferenceError

B 7

C undefined

D TypeError

💡 Hint

Re-exporting passes the export through another module.

The variable 'num' is exported from file1.js, re-exported by file2.js, and imported in main.js. The value 7 is logged.

❓ Predict Output

expert

What is the output of this dynamic import code?

Consider this code in main.js:

async function load() {
  const module = await import('./module.js');
  console.log(module.value);
}
load();

And module.js:

export const value = 42;

What will be printed when running main.js with Node.js supporting ES modules?

Javascript

async function load() {
  const module = await import('./module.js');
  console.log(module.value);
}
load();

A ReferenceError

B undefined

C SyntaxError

D 42

💡 Hint

Dynamic import returns a promise resolving to the module object.

The dynamic import loads the module asynchronously. The exported 'value' is 42, which is logged.