Default exports in Javascript - Mini Project: Build & Apply

Default exports

📖 Scenario: You are building a small JavaScript module system where one module exports a default function, and another module imports and uses it.

🎯 Goal: Create a module that exports a default function, then import and use that function in another file.

📋 What You'll Learn

Create a JavaScript file named greet.js that exports a default function called greet.

The greet function should return the string 'Hello, world!'.

Create another JavaScript file named app.js that imports the default export from greet.js.

Call the imported function and print its return value using console.log.

💡 Why This Matters

🌍 Real World

Default exports are used to share one main value or function from a JavaScript module, making it easy to import and use in other parts of an application.

💼 Career

Understanding default exports is essential for working with modern JavaScript frameworks and libraries, as well as organizing code in professional projects.

1

Create the default export function

Create a file named greet.js and write a default export function called greet that returns the string 'Hello, world!'.

Javascript

// Your code here

Need a hint?

Use export default function greet() { return 'Hello, world!'; } to export the function.

2

Import the default export

In a new file named app.js, import the default export from greet.js using the name greet.

Javascript

// Your code here

Need a hint?

Use import greet from './greet.js'; to import the default export.

3

Call the imported function

In app.js, call the imported greet function and store the result in a variable named message.

Javascript

import greet from './greet.js';

// Your code here

Need a hint?

Call the function with greet() and assign it to message.

4

Print the message

In app.js, print the message variable using console.log.

Javascript

import greet from './greet.js';

const message = greet();

// Your code here

Need a hint?

Use console.log(message); to print the message.