Default parameters with types in Typescript - Step-by-Step Execution

Concept Flow - Default parameters with types

Function call

↓

Check if argument provided

↓

Use arg

↓

Execute function body

↓

Return result

When a function is called, it checks if an argument is given. If not, it uses the default value with the specified type.

Execution Sample

Typescript

function greet(name: string = "Friend") {
  return `Hello, ${name}!`;
}

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

This function greets a person using a default name if none is provided.

Execution Table

Step	Function Call	Parameter 'name'	Action	Output
1	greet()	undefined	Use default 'Friend'	Hello, Friend!
2	greet("Alice")	"Alice"	Use provided argument	Hello, Alice!
3	End	-	-	-

💡 Function calls complete; default used when argument missing.

Variable Tracker

Variable	Start	After Call 1	After Call 2	Final
name	undefined	"Friend"	"Alice"	-

Key Moments - 2 Insights

Why does the function use "Friend" when no argument is given?

Because the parameter 'name' has a default value "Friend" defined, so when the argument is missing (see execution_table row 1), it uses that default.

What happens if we pass an argument to the function?

The function uses the provided argument instead of the default (see execution_table row 2), so 'name' becomes the passed value.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' during the first function call?

A "Alice"

B "Friend"

C undefined

D null

💡 Hint

Check the 'Action' column in execution_table row 1.

At which step does the function use the argument passed by the caller?

A Step 2

B Step 1

C Step 3

D Never

💡 Hint

Look at the 'Action' column in execution_table row 2.

If we remove the default value, what would happen when calling greet() with no arguments?

A It uses undefined as name

B It uses "Friend" anyway

C It throws an error

D It returns an empty string

💡 Hint

Think about TypeScript requiring arguments when no default is set.

Concept Snapshot

function f(param: type = defaultValue) {
  // function body
}

- If argument missing, defaultValue is used.
- Parameter type enforces argument type.
- Helps avoid undefined errors and simplifies calls.

Full Transcript

This visual trace shows how TypeScript functions handle default parameters with types. When the function greet is called without an argument, it uses the default string "Friend" as the parameter 'name'. When called with an argument like "Alice", it uses that value instead. The execution table tracks each call, showing parameter values and outputs. The variable tracker shows how 'name' changes. Key moments clarify why defaults are used and what happens when arguments are passed. The quiz tests understanding of parameter values and behavior when defaults are removed.