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.

Practice

1. What is the correct way to import a named export calculate from a file math.js?

easy

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

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

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

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

Solution

1. Step 1: Understand named imports syntax

   Named exports must be imported using curly braces around the exact exported name.

2. Step 2: Match syntax with example

   The syntax import { calculate } from './math.js'; correctly imports the named export calculate.

3. Final Answer:

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

4. Quick Check:

   Named import uses curly braces [OK]

Hint: Use curly braces for named imports, no braces for default [OK]

Common Mistakes:

• Using default import syntax for named exports
• Forgetting curly braces around named imports
• Trying to access named export as property after import

2. Which of the following is the correct syntax to import the default export from utils.js?

easy

A. import { default } from './utils.js';

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

C. import utils from { './utils.js' };

D. import utils from './utils.js';

Solution

1. Step 1: Recall default import syntax

   Default exports are imported without curly braces using any name you choose.

2. Step 2: Identify correct syntax

   import utils from './utils.js'; correctly imports the default export.

3. Final Answer:

   import utils from './utils.js'; -> Option D

4. Quick Check:

   Default import no braces [OK]

Hint: Default imports have no braces, named imports do [OK]

Common Mistakes:

• Using curly braces for default import
• Incorrect braces placement
• Using * as for default import

3. Given export const name = 'Alice'; in person.js, what will be the output of this code?

import { name } from './person.js';
console.log(name);

medium

A. Alice

B. ReferenceError

C. undefined

D. null

Solution

1. Step 1: Understand named export and import

   The variable name is exported as a named export and imported correctly with curly braces.

2. Step 2: Check the logged value

   Since name is 'Alice', console.log(name); outputs 'Alice'.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   Named import logs exported value [OK]

Hint: Named import logs exported value directly [OK]

Common Mistakes:

• Forgetting curly braces causing ReferenceError
• Expecting default import without braces
• Confusing undefined with missing import

4. What is wrong with this import statement?

import { sum } from './math.js'
console.log(sum(2, 3));

Assuming sum is a default export in math.js.

medium

A. Missing semicolon after import

B. Wrong file path

C. Using curly braces for default export import

D. sum is not a function

Solution

1. Step 1: Identify export type

   The problem states sum is a default export, so it should be imported without curly braces.

2. Step 2: Check import syntax

   Using curly braces imports named exports, so import { sum } is incorrect for default export.

3. Final Answer:

   Using curly braces for default export import -> Option C

4. Quick Check:

   Default export no braces [OK]

Hint: Default export imports never use braces [OK]

Common Mistakes:

• Confusing default and named imports
• Ignoring export type in import
• Assuming semicolon is mandatory for correctness

5. You have two files:

// colors.js
export const red = '#FF0000';
export const blue = '#0000FF';
export default 'colors';

// app.js
import colors, { red, green } from './colors.js';
console.log(colors, red, green);

What will happen when running app.js?

hard

A. SyntaxError due to invalid import

B. Logs: colors #FF0000 undefined

C. Logs: undefined #FF0000 undefined

D. ReferenceError: green is not defined

Solution

1. Step 1: Analyze exports in colors.js

   There is a default export 'colors' and named exports 'red' and 'blue'. No 'green' export exists.

2. Step 2: Analyze import statement in app.js

   It imports default as colors and named red, but green does not exist, causing a SyntaxError during module loading.

3. Final Answer:

   SyntaxError due to invalid import -> Option A

4. Quick Check:

   Missing named export causes import error [OK]

Hint: Missing named exports cause import errors [OK]

Common Mistakes:

• Thinking missing named import becomes undefined
• Confusing default and named imports
• Expecting ReferenceError at runtime