Importing values in Javascript - Step-by-Step Execution

Concept Flow - Importing values

Start

↓

Import statement encountered

↓

Look for exported values in module

↓

Retrieve requested values

↓

Assign values to local variables

↓

Use imported values in code

↓

End

When JavaScript sees an import statement, it finds the exported values from another file and assigns them to local variables to use in the current file.

Execution Sample

Javascript

import { greet } from './greetings.js';

console.log(greet('Alice'));

This code imports the 'greet' function from another file and uses it to print a greeting for 'Alice'.

Execution Table

Step	Action	Evaluation	Result
1	Encounter import statement	import { greet } from './greetings.js'	Prepare to load 'greet' from greetings.js
2	Load greetings.js module	Module exports: { greet: function }	Module loaded with 'greet' function
3	Assign 'greet' to local variable	greet = function(name) { return `Hello, ${name}!`; }	Local 'greet' ready to use
4	Call greet('Alice')	greet('Alice')	'Hello, Alice!'
5	console.log output	console.log('Hello, Alice!')	Prints: Hello, Alice!

💡 All import values assigned and used; program ends.

Variable Tracker

Variable	Start	After import	After function call	Final
greet	undefined	function greet(name)	function greet(name)	function greet(name)
output	undefined	undefined	'Hello, Alice!'	'Hello, Alice!'

Key Moments - 3 Insights

Why do we need to import 'greet' before using it?

Because 'greet' is defined in another file, the import statement brings it into the current file as shown in execution_table step 3.

What happens if the file path in import is wrong?

The module cannot be loaded (step 2), causing an error and stopping the program before assigning 'greet'.

Is 'greet' available before the import statement runs?

No, 'greet' is undefined before import (variable_tracker start), only assigned after loading the module (step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'greet' after step 3?

A a function that takes a name and returns a greeting

B undefined

C a string 'Hello, Alice!'

D null

💡 Hint

Check the 'Evaluation' and 'Result' columns at step 3 in the execution_table.

At which step does the program print 'Hello, Alice!'?

A Step 2

B Step 5

C Step 4

D Step 3

💡 Hint

Look for the console.log output in the execution_table.

If the import path './greetings.js' was incorrect, what would happen?

A The program would assign 'greet' as undefined and continue

B The program would print 'Hello, Alice!' anyway

C The program would throw an error at step 2 and stop

D The program would skip the import and use a default greet

💡 Hint

Refer to key_moments about what happens if the file path is wrong.

Concept Snapshot

Importing values in JavaScript:
- Use 'import { name } from "file";' to bring exported values.
- The imported names must match exported names.
- Imported values become local variables.
- Use them like normal variables after import.
- Errors occur if file path or names are wrong.

Full Transcript

This visual trace shows how JavaScript imports values from another file. First, the import statement is read. Then the module file is loaded, and the requested exported values are found. These values are assigned to local variables in the current file. After that, the imported values can be used like normal variables. For example, a function 'greet' is imported and called to print a greeting. If the file path is wrong, the program stops with an error. Variables like 'greet' start undefined and get assigned after import. This step-by-step helps beginners see how import works in practice.

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