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.

Practice

1. What is a default export in JavaScript modules?

easy

A. A single main value or function exported from a file without curly braces when importing.

B. Multiple named values exported from a file using curly braces when importing.

C. A way to export variables only, not functions.

D. A special export that requires double curly braces when importing.

Solution

1. Step 1: Understand export types

   JavaScript modules can export multiple named items or one default item.

2. Step 2: Identify default export usage

   Default export is a single main export imported without curly braces.

3. Final Answer:

   A single main value or function exported from a file without curly braces when importing. -> Option A

4. Quick Check:

   Default export = single main export without braces [OK]

Hint: Default exports import without braces, named exports need braces [OK]

Common Mistakes:

• Confusing default export with named exports
• Using curly braces when importing default export
• Thinking default export can export multiple items

2. Which of the following is the correct syntax to export a default function named greet?

easy

A. default export function greet() {}

B. export function default greet() {}

C. export default function greet() {}

D. export greet default function() {}

Solution

1. Step 1: Recall default export syntax

   The correct syntax is to write export default followed by the function declaration.

2. Step 2: Check each option

   Only export default function greet() {} matches the correct syntax: export default function greet() {}.

3. Final Answer:

   export default function greet() {} -> Option C

4. Quick Check:

   export default + function name = correct syntax [OK]

Hint: Remember: 'export default' comes before function name [OK]

Common Mistakes:

• Placing 'default' after function name
• Using 'default export' instead of 'export default'
• Mixing order of keywords

3. Given the file math.js with content:

export default function add(a, b) { return a + b; }

What will be the output of this code?

import add from './math.js';
console.log(add(3, 4));

medium

A. undefined

B. 7

C. TypeError

D. NaN

Solution

1. Step 1: Understand import of default export

   The function add is exported as default and imported without braces correctly.

2. Step 2: Evaluate function call

   Calling add(3, 4) returns 3 + 4 = 7, which is logged.

3. Final Answer:

   7 -> Option B

4. Quick Check:

   Default import calls function correctly = 7 [OK]

Hint: Default export imports as named variable, call normally [OK]

Common Mistakes:

• Using curly braces when importing default export
• Expecting undefined because of wrong import
• Confusing default export with named export

4. Identify the error in this code snippet:

import { greet } from './hello.js';
export default function greet() { return 'Hi'; }

medium

A. Cannot import default export using curly braces.

B. Function cannot be named greet when exported default.

C. Missing semicolon after export statement.

D. Default export must be a variable, not a function.

Solution

1. Step 1: Check import syntax

   Importing default export must be done without curly braces, but here curly braces are used.

2. Step 2: Confirm export syntax

   Exporting default function named greet is valid, so no error there.

3. Final Answer:

   Cannot import default export using curly braces. -> Option A

4. Quick Check:

   Default import no braces, braces cause error [OK]

Hint: Default exports import without braces; braces mean named import [OK]

Common Mistakes:

• Using curly braces to import default export
• Thinking default export must be unnamed
• Assuming semicolon is mandatory for export

5. You have two files:

// file1.js
const value = 42;
export default value;

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

How can you change file1.js to export both value as default and a named constant name with value 'Answer'?

hard

A. Cannot export default and named exports together in one file.

B. Change default export to named export for value and export name as default.

C. Use export default { value, name }; to export both.

D. Add export const name = 'Answer'; alongside default export.

Solution

1. Step 1: Understand export combinations

   JavaScript allows one default export and multiple named exports in the same file.

2. Step 2: Add named export alongside default

   Adding export const name = 'Answer'; exports a named constant while keeping default export.

3. Final Answer:

   Add export const name = 'Answer'; alongside default export. -> Option D

4. Quick Check:

   Default + named exports can coexist [OK]

Hint: Default export plus named exports can be in same file [OK]

Common Mistakes:

• Thinking default and named exports cannot coexist
• Trying to export multiple defaults
• Using object as default export to hold multiple values