Default prop values in Svelte - Step-by-Step Execution

Concept Flow - Default prop values

Component receives props

↓

Check if prop is passed

↓

Use passed prop

↓

Render component with prop value

When a Svelte component receives props, it checks if a prop was passed. If not, it uses the default value before rendering.

Execution Sample

Svelte

  <script>
    export let name = 'Guest';
  </script>

  <p>Hello, {name}!</p>

This Svelte component greets the user by name or uses 'Guest' if no name is passed.

Execution Table

Step	Prop 'name' passed?	Value of 'name'	Rendered Output
1	Yes ('Alice')	'Alice'	<p>Hello, Alice!</p>
2	No	'Guest'	<p>Hello, Guest!</p>
3	No	'Guest'	<p>Hello, Guest!</p>

💡 Rendering completes after using passed or default prop value.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
name	'Guest' (default)	'Alice'	'Guest'	'Guest'

Key Moments - 2 Insights

Why does the component show 'Guest' when no name is passed?

Because the default value 'Guest' is assigned to 'name' in the export statement, as shown in execution_table rows 2 and 3.

What happens if a prop is passed to the component?

The passed prop value overrides the default, as seen in execution_table row 1 where 'name' is 'Alice'.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'name' at Step 2?

A 'Alice'

B 'Guest'

C undefined

D null

💡 Hint

Check the 'Value of name' column in execution_table row 2.

At which step does the component render 'Hello, Alice!'?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the 'Rendered Output' column in execution_table.

If we change the default value to 'Friend', what will be the rendered output at Step 3?

A <p>Hello, Alice!</p>

B <p>Hello, Guest!</p>

C <p>Hello, Friend!</p>

D <p>Hello, undefined!</p>

💡 Hint

Refer to variable_tracker and how default values affect rendering when no prop is passed.

Concept Snapshot

Svelte default prop values:
- Use export let prop = defaultValue;
- If parent passes prop, use it.
- Else, use defaultValue.
- Ensures component always has a value.
- Simplifies component usage.

Full Transcript

In Svelte, components can have default prop values by assigning them during export, like export let name = 'Guest'. When the component is used, if a parent passes a value for 'name', that value is used. If not, the default 'Guest' is used instead. This ensures the component always has a value to display. The execution table shows three steps: when 'Alice' is passed, the component renders 'Hello, Alice!'. When no prop is passed, it renders 'Hello, Guest!'. The variable tracker confirms the 'name' variable changes accordingly. This pattern helps avoid undefined props and makes components easier to use.

Practice

1. What is the correct way to set a default value for a prop named color in a Svelte component?

easy

A. export let color = 'blue';

B. let color = 'blue';

C. prop color = 'blue';

D. export color = 'blue';

Solution

1. Step 1: Understand Svelte prop declaration

   In Svelte, props are declared with export let to make them accessible from outside.

2. Step 2: Assign default value

   Assigning = 'blue' after export let color sets the default value if no prop is passed.

3. Final Answer:

   export let color = 'blue'; -> Option A

4. Quick Check:

   Default prop syntax = export let prop = value [OK]

Hint: Use 'export let' with '=' to set default prop values [OK]

Common Mistakes:

• Forgetting 'export' keyword
• Using 'let' without export
• Using 'prop' keyword which doesn't exist
• Assigning default without 'let'

2. Which of the following is the correct syntax to declare a prop size with a default value of 10 in Svelte?

easy

A. export let size: 10;

B. export size = 10;

C. let export size = 10;

D. export let size = 10;

Solution

1. Step 1: Recognize correct export syntax

   The correct way to declare a prop with default is export let prop = value;.

2. Step 2: Identify correct option

   export let size = 10; matches this syntax exactly with size and default 10.

3. Final Answer:

   export let size = 10; -> Option D

4. Quick Check:

   Default prop syntax uses '=' not ':' or misplaced keywords [OK]

Hint: Remember: 'export let prop = value;' sets default props [OK]

Common Mistakes:

• Using ':' instead of '='
• Misplacing 'export' keyword
• Omitting 'let' keyword
• Assigning default without 'let'

3. Given this Svelte component code:

  <script>
    export let message = 'Hello';
  </script>

  <p>{message}</p>

What will be displayed if the component is used without passing any message prop?

medium

A. An empty paragraph

B. Hello

C. Undefined

D. Error: message not defined

Solution

1. Step 1: Check default prop value

   The prop message has a default value of 'Hello'.

2. Step 2: Understand usage without prop

   If no prop is passed, Svelte uses the default value automatically.

3. Final Answer:

   Hello -> Option B

4. Quick Check:

   Default prop used when no value passed = Hello [OK]

Hint: No prop passed? Default value shows [OK]

Common Mistakes:

• Assuming empty string instead of default
• Expecting undefined or error
• Confusing default with required prop

4. Identify the error in this Svelte component code:

<script>
  export let count;
  if (count === undefined) {
    count = 5;
  }
</script>

<p>Count is {count}</p>

medium

A. The count prop must be a string, not a number.

B. The if condition should check for null, not undefined.

C. You cannot assign to a prop after export; default should be set in declaration.

D. The count variable should not be exported.

Solution

1. Step 1: Understand prop default assignment rules

   In Svelte, default prop values must be set during declaration, not by reassigning later.

2. Step 2: Identify why reassignment is wrong

   Reassigning an exported prop inside script causes runtime errors or unexpected behavior.

3. Final Answer:

   You cannot assign to a prop after export; default should be set in declaration. -> Option C

4. Quick Check:

   Default props set at declaration, not by reassignment [OK]

Hint: Set default with export let, not by reassigning later [OK]

Common Mistakes:

• Trying to assign default after export
• Checking wrong condition for default
• Confusing prop type requirements
• Not exporting the prop

5. You have a Svelte component that accepts a prop items which should default to an empty array if not provided. Which is the best way to declare this prop to avoid errors when iterating over items in the template?

hard

A. export let items = [];

B. export let items; if (!items) items = [];

C. let items = []; export { items };

D. export let items = null;

Solution

1. Step 1: Understand default prop for arrays

   Setting export let items = []; ensures items is always an array, avoiding errors in iteration.

2. Step 2: Evaluate other options

   export let items; if (!items) items = []; tries to assign after export which is incorrect. let items = []; export { items }; exports a local variable incorrectly. export let items = null; sets null which can cause errors when iterating.

3. Final Answer:

   export let items = []; -> Option A

4. Quick Check:

   Default array props set with export let prop = [] [OK]

Hint: Default arrays with export let prop = [] to avoid iteration errors [OK]

Common Mistakes:

• Assigning default after export
• Exporting local variables incorrectly
• Using null as default for arrays
• Not setting default causing runtime errors