Function hoisting behavior in Javascript - Step-by-Step Execution

Concept Flow - Function hoisting behavior

Start Execution

↓

Parse Function Declarations

↓

Hoist Functions to Top

↓

Execute Code

↓

Call Function

↓

Run Function Body

↓

End Execution

JavaScript moves function declarations to the top before running code, so functions can be called before they appear in the code.

Execution Sample

Javascript

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

Calls a function before it is declared, showing function hoisting.

Execution Table

Step	Action	Evaluation	Result
1	Parse code and hoist function 'greet'	Function 'greet' is stored in memory	Function available before execution
2	Execute console.log(greet())	Call 'greet' function	Function runs and returns 'Hello!'
3	console.log outputs	Output string	Hello!
4	End of script	No more code	Execution stops

💡 All code executed, function hoisting allowed calling 'greet' before declaration

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
greet	undefined	function greet() {...}	function greet() {...}	function greet() {...}

Key Moments - 2 Insights

Why can we call 'greet()' before its declaration?

Because function declarations are hoisted to the top during parsing (see execution_table step 1), so 'greet' exists before code runs.

What if 'greet' was a function expression assigned to a variable?

Then only the variable is hoisted as undefined, not the function. Calling it before assignment causes an error (not shown here).

Visual Quiz - 3 Questions

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

A undefined

B null

C function greet() {...}

D string 'Hello!'

💡 Hint

Check the variable_tracker after Step 1 for 'greet'

At which step does the function 'greet' actually run?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at execution_table Action column where 'Call greet function' happens

If we replace the function declaration with a function expression assigned to a variable, what changes?

A Function is still hoisted and callable before assignment

B Variable is hoisted but function is not, calling before assignment causes error

C Nothing changes, code runs same way

D Function runs twice automatically

💡 Hint

Refer to key_moments about function expressions vs declarations

Concept Snapshot

Function hoisting means JavaScript moves function declarations to the top before running code.
This allows calling functions before their code appears.
Only function declarations are hoisted fully, not function expressions.
Calling a function expression before assignment causes an error.
Use function declarations when you want hoisting behavior.

Full Transcript

In JavaScript, function declarations are hoisted to the top of their scope before the code runs. This means you can call a function before it appears in the code. For example, calling greet() before the function greet() is declared works because the function is stored in memory during parsing. The execution table shows parsing and hoisting first, then calling the function, then outputting the result. Variables holding function declarations have their function assigned at the start. However, if you use a function expression assigned to a variable, only the variable is hoisted as undefined, not the function itself. Calling it before assignment causes an error. This behavior helps understand why some functions can be called early and others cannot.