Importing values in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the default export from the module.

Javascript

import [1] from './module.js';
console.log(value);

Drag options to blanks, or click blank then click option'

Avalue

B{value}

C* as value

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces for default import.

Using '* as' syntax for default import.

To import the default export, use import value from './module.js';.

2fill in blank

medium

Complete the code to import a named export called 'value' from the module.

Javascript

import [1] from './module.js';
console.log(value);

Drag options to blanks, or click blank then click option'

A* as value

Bvalue

C{value}

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting curly braces for named import.

Using default import syntax for named exports.

Named exports must be imported using curly braces, like import {value} from './module.js';.

3fill in blank

hard

Fix the error in the import statement to import all exports as an object named 'utils'.

Javascript

import [1] from './utils.js';
console.log(utils.doSomething());

Drag options to blanks, or click blank then click option'

A* as utils

B{utils}

Cdefault

Dutils

Attempts:

3 left

💡 Hint

Common Mistakes

Using default import syntax for all exports.

Using curly braces with '* as' syntax.

To import all exports as an object, use import * as utils from './utils.js';.

4fill in blank

hard

Fill both blanks to import 'value' and 'count' named exports from the module.

Javascript

import [1] from './data.js';
import [2] from './data.js';
console.log(value, count);

Drag options to blanks, or click blank then click option'

A{value}

B{count}

Cvalue

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting curly braces for named imports.

Trying to import multiple named exports without braces.

Multiple named imports must be inside one pair of curly braces separated by commas, but here blanks are separate so each blank is one named import with braces.

5fill in blank

hard

Fill all three blanks to import the default export as 'main', and named exports 'value' and 'count' from the module.

Javascript

import [1], [2] from './module.js';
console.log(main, value, count);

Drag options to blanks, or click blank then click option'

Amain

B{value, count}

C{value}

D{count}

Attempts:

3 left

💡 Hint

Common Mistakes

Putting named imports before default import.

Using multiple curly braces for named imports.

When importing default and named exports together, default import comes first, then named imports inside curly braces.