Optional parameters in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when using an optional parameter in a Svelte component?

Consider a Svelte component that accepts a prop with a default value (an optional parameter). What will be rendered if the prop is not passed?

Svelte

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

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

A <h1>Hello, undefined!</h1>

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

C <h1>Hello, !</h1>

D Component throws an error

💡 Hint

Think about what default values do when no prop is passed.

When a prop has a default value, Svelte uses that value if the prop is not provided. Here, name defaults to "Guest".

📝 Syntax

intermediate

Which syntax correctly defines an optional parameter with a default value in a Svelte component?

Choose the correct way to define an optional prop count with a default value of 10 in Svelte.

A let count: number = 10;

B let count = 10; export count;

C export let count = 10;

D export count = 10;

💡 Hint

Remember how Svelte exports props with default values.

In Svelte, export let count = 10; declares a prop count with a default value of 10.

❓ state_output

advanced

What is the output when an optional parameter is updated dynamically?

Given this Svelte component, what will be displayed after clicking the button twice?

Svelte

<script>
  export let start = 5;
  let count = start;
  function increment() {
    count += 1;
  }
</script>

<p>Count: {count}</p>
<button on:click={increment}>Add</button>

A Count: 7

B Count: 5

C Count: 6

D Count: 0

💡 Hint

Count starts at start and increments by 1 each click.

Initial count is 5. Clicking twice adds 2, so count becomes 7.

🔧 Debug

advanced

Why does this Svelte component fail to use the optional parameter default?

Identify the reason why the default value for title is ignored and undefined is shown.

Svelte

<script>
  export let title;
  if (!title) {
    title = "Default Title";
  }
</script>

<h2>{title}</h2>

A Because reassigning an exported prop inside the script does not update the reactive value

B Because the default value must be set in the markup, not script

C Because Svelte does not allow conditional logic in script

D Because the prop must be declared with const, not let

💡 Hint

Think about how Svelte handles exported props and reactivity.

Reassigning an exported prop inside the script does not update the reactive value. The correct way is to assign a default value when exporting.

🧠 Conceptual

expert

How does Svelte handle optional parameters when a parent component passes undefined explicitly?

If a parent component passes undefined explicitly to an optional prop with a default value, what will the child component receive?

A The child receives <code>null</code> instead of <code>undefined</code>

B The child uses the default value instead of <code>undefined</code>

C Svelte throws a runtime error for undefined prop

D The child receives <code>undefined</code>, ignoring the default value

💡 Hint

Consider how JavaScript treats explicit undefined versus missing props.

If a parent passes undefined explicitly, the child receives undefined and does not use the default value. Defaults apply only when the prop is missing.