Importing values in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this ES module import?

Given the following module mathUtils.js exporting a constant, what will be logged by main.js?

Javascript

/* mathUtils.js */
export const pi = 3.14;

/* main.js */
import { pi } from './mathUtils.js';
console.log(pi);

A null

B undefined

C ReferenceError

D 3.14

💡 Hint

Remember that named exports can be imported with curly braces.

The constant pi is exported and imported correctly, so logging pi outputs 3.14.

❓ Predict Output

intermediate

What happens if you import a non-exported value?

Consider this module data.js and the import in app.js:

Javascript

/* data.js */
const secret = 'hidden';
export const visible = 'shown';

/* app.js */
import { secret } from './data.js';
console.log(secret);

A SyntaxError

B undefined

C TypeError

D hidden

💡 Hint

Only exported values can be imported.

Trying to import a non-exported value causes a syntax error because the export does not exist.

❓ Predict Output

advanced

What is the output when importing a default export?

Look at these two files:

Javascript

/* greet.js */
export default function greet() {
  return 'Hello!';
}

/* index.js */
import greet from './greet.js';
console.log(greet());

A undefined

B Hello!

C TypeError

D SyntaxError

💡 Hint

Default exports are imported without curly braces.

The default export is a function greet, which is imported and called correctly, printing 'Hello!'.

❓ Predict Output

advanced

What error occurs when mixing default and named imports incorrectly?

Given this module and import:

Javascript

/* utils.js */
export default function() { return 'default'; }
export const named = 'named';

/* app.js */
import { default as def, named } from './utils.js';
console.log(def(), named);

A ReferenceError

B TypeError

C default named

D SyntaxError

💡 Hint

You can rename default import using named import syntax.

The syntax imports the default export as 'def' and the named export 'named'. Calling def() returns 'default' and named is 'named'.

🧠 Conceptual

expert

Which option correctly imports all exports as an object?

You want to import everything from module.js as a single object named mod. Which import statement is correct?

A import * as mod from './module.js';

B import mod from './module.js';

C import { * as mod } from './module.js';

D import { mod } from './module.js';

💡 Hint

Use the star (*) syntax to import all exports as an object.

Option A correctly imports all exports as an object named mod. Option A imports the default export only. Option A and D are invalid syntax.