Importing values in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the import statement in JavaScript?

The import statement is used to bring functions, objects, or values from another file or module into the current file so you can use them.

beginner

How do you import a single named value called <code>sum</code> from a module named <code>math.js</code>?

You write: <br><code>import { sum } from './math.js';</code><br>This imports only the <code>sum</code> function or value from the <code>math.js</code> file.

intermediate

What is the difference between a default import and a named import?

A default import brings in the main exported value from a module without curly braces, like <code>import myFunc from './file.js';</code>. Named imports require curly braces and import specific exported values, like <code>import { myFunc } from './file.js';</code>.

intermediate

How do you import all exported values from a module as a single object?

You use the syntax: <br><code>import * as utils from './utils.js';</code><br>This imports everything exported from <code>utils.js</code> as properties of the <code>utils</code> object.

beginner

Can you import values from a module without specifying the file extension?

In modern JavaScript environments, you usually need to include the file extension like .js when importing modules, especially in browsers. Some tools like bundlers may allow omitting it.

Which syntax correctly imports a default export named calculate from math.js?

A import calculate from './math.js';

B import { calculate } from './math.js';

C import * as calculate from './math.js';

D import './math.js';

Default exports are imported without curly braces.

How do you import only the named export multiply from math.js?

A import { multiply } from './math.js';

B import multiply from 'math.js';

C import * as multiply from './math.js';

D import multiply from './math.js';

Named exports require curly braces around the name.

What does this import statement do? import * as helpers from './helpers.js';

A Imports nothing

B Imports the default export as helpers

C Imports only the named export helpers

D Imports all exports as properties of the helpers object

The * as syntax imports all exports as an object.

Which is true about importing modules in JavaScript?

A You can import values without specifying the file path.

B You can import multiple named exports in one statement.

C You must always use curly braces for default imports.

D You cannot import from local files.

You can import multiple named exports like: import { a, b } from './file.js';

What happens if you try to import a named export that does not exist in the module?

A JavaScript throws an error at compile time.

B The import works but the value is undefined.

C JavaScript throws an error at runtime.

D The module exports all values by default.

Trying to import a non-existent named export causes a runtime error.

Explain how to import a default export and a named export from the same module.

Think about how you write import statements with and without curly braces.

Describe the difference between importing a single named export and importing all exports as an object.

Consider the use of curly braces and the * as syntax.