Default exports in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this default export import?

Consider two files:

module.js:

export default function greet() { return 'Hello!'; }

main.js:

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

What will be printed when main.js runs?

Javascript

export default function greet() { return 'Hello!'; }

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

A undefined

B Hello!

C TypeError: greet is not a function

D SyntaxError: Unexpected token export

💡 Hint

Default exports can be imported with any name and used directly.

The default export is a function named greet. Importing it as greet allows calling greet() which returns 'Hello!'.

❓ Predict Output

intermediate

What happens if you import a default export with curly braces?

Given

module.js:

export default 42;

and

main.js:

import { default } from './module.js';
console.log(default);

What will happen when running main.js?

Javascript

export default 42;

import { default } from './module.js';
console.log(default);

A SyntaxError: Unexpected token default

B undefined

C 42

D ReferenceError: default is not defined

💡 Hint

Default exports are imported without curly braces.

You cannot import a default export using curly braces. This causes a syntax error.

🔧 Debug

advanced

Why does this default export import cause a runtime error?

Look at these files:

module.js:

const value = 100;
export default value;

main.js:

import val from './module.js';
console.log(val());

What error will occur when running main.js and why?

Javascript

const value = 100;
export default value;

import val from './module.js';
console.log(val());

A SyntaxError: Unexpected token import

B 100

C ReferenceError: val is not defined

D TypeError: val is not a function

💡 Hint

Check what val actually is and how it is used.

The default export is a number 100, not a function. Calling val() causes a TypeError.

📝 Syntax

advanced

Which import statement correctly imports the default export?

Given

module.js:

export default class Person {}

Which import statement in main.js is correct?

Javascript

export default class Person {}

A import Person from './module.js';

B import { Person } from './module.js';

C import * as Person from './module.js';

D import default Person from './module.js';

💡 Hint

Default exports are imported without braces and without the keyword default.

Option A correctly imports the default export as Person. Option A tries to import a named export which does not exist. Option A imports an object with all exports, not the default directly. Option A is invalid syntax.

🚀 Application

expert

What is the output of this combined default and named export import?

Consider

module.js:

export default function() { return 'default'; }
export const named = () => 'named';

main.js:

import def, { named } from './module.js';
console.log(def());
console.log(named());

What will be printed when running main.js?

Javascript

export default function() { return 'default'; }
export const named = () => 'named';

import def, { named } from './module.js';
console.log(def());
console.log(named());

A

named
default

B SyntaxError: Unexpected token import

C

default
named

D TypeError: def is not a function

💡 Hint

Default and named exports can be imported together with correct syntax.

The default export is an unnamed function returning 'default'. The named export is a function returning 'named'. Both are called and logged in order.