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

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

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

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

Hint

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

Practice

1. What is the correct way to import a named export calculate from a file math.js?

easy

A. import './math.js'.calculate;

B. import { calculate } from './math.js';

C. import * as calculate from './math.js';

D. import calculate from './math.js';

Solution

1. Step 1: Understand named imports syntax

   Named exports must be imported using curly braces around the exact exported name.

2. Step 2: Match syntax with example

   The syntax import { calculate } from './math.js'; correctly imports the named export calculate.

3. Final Answer:

   import { calculate } from './math.js'; -> Option B

4. Quick Check:

   Named import uses curly braces [OK]

Hint: Use curly braces for named imports, no braces for default [OK]

Common Mistakes:

• Using default import syntax for named exports
• Forgetting curly braces around named imports
• Trying to access named export as property after import

2. Which of the following is the correct syntax to import the default export from utils.js?

easy

A. import { default } from './utils.js';

B. import * as utils from './utils.js';

C. import utils from { './utils.js' };

D. import utils from './utils.js';

Solution

1. Step 1: Recall default import syntax

   Default exports are imported without curly braces using any name you choose.

2. Step 2: Identify correct syntax

   import utils from './utils.js'; correctly imports the default export.

3. Final Answer:

   import utils from './utils.js'; -> Option D

4. Quick Check:

   Default import no braces [OK]

Hint: Default imports have no braces, named imports do [OK]

Common Mistakes:

• Using curly braces for default import
• Incorrect braces placement
• Using * as for default import

3. Given export const name = 'Alice'; in person.js, what will be the output of this code?

import { name } from './person.js';
console.log(name);

medium

A. Alice

B. ReferenceError

C. undefined

D. null

Solution

1. Step 1: Understand named export and import

   The variable name is exported as a named export and imported correctly with curly braces.

2. Step 2: Check the logged value

   Since name is 'Alice', console.log(name); outputs 'Alice'.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   Named import logs exported value [OK]

Hint: Named import logs exported value directly [OK]

Common Mistakes:

• Forgetting curly braces causing ReferenceError
• Expecting default import without braces
• Confusing undefined with missing import

4. What is wrong with this import statement?

import { sum } from './math.js'
console.log(sum(2, 3));

Assuming sum is a default export in math.js.

medium

A. Missing semicolon after import

B. Wrong file path

C. Using curly braces for default export import

D. sum is not a function

Solution

1. Step 1: Identify export type

   The problem states sum is a default export, so it should be imported without curly braces.

2. Step 2: Check import syntax

   Using curly braces imports named exports, so import { sum } is incorrect for default export.

3. Final Answer:

   Using curly braces for default export import -> Option C

4. Quick Check:

   Default export no braces [OK]

Hint: Default export imports never use braces [OK]

Common Mistakes:

• Confusing default and named imports
• Ignoring export type in import
• Assuming semicolon is mandatory for correctness

5. You have two files:

// colors.js
export const red = '#FF0000';
export const blue = '#0000FF';
export default 'colors';

// app.js
import colors, { red, green } from './colors.js';
console.log(colors, red, green);

What will happen when running app.js?

hard

A. SyntaxError due to invalid import

B. Logs: colors #FF0000 undefined

C. Logs: undefined #FF0000 undefined

D. ReferenceError: green is not defined

Solution

1. Step 1: Analyze exports in colors.js

   There is a default export 'colors' and named exports 'red' and 'blue'. No 'green' export exists.

2. Step 2: Analyze import statement in app.js

   It imports default as colors and named red, but green does not exist, causing a SyntaxError during module loading.

3. Final Answer:

   SyntaxError due to invalid import -> Option A

4. Quick Check:

   Missing named export causes import error [OK]

Hint: Missing named exports cause import errors [OK]

Common Mistakes:

• Thinking missing named import becomes undefined
• Confusing default and named imports
• Expecting ReferenceError at runtime