Else and else-if blocks in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component display?

Consider this Svelte code snippet:

<script>
  let score = 75;
</script>

{#if score >= 90}
  <p>Excellent</p>
{:else if score >= 60}
  <p>Good</p>
{:else}
  <p>Needs Improvement</p>
{/if}

What text will appear when this component renders?

Svelte

<script>
  let score = 75;
</script>

{#if score >= 90}
  <p>Excellent</p>
{:else if score >= 60}
  <p>Good</p>
{:else}
  <p>Needs Improvement</p>
{/if}

A Good

B Needs Improvement

C Excellent

D No text will appear

💡 Hint

Check the conditions in order and see which one matches the score value.

The score is 75, which is not >= 90, so the first block is skipped. The else-if checks if score >= 60, which is true, so 'Good' is displayed.

📝 Syntax

intermediate

Identify the syntax error in this Svelte conditional block

Which option correctly fixes the syntax error in this Svelte code?

{#if loggedIn}
  <p>Welcome back!</p>
{:else if}
  <p>Please log in.</p>
{/if}

Svelte

{#if loggedIn}
  <p>Welcome back!</p>
{:else if}
  <p>Please log in.</p>
{/if}

A {:else if loggedIn === false}

B {:else}

C {:else if !loggedIn}

D {:else if}

💡 Hint

The else-if block requires a condition; else block does not.

The else-if block must have a condition. Here, no condition is given, so it should be replaced with {:else} to handle the fallback case.

🔧 Debug

advanced

Why does this Svelte else-if block never run?

Given this code:

{#if value > 10}
  <p>Greater than 10</p>
{:else if value > 5}
  <p>Greater than 5</p>
{:else}
  <p>5 or less</p>
{/if}

If value is 12, why does the 'Greater than 5' block never show?

Svelte

{#if value > 10}
  <p>Greater than 10</p>
{:else if value > 5}
  <p>Greater than 5</p>
{:else}
  <p>5 or less</p>
{/if}

A Because else-if blocks are not supported in Svelte

B Because else-if conditions must be checked before if

C Because value 12 is not greater than 5

D Because the first if condition is true, so else-if is skipped

💡 Hint

Remember how if-else chains work: once a condition matches, the rest are ignored.

When value is 12, the first if condition (value > 10) is true, so Svelte renders that block and skips the else-if and else blocks.

❓ state_output

advanced

What text appears after clicking the button twice?

This Svelte component toggles a number and shows different text:

<script>
  let count = 0;
</script>

{#if count === 0}
  <p>Zero</p>
{:else if count === 1}
  <p>One</p>
{:else}
  <p>Many</p>
{/if}

<button on:click={() => count++}>Add</button>

What text is shown after clicking the button two times?

Svelte

<script>
  let count = 0;
</script>

{#if count === 0}
  <p>Zero</p>
{:else if count === 1}
  <p>One</p>
{:else}
  <p>Many</p>
{/if}

<button on:click={() => count++}>Add</button>

A Zero

B No text

C Many

D One

💡 Hint

Count how many times the button is clicked and check the conditions.

After two clicks, count is 2, which matches the else block condition, so 'Many' is displayed.

🧠 Conceptual

expert

How does Svelte handle multiple else-if blocks internally?

In Svelte, when you write multiple {:else if} blocks in a conditional, how does Svelte process them when rendering?

A Svelte compiles them into nested if-else JavaScript statements, checking conditions in order

B Svelte runs all else-if conditions in parallel and renders all matching blocks

C Svelte converts else-if blocks into separate components rendered conditionally

D Svelte ignores else-if blocks and only uses the first if and else blocks

💡 Hint

Think about how if-else chains work in JavaScript and how Svelte compiles templates.

Svelte compiles the template into JavaScript code that uses nested if-else statements, evaluating conditions in order and rendering only the first matching block.