Each blocks ({#each}) in Svelte - Step-by-Step Execution

Concept Flow - Each blocks ({#each})

Start

↓

Receive array

↓

Check if array is empty?

Yes→Render nothing or else block

No↓

Loop over each item

↓

Render item block

↓

Repeat for next item

↓

End loop

↓

Finish rendering

The {#each} block loops over an array and renders a block for each item. If the array is empty, it can render an else block or nothing.

Execution Sample

Svelte

<script>
  let fruits = ['Apple', 'Banana', 'Cherry'];
</script>

<ul>
  {#each fruits as fruit}
    <li>{fruit}</li>
  {/each}
</ul>

This code loops over the fruits array and renders each fruit inside a list item.

Execution Table

Step	Action	Current item (fruit)	Rendered output
1	Start loop over fruits	N/A	<ul>
2	Render first item	Apple	<li>Apple</li>
3	Render second item	Banana	<li>Banana</li>
4	Render third item	Cherry	<li>Cherry</li>
5	End loop	N/A	</ul>
6	Finish rendering	N/A	<ul><li>Apple</li><li>Banana</li><li>Cherry</li></ul>

💡 All items in fruits array rendered, loop ends.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
fruits	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']
fruit	undefined	Apple	Banana	Cherry	undefined

Key Moments - 3 Insights

Why does the variable 'fruit' change during the loop?

Because the {#each} block assigns 'fruit' to each item in the array one by one, as shown in steps 2-4 in the execution table.

What happens if the array is empty?

The loop does not run and nothing inside the {#each} block renders unless an {#else} block is provided.

Can you use an index inside the {#each} block?

Yes, you can write {#each fruits as fruit, i} to get the index 'i' for each item.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'fruit' at step 3?

A Cherry

B Apple

C Banana

D undefined

💡 Hint

Check the 'Current item (fruit)' column at step 3 in the execution table.

At which step does the loop finish rendering all items?

A Step 5

B Step 4

C Step 6

D Step 2

💡 Hint

Look for the 'End loop' action in the execution table.

If the fruits array was empty, what would happen in the execution table?

A The loop would run infinitely

B Steps 2-4 would be skipped

C The loop would run once with fruit undefined

D The code would throw an error

💡 Hint

Recall that an empty array means no iterations in the {#each} block.

Concept Snapshot

Svelte {#each} loops over arrays.
Syntax: {#each array as item} ... {/each}
Renders block for each item.
Can use index: {#each array as item, i}
If empty, renders nothing or {#else} block.

Full Transcript

The Svelte {#each} block lets you loop over an array and render HTML for each item. It assigns each item to a variable you choose, like 'fruit' in the example. The loop runs once per item, rendering the block inside. If the array is empty, the block does not render unless you add an {#else} block. You can also get the index of each item by adding a second variable. This helps create lists dynamically in your app.