Function expression in Javascript - Step-by-Step Execution

Concept Flow - Function expression

Start

↓

Define function expression

↓

Assign to variable

↓

Call function via variable

↓

Execute function body

↓

Return result

↓

End

This flow shows how a function expression is defined, assigned to a variable, then called to run its code and return a result.

Execution Sample

Javascript

const greet = function(name) {
  return `Hello, ${name}!`;
};

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

Defines a function expression assigned to 'greet' that returns a greeting, then calls it with 'Alice' and prints the result.

Execution Table

Step	Action	Evaluation	Result
1	Define function expression and assign to 'greet'	function(name) { return `Hello, ${name}!`; }	Variable 'greet' holds the function
2	Call 'greet' with argument 'Alice'	greet('Alice')	Function body runs with name='Alice'
3	Return greeting string	`Hello, Alice!`	Returned value is 'Hello, Alice!'
4	console.log prints returned value	console.log('Hello, Alice!')	Output: Hello, Alice!

💡 Function call completes and program ends after printing greeting

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
greet	undefined	function expression assigned	function expression unchanged	function expression unchanged
name	undefined	undefined	'Alice'	undefined (after function ends)
return value	undefined	undefined	undefined	'Hello, Alice!'

Key Moments - 3 Insights

Why do we assign the function to a variable instead of naming it directly?

Because in a function expression, the function is anonymous and stored in the variable (see Step 1 in execution_table). This lets us call it later using that variable.

What happens when we call greet('Alice')?

The function runs with 'name' set to 'Alice' (Step 2), then returns the greeting string (Step 3), which is printed (Step 4).

Is the function executed immediately when assigned?

No, the function expression is only stored in 'greet' at Step 1. It runs only when called at Step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is stored in 'greet' after Step 1?

A The string 'Hello, Alice!'

B A function expression

C undefined

D The argument 'Alice'

💡 Hint

Check the 'Result' column in Step 1 of execution_table

At which step does the function actually run its code?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table

If we change the argument to 'Bob', what changes in variable_tracker?

A Return value becomes undefined

B 'greet' variable changes to 'Bob'

C 'name' becomes 'Bob' at After Step 2

D No variables change

💡 Hint

Check the 'name' variable values in variable_tracker

Concept Snapshot

Function expression syntax:
const variable = function(parameters) { body };

- Function is anonymous and stored in a variable
- Call function via variable name
- Runs only when called
- Returns value with return statement

Full Transcript

This visual trace shows how a function expression is created and used in JavaScript. First, a function without a name is assigned to a variable called 'greet'. This variable now holds the function. When we call greet('Alice'), the function runs with 'name' set to 'Alice'. It returns the string 'Hello, Alice!'. Finally, console.log prints this returned string. The function does not run when assigned, only when called. Variables change as the function runs, especially the parameter 'name' and the return value. This helps beginners see step-by-step how function expressions work.