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.

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