If blocks ({#if}) in Svelte - Step-by-Step Execution

Concept Flow - If blocks ({#if})

Start

↓

Evaluate condition

↓

Render if-block content

No↓

Render else-block content (optional)

↓

End

The Svelte {#if} block checks a condition. If true, it shows the if-block content. Otherwise, it shows the else-block content if present.

Execution Sample

Svelte

<script>
  let loggedIn = false;
</script>

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

This code shows a welcome message if loggedIn is true, otherwise it asks the user to log in.

Execution Table

Step	Condition (loggedIn)	Result	Branch Taken	Rendered Output
1	false	false	else branch	<p>Please log in.</p>
2	true	true	if branch	<p>Welcome back!</p>
3	false	false	else branch	<p>Please log in.</p>

💡 Execution stops after rendering the appropriate block based on loggedIn value.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
loggedIn	false	false	true	false

Key Moments - 2 Insights

Why does the else block render when loggedIn is false?

Because the condition loggedIn is false (see execution_table step 1), Svelte renders the else block content.

What happens if there is no {:else} block and the condition is false?

No content is rendered for the if block when the condition is false, so nothing shows in that place.

Visual Quiz - 3 Questions

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

A <p>Welcome back!</p>

B <p>Please log in.</p>

C Nothing

D Error

💡 Hint

Check the 'Rendered Output' column for step 2 in the execution_table.

At which step does the condition loggedIn become true?

A Step 1

B Step 2

C Step 3

D Never

💡 Hint

Look at the 'Condition (loggedIn)' column in execution_table and variable_tracker.

If loggedIn is always false and there is no {:else} block, what will render?

A The if block content

B The else block content

C Nothing

D An error

💡 Hint

Refer to key_moments about behavior when no else block exists and condition is false.

Concept Snapshot

Svelte {#if} block syntax:
{#if condition}
  <!-- shown if true -->
{:else}
  <!-- shown if false (optional) -->
{/if}

It shows content based on condition truthiness.
If no else block and condition is false, shows nothing.

Full Transcript

In Svelte, the {#if} block lets you show or hide content based on a condition. When the condition is true, the content inside the if block appears. If the condition is false and you have an {:else} block, that content shows instead. If no else block exists and the condition is false, nothing is shown. This visual trace shows how the loggedIn variable controls which message appears. When loggedIn is false, the else message 'Please log in.' is rendered. When loggedIn is true, the welcome message appears. This helps beginners see exactly how Svelte decides what to display.

Practice

1. What does the {#if} block do in Svelte?

easy

A. It conditionally shows or hides content based on a true or false value.

B. It loops over a list of items to display them.

C. It styles elements with CSS inside the component.

D. It defines a reusable component.

Solution

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

   The {#if} block is used to check a condition and decide if some content should be shown or hidden.

2. Step 2: Compare with other options

   Looping is done with {#each}, styling is done with CSS, and reusable components are separate files or functions.

3. Final Answer:

   It conditionally shows or hides content based on a true or false value. -> Option A

4. Quick Check:

   Conditional display = C [OK]

Hint: If you want to show/hide, think {#if} block [OK]

Common Mistakes:

• Confusing {#if} with loops like {#each}
• Thinking {#if} styles elements
• Mixing {#if} with component creation

2. Which of the following is the correct syntax for an {#if} block in Svelte?

easy

A. {if condition} ... {endif}

B. <if condition> ... </if>

C. {#if condition} ... {/if}

D. {#if condition} ... {#end}

Solution

1. Step 1: Recall Svelte if block syntax

   Svelte uses {#if condition} ... {/if} to start and end an if block.

2. Step 2: Check other options for correctness

   Options A and C use incorrect syntax from other languages or HTML. {#if condition} ... {#end} uses a wrong closing tag.

3. Final Answer:

   {#if condition} ... {/if} -> Option C

4. Quick Check:

   Correct Svelte if syntax = B [OK]

Hint: Remember Svelte uses {/if} to close if blocks [OK]

Common Mistakes:

• Using HTML <if> tags instead of Svelte syntax
• Forgetting the # in {#if}
• Using wrong closing tags like {#end}

3. What will be rendered by this Svelte code?

{`\n{#if loggedIn}\n  
Welcome back!
\n{:else}\n  
Please log in.
\n{/if}`}

medium

A. Welcome back!

B. Please log in.

C. Nothing will be shown

D. Syntax error

Solution

1. Step 1: Check the value of loggedIn

   The variable loggedIn is set to false initially.

2. Step 2: Understand the if-else block behavior

   If loggedIn is true, it shows "Welcome back!"; else it shows "Please log in." Since loggedIn is false, the else block runs.

3. Final Answer:

   <p>Please log in.</p> -> Option B

4. Quick Check:

   loggedIn false shows else block = A [OK]

Hint: False condition shows {:else} content [OK]

Common Mistakes:

• Assuming false shows the if block content
• Ignoring the {:else} block
• Thinking no output if condition false

4. Identify the error in this Svelte code snippet:

{`\n{#if count > 3}\n  
Count is high
\n{:else if count > 1}\n  
Count is medium
\n{:else}\n  
Count is low
\n{/if}`}

medium

A. The syntax {:else if} is invalid in Svelte.

B. The variable count should be declared with const, not let.

C. The closing tag {/if} is missing.

D. There is no error; the code is correct.

Solution

1. Step 1: Check if {:else if} is valid in Svelte

   Svelte supports {:else if} syntax to chain conditions inside {#if} blocks.

2. Step 2: Verify variable declaration and closing tags

   Using let for count is correct for reactive variables. The {/if} closing tag is present.

3. Final Answer:

   There is no error; the code is correct. -> Option D

4. Quick Check:

   Valid else if syntax and proper closure = A [OK]

Hint: Svelte supports {:else if} inside {#if} blocks [OK]

Common Mistakes:

• Thinking {:else if} is invalid syntax
• Forgetting {/if} closing tag
• Confusing let and const for reactive vars

5. You want to display a message only if a user is logged in and has admin rights. Which Svelte {#if} block correctly checks both conditions?

hard

A. {#if loggedIn && isAdmin} Welcome, admin! {/if}

B. {#if loggedIn || isAdmin} Welcome, admin! {/if}

C. {#if loggedIn} {:if isAdmin} Welcome, admin! {/if} {/if}

D. {#if loggedIn | isAdmin} Welcome, admin! {/if}

Solution

1. Step 1: Understand the condition requirements

   The message should show only if both loggedIn and isAdmin are true, so we need a logical AND.

2. Step 2: Evaluate each option's logic

   {#if loggedIn | isAdmin}

   Welcome, admin!

   {/if} uses | bitwise OR which shows if either is true (wrong). {#if loggedIn || isAdmin}

   Welcome, admin!

   {/if} uses || logical OR which means either can be true (wrong). {#if loggedIn} {:if isAdmin}

   Welcome, admin!

   {/if} {/if} uses invalid {:if} syntax. {#if loggedIn && isAdmin}

   Welcome, admin!

   {/if} uses && logical AND which requires both true (correct).

3. Final Answer:

   {#if loggedIn && isAdmin} <p>Welcome, admin!</p> {/if} -> Option A

4. Quick Check:

   Use && for both true conditions [OK]

Hint: Use && to require both conditions true in {#if} [OK]

Common Mistakes:

• Using || instead of && for both conditions
• Using bitwise | instead of logical &&
• Using invalid {:if} syntax