Loading... Login Loading... Register

JavaScript Modules and Imports Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/10

Given a module named 'utils.js', how do you import all the named exports as an object?

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Select your answer

import utils from './utils.js';

import * from './utils.js';

import { add, subtract } as utils from './utils.js';

import * as utils from './utils.js';

Question 2/10

Which of the following code snippets correctly demonstrates how to export multiple named exports?

Select your answer

export const a = 1; export const b = 2;

exports = { a: 1, b: 2 };

export default a = 1, b = 2;

export const {a = 1, b = 2};

Question 3/10

Which of the following statements will correctly import the default export and a named export from the same module?

// Assume `data.js` has:
// export default function fetchData() { /*...*/ }
// export const DATA_URL = 'https://api.example.com/data';

Select your answer

import { fetchData, DATA_URL } from './data.js';

import { default as fetchData, DATA_URL } from './data.js';

import { default, DATA_URL } from './data.js';

import fetchData, { DATA_URL } from './data.js';

Question 4/10

In JavaScript ES6 modules, which keyword is used to declare a reusable block of code that can be imported elsewhere?

Select your answer

import

include

require

export

Question 5/10

What is the main advantage of using ES6 modules over traditional scripts in HTML?

Select your answer

They eliminate the need for web servers.

They are faster to load.

They offer better scoping and avoid global namespace pollution.

They allow lazy loading of scripts.

Question 6/10

What will be the output if you try to import a non-existent named export from a module?

// data.js
export const foo = 42;

Select your answer

Undefined

No error, but the import will be null

ReferenceError

SyntaxError

Question 7/10

In a module, how can you specify a fallback for a named import that doesn't exist?

// Assuming `module.js`
export const a = 1;

Select your answer

import b from './module.js' as 2;

import { b = 2 } from './module.js';

import { b, default: 2 } from './module.js';

import b || 2 from './module.js';

Question 8/10

What is the correct syntax to import a default export from a module in JavaScript?

// Assume `myModule.js` has the following default export:
// export default function myFunction() { /*...*/ }

Select your answer

import { default as myFunction } from './myModule.js';

import * as myFunction from './myModule.js';

import myFunction from './myModule.js';

import { myFunction } from './myModule.js';

Question 9/10

Which statement correctly re-exports all content from a module 'utility.js'?

Select your answer

export all from './utility.js';

export * from './utility.js';

export * as utils from './utility.js';

reexport * from './utility.js';

Question 10/10

How can you re-export a named import in JavaScript?

// Assume 'moduleA.js' has named export 'foo'.
import { foo } from './moduleA.js';

Select your answer

export { foo };

export { foo } from './moduleA.js';

export * as foo from './moduleA.js';

export default foo;

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/10

😊 Your answer was correct 🙁 Your answer was incorrect

Given a module named 'utils.js', how do you import all the named exports as an object?

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Available answers

import utils from './utils.js';

import * from './utils.js';

import { add, subtract } as utils from './utils.js';

import * as utils from './utils.js';

To import all named exports as an object, use

import * as utils from './utils.js';

which imports all exports into an object named utils.

Question 2/10

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following code snippets correctly demonstrates how to export multiple named exports?

Available answers

export const a = 1; export const b = 2;

exports = { a: 1, b: 2 };

export default a = 1, b = 2;

export const {a = 1, b = 2};

You can export multiple named exports by using the export statement for each:

export const a = 1; export const b = 2;

Question 3/10

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following statements will correctly import the default export and a named export from the same module?

// Assume `data.js` has:
// export default function fetchData() { /*...*/ }
// export const DATA_URL = 'https://api.example.com/data';

Available answers

import { fetchData, DATA_URL } from './data.js';

import { default as fetchData, DATA_URL } from './data.js';

import { default, DATA_URL } from './data.js';

import fetchData, { DATA_URL } from './data.js';

To import both the default export and a named export, use:

import fetchData, { DATA_URL } from './data.js';

The default comes first, followed by named imports in braces.

Question 4/10

😊 Your answer was correct 🙁 Your answer was incorrect

In JavaScript ES6 modules, which keyword is used to declare a reusable block of code that can be imported elsewhere?

Available answers

import

include

require

export

The keyword export is used to declare any block of code (functions, variables, classes) that can be reused in other modules.

Question 5/10

😊 Your answer was correct 🙁 Your answer was incorrect

What is the main advantage of using ES6 modules over traditional scripts in HTML?

Available answers

They eliminate the need for web servers.

They are faster to load.

They offer better scoping and avoid global namespace pollution.

They allow lazy loading of scripts.

The main advantage of ES6 modules is better scoping which avoids polluting the global namespace. Scripts default to strict mode and each module has its own scope, unlike traditional script tags.

Question 6/10

😊 Your answer was correct 🙁 Your answer was incorrect

What will be the output if you try to import a non-existent named export from a module?

// data.js
export const foo = 42;

Available answers

Undefined

No error, but the import will be null

ReferenceError

SyntaxError

You will get a ReferenceError at runtime since the import statement does not find the specified named export.

Question 7/10

😊 Your answer was correct 🙁 Your answer was incorrect

In a module, how can you specify a fallback for a named import that doesn't exist?

// Assuming `module.js`
export const a = 1;

Available answers

import b from './module.js' as 2;

import { b = 2 } from './module.js';

import { b, default: 2 } from './module.js';

import b || 2 from './module.js';

You can specify a fallback using destructured imports with default values:

import { b = 2 } from './module.js';

Question 8/10

😊 Your answer was correct 🙁 Your answer was incorrect

What is the correct syntax to import a default export from a module in JavaScript?

// Assume `myModule.js` has the following default export:
// export default function myFunction() { /*...*/ }

Available answers

import { default as myFunction } from './myModule.js';

import * as myFunction from './myModule.js';

import myFunction from './myModule.js';

import { myFunction } from './myModule.js';

The correct syntax to import a default export from a module is

import myFunction from './myModule.js';

because the default export does not require curly braces.

Question 9/10

😊 Your answer was correct 🙁 Your answer was incorrect

Which statement correctly re-exports all content from a module 'utility.js'?

Available answers

export all from './utility.js';

export * from './utility.js';

export * as utils from './utility.js';

reexport * from './utility.js';

You can re-export all content from another module using the syntax

export * from './utility.js';

Question 10/10

😊 Your answer was correct 🙁 Your answer was incorrect

How can you re-export a named import in JavaScript?

// Assume 'moduleA.js' has named export 'foo'.
import { foo } from './moduleA.js';

Available answers

export { foo };

export { foo } from './moduleA.js';

export * as foo from './moduleA.js';

export default foo;

After importing foo, you can re-export it with

export { foo };