Importing values in Javascript - Mini Project: Build & Apply

Importing values

📖 Scenario: You are building a small JavaScript project that uses values from another file. This is common when you want to organize your code and share data between files.

🎯 Goal: You will create a file with some values, then import those values into another file and use them.

📋 What You'll Learn

Create a JavaScript file named data.js that exports a constant value.

Create a JavaScript file named main.js that imports the constant from data.js.

Use the imported value in main.js by printing it to the console.

💡 Why This Matters

🌍 Real World

In real projects, you often split code into multiple files and import values or functions to keep code clean and reusable.

💼 Career

Understanding how to import and export values is essential for working with modern JavaScript frameworks and libraries used in web development jobs.

1

Create data.js with an exported constant

Create a file named data.js and write a line that exports a constant called greeting with the value 'Hello, world!' using export const greeting = 'Hello, world!';.

Javascript

# Your code here

Need a hint?

Use export const greeting = 'Hello, world!'; to export the value.

2

Create main.js and import the constant

In a new file named main.js, write a line that imports greeting from ./data.js using import { greeting } from './data.js';.

Javascript

# Your code here

Need a hint?

Use import { greeting } from './data.js'; to import the value.

3

Use the imported greeting in main.js

Add a line in main.js that prints the imported greeting to the console using console.log(greeting);.

Javascript

import { greeting } from './data.js';
# Your code here

Need a hint?

Use console.log(greeting); to show the value in the console.

4

Run main.js to see the output

Run main.js in a JavaScript environment that supports modules (like Node.js with node --experimental-modules main.js or a browser with modules) and confirm the output is Hello, world!.

Javascript

import { greeting } from './data.js';
console.log(greeting);
# Your code here

Need a hint?

Make sure you run the file in an environment that supports ES modules.