Else and else-if blocks in Svelte - Step-by-Step Execution

Concept Flow - Else and else-if blocks

Start

↓

Check if condition1

↓

Render block1

↓

Render block2

↓

End

Svelte checks conditions in order: if, else-if, then else. It renders the first true block and skips the rest.

Execution Sample

Svelte

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

{#if count === 1}
  <p>One</p>
{:else if count === 2}
  <p>Two</p>
{:else}
  <p>Other</p>
{/if}

This Svelte code shows how else-if and else blocks decide which paragraph to show based on count.

Execution Table

Step	Condition Checked	Condition Result	Block Rendered
1	count === 1	False	No
2	count === 2	True	<p>Two</p>
3	else block	Skipped	No

💡 Condition count === 2 is true, so else-if block renders and else block is skipped.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
count	2	2	2	2

Key Moments - 2 Insights

Why does the else block not render even though it exists?

Because the else-if condition (count === 2) was true at step 2, Svelte renders that block and skips the else block as shown in execution_table row 3.

What happens if the first if condition is true?

If the first if condition is true, Svelte renders that block immediately and skips all else-if and else blocks, similar to step 1 in the table.

Visual Quiz - 3 Questions

Look at the execution table, what block is rendered at step 2?

A <p>Two</p>

B <p>One</p>

C <p>Other</p>

D No block

💡 Hint

Check the 'Block Rendered' column at step 2 in the execution_table.

At which step does Svelte decide to skip the else block?

A Step 1

B Step 3

C Step 2

D Never

💡 Hint

Look at the 'Condition Result' and 'Block Rendered' columns for step 2 and 3.

If count was 3, which block would render according to the execution flow?

A <p>Two</p>

B <p>Other</p>

C <p>One</p>

D No block

💡 Hint

Refer to the concept_flow and see what happens when all conditions are false.

Concept Snapshot

Svelte uses {#if} for conditions.
Use {:else if} for additional checks.
Use {:else} for fallback.
Only the first true block renders.
Others are skipped.
Syntax example:
{#if cond1} ... {:else if cond2} ... {:else} ... {/if}

Full Transcript

This visual execution shows how Svelte processes else and else-if blocks. It starts by checking the first if condition. If true, it renders that block and stops checking. If false, it checks else-if conditions in order. The first true else-if block renders and stops further checks. If none are true, the else block renders as a fallback. In the example, count is 2, so the else-if block renders. The else block is skipped. Variables remain unchanged during this flow. This helps beginners see exactly how Svelte chooses which block to show.

Practice

1. In Svelte, which block is used to check a second condition if the first {#if} condition is false?

easy

A. {:else}

B. {#each}

C. {:else if}

D. {#await}

Solution

1. Step 1: Understand the purpose of {#if} and {:else if}

   The {#if} block checks the first condition. If it is false, {:else if} allows checking another condition.

2. Step 2: Identify the correct block for a second condition

   {:else if} is specifically designed to check additional conditions after the first fails.

3. Final Answer:

   {:else if} -> Option C

4. Quick Check:

   Second condition check = {:else if} [OK]

Hint: Use {:else if} to test another condition after {#if} fails [OK]

Common Mistakes:

• Using {:else} to check a condition instead of fallback
• Confusing {#each} with conditional blocks
• Trying to use {#await} for conditions

2. Which of the following is the correct syntax for an else-if block in Svelte?

easy

A. {:elseif condition}

B. {:else if condition}

C. {:else-if condition}

D. {:else if (condition)}

Solution

1. Step 1: Recall Svelte syntax for else-if

   Svelte uses {:else if} followed by the condition without parentheses.

2. Step 2: Compare options to correct syntax

   {:else if condition} matches the correct syntax exactly: {:else if condition}

3. Final Answer:

   {:else if condition} -> Option B

4. Quick Check:

   Correct else-if syntax = {:else if condition} [OK]

Hint: Remember: space between else and if, no parentheses [OK]

Common Mistakes:

• Writing {:elseif} as one word
• Adding parentheses around condition
• Using hyphen in else-if

3. What will be rendered by this Svelte code?

{`\n{#if score >= 90}\n  
Excellent
\n{:else if score >= 60}\n  
Good
\n{:else}\n  
Try again
\n{/if}`}

medium

A. Good

B. Try again

C. Excellent

D. No output

Solution

1. Step 1: Evaluate the first condition

   score is 75, which is not >= 90, so the first {#if} block is false.

2. Step 2: Evaluate the else-if condition

   score is 75, which is >= 60, so {:else if} block is true and renders <p>Good</p>.

3. Final Answer:

   <p>Good</p> -> Option A

4. Quick Check:

   score 75 triggers else-if block = Good [OK]

Hint: Check conditions top-down; first true block renders [OK]

Common Mistakes:

• Assuming all blocks render instead of only one
• Misreading the score value
• Confusing else-if with else

4. Identify the error in this Svelte code snippet:

{`{#if isActive}\n  
Active
\n{:else if}\n  
Inactive
\n{/if}`}

medium

A. Missing condition after {:else if}

B. Incorrect closing tag {/if}

C. Cannot use {:else if} after {#if}

D. Missing colon before else

Solution

1. Step 1: Check {:else if} syntax

   The {:else if} block requires a condition to follow it, but none is provided here.

2. Step 2: Confirm other parts are correct

   The {#if} and {/if} tags are correctly placed, and {:else if} is allowed after {#if}.

3. Final Answer:

   Missing condition after {:else if} -> Option A

4. Quick Check:

   {:else if} needs a condition [OK]

Hint: Always add a condition after {:else if} [OK]

Common Mistakes:

• Leaving {:else if} without condition
• Confusing {:else} with {:else if}
• Misplacing {/if} tag

5. Given this Svelte code:

{`\n{#if status === 'loading'}\n  
Loading...
\n{:else if status === 'success'}\n  
Data loaded
\n{:else if status === 'error'}\n  
Error occurred
\n{:else}\n  
Idle
\n{/if}`}

What will be displayed if status is an empty string?

hard

A. Loading...

B. Data loaded

C. Error occurred

D. Idle

Solution

1. Step 1: Check each condition against empty string

   status is '', so none of the conditions 'loading', 'success', or 'error' match.

2. Step 2: Use {:else} block as fallback

   Since no conditions match, the {:else} block runs, rendering <p>Idle</p>.

3. Final Answer:

   <p>Idle</p> -> Option D

4. Quick Check:

   Empty string triggers else block = Idle [OK]

Hint: If no conditions match, {:else} block runs [OK]

Common Mistakes:

• Assuming empty string matches a condition
• Forgetting {:else} fallback
• Mixing up else-if and else blocks