Optional parameters in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are optional parameters in Svelte component props?

Optional parameters are props that a Svelte component can receive but are not required. If not provided, they use a default value or remain undefined.

beginner

How do you define a default value for an optional parameter in Svelte?

You assign a default value when declaring the prop using <code>export let propName = defaultValue;</code>. This makes the parameter optional.

beginner

What happens if you don't provide an optional parameter when using a Svelte component?

If the optional parameter has a default value, the component uses that value. If no default is set, the parameter is undefined inside the component.

beginner

Show a simple example of a Svelte component with an optional parameter named color defaulting to 'blue'.

<pre>&lt;script&gt;
  export let color = 'blue';
&lt;/script&gt;

&lt;div style="color: {color};"&gt;This text is {color}&lt;/div&gt;</pre>

beginner

Why are optional parameters useful in Svelte components?

They let you create flexible components that work with or without certain props, improving reusability and reducing the need to pass every prop every time.

How do you make a prop optional in a Svelte component?

A By not exporting the prop

B By assigning it a default value with <code>export let prop = value;</code>

C By using <code>optional</code> keyword before the prop

D By declaring it inside <code>&lt;style&gt;</code>

In Svelte, giving a prop a default value with export let prop = value; makes it optional.

What is the value of an optional parameter if not provided and no default is set?

A undefined

B empty string

C null

D zero

If no default value is set and the prop is not passed, its value is undefined inside the component.

Which of these is a correct way to declare an optional parameter size with default 'medium'?

A <code>let size = 'medium';</code>

B <code>export size = 'medium';</code>

C <code>export let size = 'medium';</code>

D <code>optional let size = 'medium';</code>

Only export let size = 'medium'; correctly declares a prop with a default value in Svelte.

If a Svelte component has export let visible = true;, what happens if you use it as <Component /> without passing visible?

A visible is true

B visible is undefined

C Error occurs

D visible is false

The default value true is used when the prop is not passed.

Why might you want to use optional parameters in your Svelte components?

A To prevent components from rendering

B To make components less flexible

C To force users to always pass props

D To allow components to work with default settings if no props are passed

Optional parameters let components use default values, making them flexible and easier to reuse.

Explain how to create and use optional parameters in a Svelte component.

Think about how you tell Svelte a prop can have a default value.

Describe why optional parameters improve component flexibility in Svelte.

Consider how default values help when you don't want to pass every detail every time.