Function declaration in Javascript - Step-by-Step Execution

Concept Flow - Function declaration

Start

↓

Declare function with name

↓

Function stored in memory

↓

Function called by name

↓

Execute function body

↓

Return value or undefined

↓

Continue program

This flow shows how a function is declared, stored, called, executed, and returns a value.

Execution Sample

Javascript

function greet() {
  console.log('Hello!');
}
greet();

Declares a function named greet and then calls it to print 'Hello!'

Execution Table

Step	Action	Evaluation	Result
1	Declare function greet	Function stored in memory	greet is ready to use
2	Call greet()	Function body runs	Prints 'Hello!' to console
3	Function ends	No return statement	Returns undefined
4	Program continues	No more code	Program ends

💡 Function greet finishes execution and returns undefined because no return statement is present.

Variable Tracker

Variable	Start	After Declaration	After Call	Final
greet	undefined	function greet() {...}	function greet() {...}	function greet() {...}

Key Moments - 2 Insights

Why does the function not run when it is declared?

Declaring a function only stores it in memory (see execution_table step 1). It runs only when called (step 2).

What does the function return if there is no return statement?

If no return is given, the function returns undefined by default (see execution_table step 3).

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 2?

A The program ends

B The function greet is declared but not run

C The function greet is called and prints 'Hello!'

D The function returns a value

💡 Hint

Check the 'Action' and 'Result' columns at step 2 in the execution_table.

At which step does the function return undefined?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the step where the function ends and returns a value in the execution_table.

If we add a return statement inside greet, how would the execution_table change?

A Step 2 would not run

B Step 3 would show the returned value instead of undefined

C Step 1 would change to calling the function

D The program would end earlier

💡 Hint

Focus on the 'Result' column at step 3 about the function's return value.

Concept Snapshot

Function declaration syntax:
function name() {
  // code
}

- Declares a named function stored in memory.
- Runs only when called by name.
- Returns undefined if no return statement.
- Can print, calculate, or return values.

Full Transcript

This visual trace shows how a JavaScript function declaration works. First, the function named greet is declared and stored in memory but does not run yet. When greet() is called, the function body executes and prints 'Hello!' to the console. Since there is no return statement, the function returns undefined by default. After the function finishes, the program continues or ends if no more code exists. Variables like greet hold the function after declaration and call. Key points include that declaring does not run the function, and functions return undefined if no return is given.