Optional parameters in Typescript - Step-by-Step Execution

Concept Flow - Optional parameters

Function call with all args

↓

Use all parameters

↓

Return result

↓

Function call missing optional args

↓

Use default or undefined for missing

↓

Return result

The function checks if optional parameters are provided. If yes, it uses them; if not, it uses undefined or default values.

Execution Sample

Typescript

function greet(name: string, age?: number) {
  return age !== undefined ? `Hi ${name}, you are ${age}` : `Hi ${name}`;
}

console.log(greet("Alice", 30));
console.log(greet("Bob"));

This code defines a function with an optional parameter and calls it with and without that parameter.

Execution Table

Step	Function Call	Parameter 'name'	Parameter 'age'	Condition 'age !== undefined ?'	Returned Value
1	greet("Alice", 30)	"Alice"	30	true	"Hi Alice, you are 30"
2	greet("Bob")	"Bob"	undefined	false	"Hi Bob"
3	End	-	-	-	-

💡 No more function calls; execution ends.

Variable Tracker

Variable	Start	After Call 1	After Call 2	Final
name	-	"Alice"	"Bob"	-
age	-	30	undefined	-
Returned Value	-	"Hi Alice, you are 30"	"Hi Bob"	-

Key Moments - 2 Insights

Why does the function work when 'age' is not provided?

Because 'age' is optional, it can be undefined. The condition 'age !== undefined ?' checks if 'age' exists before using it, so the function returns a simpler greeting when 'age' is missing (see execution_table row 2).

What happens if we call greet with 'age' as 0?

Since 0 is falsy, the original condition 'age ?' would be false, but with the updated condition 'age !== undefined ?', the function will correctly include 0 and return the greeting with the age.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'age' during the second function call?

A 30

B null

C undefined

D 0

💡 Hint

Check the 'Parameter age' column in row 2 of the execution_table.

At which step does the condition 'age !== undefined ?' evaluate to true?

A Step 2

B Step 1

C Step 3

D Never

💡 Hint

Look at the 'Condition age !== undefined ?' column in the execution_table.

If we call greet('Charlie', 0), what will the returned value be?

A "Hi Charlie, you are 0"

B "Hi Charlie"

C Error

D "Hi undefined"

💡 Hint

With the updated condition 'age !== undefined ?', 0 is treated as a valid age and included in the greeting.

Concept Snapshot

Optional parameters in TypeScript are declared with a '?'.
If not provided, they are undefined.
Functions can check if optional parameters exist before using them.
Example: function f(x: number, y?: number) { ... }
Calling f(1) works without y.
Use conditions like 'age !== undefined' to handle missing optional parameters correctly.

Full Transcript

This visual trace shows how optional parameters work in TypeScript. The function greet has an optional parameter 'age'. When called with both name and age, it returns a greeting including age. When called with only name, age is undefined, and the function returns a simpler greeting. The execution table tracks each call, parameter values, condition checks, and returned values. The variable tracker shows how variables change with each call. Key moments clarify why the function works without the optional parameter and how falsy values like 0 affect the condition. The quiz tests understanding of parameter values and condition results. Optional parameters let functions be flexible and handle missing arguments safely.