Default prop values in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output with default prop values?

Consider this Svelte component that uses a default prop value:

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

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

What will be the output if this component is used without passing any prop?

Svelte

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

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

A Hello, undefined!

B Hello, !

C Hello, null!

D Hello, Guest!

💡 Hint

Think about what happens when no value is passed for a prop with a default.

Since name has a default value of 'Guest', it is used when no prop is passed.

📝 Syntax

intermediate

Which option correctly sets a default prop value in Svelte?

Which of the following code snippets correctly sets a default value for a prop count in a Svelte component?

A <script>let count = 10;</script>

B <script>export let count = 10;</script>

C <script>export count = 10;</script>

D <script>export let count;</script><script>count = 10;</script>

💡 Hint

Remember how to export props with default values in Svelte.

Only option B correctly exports a prop with a default value. Option B has invalid syntax with multiple script tags and does not set a default, B does not export, C has invalid syntax.

❓ state_output

advanced

What is the output when a prop is passed as undefined?

Given this Svelte component:

<script>
  export let title = 'Default Title';
</script>

<h1>{title}</h1>

What will be rendered if the component is used like this?

<Component title={undefined} />

Svelte

<script>
  export let title = 'Default Title';
</script>

<h1>{title}</h1>

A <h1>undefined</h1>

B <h1>Default Title</h1>

C <h1></h1>

D <h1>null</h1>

💡 Hint

Think about how Svelte treats explicitly passed undefined props versus missing props.

Passing undefined explicitly overrides the default value, so title becomes undefined and renders as the string 'undefined'.

🔧 Debug

advanced

Why does this default prop value not work as expected?

Look at this Svelte component:

<script>
  export let items = [];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

When used without passing items, the list is empty. But when used multiple times, all instances share the same items array. Why?

Svelte

<script>
  export let items = [];
</script>

<ul>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

A Because the items prop must be initialized inside onMount.

B Because Svelte does not allow arrays as default props.

C Because the default array is shared across all instances, causing shared state.

D Because the export keyword is missing.

💡 Hint

Think about how default values for objects or arrays behave in JavaScript.

Default prop values that are objects or arrays are shared references, so all component instances share the same array, causing unexpected shared state.

🧠 Conceptual

expert

How does Svelte handle default prop values during hydration?

When a Svelte component with default prop values is server-rendered and then hydrated on the client, how are the default prop values treated if the client does not pass those props?

A The default prop values are used during hydration if the client does not pass props.

B The default prop values are ignored during hydration; only server-rendered values are used.

C Hydration fails if default prop values are not explicitly passed by the client.

D The component re-renders with empty props, ignoring defaults.

💡 Hint

Consider how Svelte merges server and client props during hydration.

Svelte uses default prop values on the client during hydration if no props are passed, ensuring consistent behavior between server and client.