Introduction to Svelte Logic

:dart: Learning Objectives

By the end of this lesson, you will:

• Understand how to use conditional statements (if, else if, else) in Svelte
• Learn to loop through arrays using Svelte's each block
• Apply logic blocks to create dynamic components
• Practice integrating Svelte logic within HTML templates

:information_source: What is Svelte Logic? Svelte lets you add logic directly in your HTML! You can use conditional statements and loops without switching to JavaScript. This makes your code cleaner and easier to read.

:books: Key Concepts

Here's what makes Svelte logic special:

• HTML First: Svelte renders HTML before applying logic statements
• Block Syntax: Logic wraps around HTML using {#block}...{/block} syntax
• Familiar Statements: Uses if, else if, and else just like JavaScript
• Template Integration: Logic lives in your template, not in the <script> tag

:memo: Note Unlike JavaScript, Svelte's conditional statements wrap around your HTML code. This keeps your logic and presentation together!

:bulb: If Statement

Let's start with the simplest conditional - the if statement:

App.svelte

<script>
  import Light from './LightBulb.svelte';
</script>

<Light lightsOn />

LightBulb.svelte

<script>
  export let lightsOn;
</script>

\{#if lightsOn\}
  <p>The light is turned on! [idea]</p>
\{/if\}

How It Works:

• Syntax: The if statement uses {#if}...{/if}
• Condition: The prop name (lightsOn) acts as the condition
• Full Pattern: {#if condition}...{/if}
• Important: Without an else statement, nothing shows when the condition is false

:bulb: Tip Think of the if statement like a light switch - when it's true, the content shows up. When it's false, nothing appears!

:emoji: Else Statement

Now let's add an else statement to handle when our condition is false:

App.svelte

<script>
  import Light from './LightBulb.svelte';
</script>

<Light lightsOff />

LightBulb.svelte

<script>
  export let lightsOn;
</script>

\{#if lightsOn\}
  <p>The light is turned on! [idea]</p>
\{:else\}
  <p>It's very dark in here! 🌑</p>
\{/if\}

What's Happening:

• Syntax: The else statement uses {:else}
• Execution: Runs when the if condition is false
• In Our Example: We pass lightsOff instead of lightsOn
• Result: The else block shows "It's very dark in here! :emoji:"

:memo: Note The else statement catches everything that doesn't match your if condition. It's like a safety net!

:zap: Else If Statement

Sometimes you need more than two options. That's where else if comes in:

App.svelte

<script>
  import Light from './LightBulb.svelte';
</script>

<Light lightsBlinking />

LightBulb.svelte

<script>
  export let lightsOn;
  export let lightsBlinking;
</script>

\{#if lightsOn\}
  <p>The light is turned on! [idea]</p>
\{:else if lightsBlinking\}
  <p>The light is blinking! [sparkles]. It is time to change the light bulb.</p>
\{:else\}
  <p>It's very dark in here! 🌑</p>
\{/if\}

Understanding Multiple Conditions:

• New Prop: We add lightsBlinking as a separate condition
• Syntax: Use {:else if condition} for additional checks
• Order Matters: Svelte checks conditions from top to bottom
• Exclusive: Only one block runs - the first matching condition

:bulb: Tip Think of else if like a traffic light - you can have multiple states (red, yellow, green), but only one is active at a time!

:art: Complex Conditional Example

Let's see how to combine all three conditional statements with value comparisons:

App.svelte

<script>
  import Shapes from './Shapes.svelte';
</script>

<Shapes shape=\{"triangle"\} />

Shapes.svelte

<script>
  export let shape;
</script>

\{#if shape === 'square'\}
  <p>⬜</p>
\{:else if shape === 'triangle'\}
  <p>🔺</p>
\{:else if shape === 'circle'\}
  <p>🟡</p>
\{:else\}
  <p>💙</p>
\{/if\}

Key Points:

• Value Comparison: Use === to check exact values
• Multiple Options: Chain multiple else if statements
• Default Case: The else block catches any unmatched values
• Flexibility: Any value not matching the conditions triggers the else block (showing :emoji:)

:emoji: Looping Array Values in Svelte

Svelte has its own way to loop through arrays:

:information_source: Each Block Instead of JavaScript's forEach() method, Svelte uses the {#each}...{/each} block. This special syntax lets you repeat HTML for every item in your array!

:memo: Example One: Simple Array Loop

App.svelte

<script>
  import Name from './studentName.svelte';
</script>

<Name />

studentName.svelte

<script>
  let studentNames = ['Chong Wei', 'Yet Phing', 'Naz', 'Jaydon', 'Atta', 'Adibah','Alya'];
</script>

<h1>Telebort Students</h1>

<ul>
  \{#each studentNames as goodStudent\}
    <li>\{goodStudent\}</li>
  \{/each\}
</ul>

How the Each Block Works:

• Array Creation: Define your array in the script section
• Each Syntax: Use {#each arrayName as itemName}...{/each}
• Item Variable: goodStudent represents each student in the loop
• Display: Use {itemName} to show each value

:memo: Note You can name the item variable anything you want! Common patterns are:

• {#each students as student}
• {#each items as item}
• {#each names as name}

:trophy: Example 2: Array with Objects

App.svelte

<script>
  let superheroes = [
    \{ranking:1, name:"Wolverine"\},
    \{ranking:2, name:"Spider-man"\},
    \{ranking:3, name:"Captain America"\}
  ]
</script>

<style>
  li \{
    padding: 5px;
    margin: 5px;
    background-color: orange;
    color: white;
  \}
  
  h1\{
    text-align:center;
  \}
</style>

<h1>
  Superheroes Ranking
</h1>
<ul>
  \{#each superheroes as \{ranking, name\}\}
    <li>No. \{ranking\} : \{name\} </li>
  \{/each\}
</ul>

Working with Object Arrays:

• Array Structure: Each item has multiple properties (ranking and name)
• Destructuring: Use {ranking, name} to extract object properties
• Full Syntax: {#each arrayName as {property1, property2}}...{/each}
• Usage: Access properties directly in your HTML

:bulb: Tip Destructuring makes your code cleaner! Instead of writing hero.ranking and hero.name, you can use ranking and name directly.

:clipboard: Summary

Let's review what you've learned about Svelte Logic:

Conditional Statements

• If Block: {#if condition}...{/if} - Shows content when true
• Else Block: {:else} - Shows alternative content
• Else If Block: {:else if condition} - Adds more conditions

Looping with Each

• Simple Arrays: {#each array as item}...{/each}
• Object Arrays: {#each array as {prop1, prop2}}...{/each}
• No forEach: Svelte uses its own each block syntax

Remember These Rules

• :white_check_mark: Logic blocks wrap around HTML
• :white_check_mark: Always close your blocks properly
• :white_check_mark: Props can be conditions
• :white_check_mark: Only one conditional block runs at a time

:video_game: Practice Time!

Try these exercises to master Svelte Logic:

1. Traffic Light Challenge: Create a component that shows different colored circles based on a status prop (red, yellow, green)

2. Todo List: Build a simple todo list that loops through an array of tasks and displays them

3. User Status: Make a component that shows "Online", "Away", or "Offline" based on a user's status prop

4. Grade Calculator: Create a component that shows letter grades (A, B, C, D, F) based on a numeric score

:memo: Note Practice makes perfect! Try modifying the examples in this lesson to create your own conditional logic and loops.