Default exports in Javascript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export the function as the default export.

Javascript

function greet() {
  console.log('Hello!');
}

export [1] greet;

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

Aconst

Bdefault

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable declaration keywords like const or let instead of 'default'.

Forgetting to write 'default' when exporting a single main value.

The keyword default is used to export a single value or function as the default export from a module.

2fill in blank

medium

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

Javascript

import [1] from './greet.js';

[1]();

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

Agreet

B{ greet }

C* as greet

D{ default }

Attempts:

3 left

💡 Hint

Common Mistakes

Using curly braces around the default import name.

Using import * as syntax for default imports.

When importing a default export, you use a simple name without curly braces.

3fill in blank

hard

Fix the error in the export statement to correctly export the default value.

Javascript

const message = 'Hi there!';

export [1] = message;

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

Adefault

Bconst

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using an equals sign (=) after export default.

Trying to declare a variable with export default.

The correct syntax for default export of a value is export default value; without an equals sign.

4fill in blank

hard

Fill both blanks to export a default arrow function and import it correctly.

Javascript

export [1] () => {
  console.log('Welcome!');
};

import greet from './welcome.js';
greet();

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

Adefault

Bfunction

Cconst

Dlet

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable declarations like const or let directly with export default without assignment.

Omitting the function keyword when exporting a function.

To export a default function expression, use export default function. The import uses the default import syntax.

5fill in blank

hard

Fill all three blanks to export a default class and import it with a new name.

Javascript

export [1] class [2] {
  constructor() {
    console.log('Created');
  }
}

import [3] from './MyClass.js';
const obj = new [3]();

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

Adefault

BMyClass

CRenamedClass

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to write default in the export statement.

Trying to import default exports with curly braces.

Using the original class name instead of the renamed import.

Use export default class MyClass to export the class. When importing, you can rename the default import to any name you want.