Control Flow

Control Flow refers to the order and manner in which statements are executed in a program. In etcher, control flow is handled by if, for and loop directives.

If

An if statement is a conditional statement that renders one or more elemnts based on a condition. The condition is evaluated as a boolean. If the condition is true, the elements are rendered. If the condition is false, the fallback elements are rendered.

{@if true}
    <p>True</p> <!-- This will be rendered -->
{:else}
    <p>False</p>
{/if}

If the condition is false and no fallback elements are provided, nothing will be rendered.

For

A for statement will iterate over an array-like object and render the elements for each item in the array. The array-like object can be an array, a string, or an object. The elements are rendered in the order they appear in the array.

{@for item in [1, 2, 3]}
    <p>{{item}}</p> <!-- This will be rendered 3 times -->
{/for}

The key you assign to the current element in the array will be passed to the element through interpolation.

Loop

A loop statement will render the elements a specified number of times.

{@loop 3}
    <p>Loop #{{index}}</p> <!-- This will be rendered 3 times -->
{/loop}

The index of the current loop will be passed to the element through interpolation.