Declaring props with export let in Svelte - Step-by-Step Execution

Concept Flow - Declaring props with export let

Start Component

↓

Declare prop with export let

↓

Parent passes value

↓

Prop initialized with passed value

↓

Component uses prop in template

↓

Render output with prop value

The component declares a prop using 'export let'. The parent passes a value, which initializes the prop. The component then uses this prop in its template to render dynamic content.

Execution Sample

Svelte

export let name = "Guest";

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

This code declares a prop 'name' with a default value 'Guest' and uses it in the template to greet the user.

Execution Table

Step	Action	Prop 'name' Value	Rendered Output
1	Component starts, 'name' declared with default 'Guest'	Guest	Hello, Guest!
2	Parent passes 'name' = 'Alice'	Alice	Hello, Alice!
3	Parent passes 'name' = 'Bob'	Bob	Hello, Bob!
4	No prop passed, uses default	Guest	Hello, Guest!
5	Component unmounts	-	-

💡 Component lifecycle ends or no further prop changes

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
name	Guest	Guest	Alice	Bob	Guest

Key Moments - 2 Insights

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

Because 'export let name = "Guest";' sets a default value. The execution_table row 1 and 4 show that when no value is passed, the default 'Guest' is used.

What happens if the parent changes the prop value after initial render?

The component updates the 'name' prop to the new value and re-renders. See execution_table rows 2 and 3 where 'name' changes to 'Alice' and then 'Bob', updating the output.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at step 3?

A Hello, Bob!

B Hello, Guest!

C Hello, Alice!

D Hello, Unknown!

💡 Hint

Check the 'Rendered Output' column at step 3 in the execution_table.

At which step does the prop 'name' first change from its default?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'Prop "name" Value' column in execution_table to see when it changes from 'Guest'.

If the parent never passes a value, what will the variable_tracker show for 'name' after all steps?

A Alice

B Guest

C Bob

D Undefined

💡 Hint

Refer to variable_tracker row for 'name' and consider default value usage.

Concept Snapshot

Declare props in Svelte with 'export let propName = defaultValue;'.
Parent components pass values to these props.
If no value is passed, the default is used.
Props update reactively when parent changes values.
Use props inside the template with curly braces {propName}.

Full Transcript

In Svelte, you declare a property (prop) that a parent component can set by writing 'export let' followed by the prop name and optionally a default value. When the component runs, if the parent passes a value, that value is used. If not, the default value is used. The component then uses this prop in its template to show dynamic content. If the parent changes the prop value later, the component updates automatically. This flow helps components be reusable and dynamic.

Practice

1. What does export let do inside a Svelte component's <script> block?

easy

A. It creates a local variable that cannot be changed.

B. It imports a module from another file.

C. It declares a prop that can be set from outside the component.

D. It defines a function inside the component.

Solution

1. Step 1: Understand the role of export let

   In Svelte, export let declares a property (prop) that the parent component can pass in.

2. Step 2: Differentiate from other uses

   Unlike local variables or imports, export let specifically exposes variables as props for customization.

3. Final Answer:

   It declares a prop that can be set from outside the component. -> Option C

4. Quick Check:

   Props = export let [OK]

Hint: Remember: export let means external prop [OK]

Common Mistakes:

• Confusing export let with import statements
• Thinking export let creates constants
• Assuming export let defines functions

2. Which of the following is the correct syntax to declare a prop named title with a default value of "Hello" in Svelte?

easy

A. export let title = "Hello";

B. let export title = "Hello";

C. export const title = "Hello";

D. let title = export "Hello";

Solution

1. Step 1: Recall correct syntax for props

   In Svelte, props are declared with export let followed by the variable name and optional default value.

2. Step 2: Check each option

   export let title = "Hello"; matches the correct syntax: export let title = "Hello";. Others have wrong order or keywords.

3. Final Answer:

   export let title = "Hello"; -> Option A

4. Quick Check:

   export let + name + = default [OK]

Hint: Use 'export let' before variable name for props [OK]

Common Mistakes:

• Swapping 'let' and 'export' keywords
• Using 'const' instead of 'let' for props
• Placing export after variable name

3. Given this Svelte component code:

<script>
  export let count = 5;
</script>

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

What will be displayed if the component is used as <MyComponent count={10} />?

medium

A. Count is 5

B. Count is 10

C. Count is undefined

D. Syntax error

Solution

1. Step 1: Understand default and passed props

   The component sets a default count of 5, but the parent passes 10, which overrides the default.

2. Step 2: Determine rendered output

   The displayed text uses the passed value 10, so it shows "Count is 10".

3. Final Answer:

   Count is 10 -> Option B

4. Quick Check:

   Passed prop overrides default [OK]

Hint: Passed props override defaults [OK]

Common Mistakes:

• Assuming default always shows ignoring passed value
• Thinking undefined appears if prop is passed
• Confusing syntax error with valid code

4. Identify the error in this Svelte component code:

<script>
  export let name;
  name = "John";
</script>

<p>Hello {name}</p>

medium

A. You cannot assign a value to a prop inside the component after declaration.

B. Missing default value for the prop name.

C. The export keyword should be after let.

D. The <p> tag cannot use curly braces.

Solution

1. Step 1: Understand prop assignment rules

   Props declared with export let should not be reassigned inside the component; they come from outside.

2. Step 2: Check the code

   The code tries to assign name = "John" after declaration, which is not allowed and causes an error.

3. Final Answer:

   You cannot assign a value to a prop inside the component after declaration. -> Option A

4. Quick Check:

   Props are read-only inside component [OK]

Hint: Don't reassign props inside component [OK]

Common Mistakes:

• Trying to set default by assignment after export let
• Confusing export let order
• Misunderstanding template syntax

5. You want to create a Svelte component that accepts a prop items which is an array, but if no prop is passed, it should default to an empty array. Which code correctly declares this prop?

hard

A. export const items = [];

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

C. let items = [];

D. export let items = [];

Solution

1. Step 1: Set default value in prop declaration

   In Svelte, you can assign a default value directly when declaring a prop with export let.

2. Step 2: Evaluate options

   export let items = []; correctly declares items with default empty array. export let items;
if (!items) items = []; tries to assign after declaration, which is not allowed. let items = []; is local variable, not prop. export const items = []; uses const which is incorrect for props.

3. Final Answer:

   export let items = []; -> Option D

4. Quick Check:

   Default values go in export let declaration [OK]

Hint: Assign default value in export let line [OK]

Common Mistakes:

• Assigning default after declaration
• Using const instead of let for props
• Not exporting the variable