Arrow functions in Javascript - Step-by-Step Execution

Concept Flow - Arrow functions

Start

↓

Define arrow function

↓

Call arrow function

↓

Execute function body

↓

Return result

↓

End

This flow shows how an arrow function is defined, called, executed, and returns a result.

Execution Sample

Javascript

const add = (a, b) => a + b;
const result = add(2, 3);
console.log(result);

Defines an arrow function to add two numbers, calls it with 2 and 3, then prints the result.

Execution Table

Step	Action	Evaluation	Result
1	Define arrow function 'add'	const add = (a, b) => a + b;	Function 'add' created
2	Call 'add' with arguments 2 and 3	add(2, 3)	Function body executes with a=2, b=3
3	Calculate a + b	2 + 3	5
4	Return result from function	return 5	5
5	Assign returned value to 'result'	result = 5	result is 5
6	Print 'result' to console	console.log(result)	Output: 5

💡 Function call completes and program ends after printing output.

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
add	undefined	function (a, b) => a + b	function (a, b) => a + b	function (a, b) => a + b
result	undefined	undefined	5	5

Key Moments - 3 Insights

Why does the arrow function not need the 'function' keyword?

Arrow functions use a shorter syntax without the 'function' keyword, as shown in Step 1 of the execution_table.

How does the arrow function return the sum without using 'return' explicitly?

When the function body is a single expression (like 'a + b'), it returns that value automatically, as seen in Step 3 and Step 4.

What happens if you call the arrow function with different arguments?

The function executes with the new arguments, replacing 'a' and 'b' values, similar to Step 2 and Step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'result' after Step 5?

A undefined

B NaN

C 5

D Function

💡 Hint

Check the 'result' variable in variable_tracker after Step 5.

At which step does the arrow function actually add the two numbers?

A Step 3

B Step 2

C Step 4

D Step 6

💡 Hint

Look at the 'Calculate a + b' action in the execution_table.

If the arrow function body had curly braces and no return, what would happen?

A It would return the sum as usual

B It would return undefined

C It would cause a syntax error

D It would return the function itself

💡 Hint

Arrow functions with curly braces need an explicit return; otherwise, they return undefined.

Concept Snapshot

Arrow functions use a short syntax: (params) => expression
They automatically return the expression value if no braces are used.
No 'function' keyword needed.
Useful for concise functions.
Example: const add = (a, b) => a + b;

Full Transcript

This visual execution shows how an arrow function is defined, called, and executed in JavaScript. First, the arrow function 'add' is created with parameters 'a' and 'b'. When called with 2 and 3, it calculates the sum 5 and returns it automatically because the function body is a single expression without braces. The returned value is stored in 'result' and printed to the console. Key points include the concise syntax without the 'function' keyword and automatic return of expressions without braces. The variable tracker shows how 'add' holds the function and 'result' changes from undefined to 5 after the call.