Optional parameters in Svelte - Step-by-Step Execution

Concept Flow - Optional parameters

Define function with optional parameter

↓

Call function with argument?

No→Use default value

Yes↓

Use passed argument

↓

Function executes with value

↓

Return result

This flow shows how a function with an optional parameter uses a default value if no argument is passed, otherwise it uses the provided argument.

Execution Sample

Svelte

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

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

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

Execution Table

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

💡 Function calls complete; no more calls to process.

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 passed?

Because the parameter 'name' has a default value 'Friend', as shown in execution_table row 1 where 'name' is default 'Friend'.

What happens if we pass an argument to the function?

The function uses the passed argument directly, as in execution_table row 2 where 'name' is 'Alice' and used as is.

Visual Quiz - 3 Questions

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

A 'Alice'

B undefined

C 'Friend'

D null

💡 Hint

Check the 'Parameter name' column in row 1 of the execution_table.

At which step does the function use the passed argument instead of the default?

A Step 2

B Step 3

C Step 1

D None

💡 Hint

Look at the 'Action' column in the execution_table to see when the passed argument is used.

If we call greet('Bob'), what will be the output?

A Hello, Friend!

B Hello, Bob!

C Hello, undefined!

D Error

💡 Hint

Refer to how the function uses the passed argument in execution_table row 2.

Concept Snapshot

Optional parameters in Svelte functions allow setting default values.
Syntax: function fn(param = defaultValue) { ... }
If no argument is passed, defaultValue is used.
If argument is passed, it overrides the default.
This helps avoid errors and makes parameters optional.

Full Transcript

This visual execution shows how optional parameters work in Svelte functions. When a function is defined with a parameter that has a default value, calling the function without that argument uses the default. Calling it with an argument uses the passed value. The execution table traces two calls: one without an argument, using the default 'Friend', and one with 'Alice' passed. The variable tracker shows how 'name' changes. Key moments clarify why defaults are used and how passed arguments override them. The quiz tests understanding of these steps.