Svelte Tutorial 4: Logic (Branch, Loop, and Async) (English & Indonesia)

English

Svelte offer ways to express logic, which HTML doesn't. Rule of the thumb is
{# to start logic block (if, each, await)
{: for continuation logic block (else, then, catch)
{/ to close logic block

If Blocks (decision/branch)

We use tag {#if condition}{/if}  to do logical if. Here is some code example:

<script>
let user = { loggedIn: false }; function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>

{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}

{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}

Else

Use {:else} to do logical else. If else block will look like this

{#if [condition]}
  ...
{:else}
  ...
{/if}

A # character always indicates a block opening tag. A / character always indicates a block closing tag. A : character, as in {:else}, indicates a block continuation tag.

Else if

You can chain multiple condition using else if like this:

{#if [condition]}
  ...
{:else if [condition]}
  ...
{:else}
  ...
{/if}

Each  (looping)

If you need to loop over lists of data, use an each block:

<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>

<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{cat.name}
</a></li>
{/each}
</ul>

You can get the current index as a second argument, like so:

{#each cats as cat, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{i + 1}: {cat.name}
</a></li>
{/each}

If you prefer, you can use destructuring — each cats as { id, name } — and replace cat.id and cat.name with id and name.

{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}

Keyed each

When you add or remove something from each block, it will remove or add at the last position of data. But sometimes it's not what we want, for example when you use array operation slice(1), you want to remove first data without re-rendering/reset the rest. So in order to match the perspective we use keyed each to mark each generated object as unique like this:

{#each things as thing (thing.id)}
<Thing current={thing.color}/>
{/each}

instead of:

{#each things as thing}
<Thing current={thing.color}/>
{/each}

so when we remove first position of array, the component that is removed in the each block is also the first one not the last one, for interactive example you can check this https://svelte.dev/tutorial/keyed-each-blocks

Await Block (async calls)

Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to await the value of  directly in your markup. Here is the example of await block:

{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

For example:

<script>
  let promise = exampleAsync();
  async function exampleAsnyc() {
    await new Promise(r => setTimeout(r, 2000)); // eg. hitting certain API
    return Math.random()
  }
  function onClick() { promise = exampleAsync(); }
</script>
<button on:click="onClick">Click Me!</button>

Indonesia

Svelte memberikan jalan untuk melakukan operasi-operasi logika, yang tidak ada di dalam HTML. Aturan sintaks yang perlu dipegang adalah sebagai berikut:
{# untuk memulai blok logika (if, each, await)
{: untuk melakukan sambungan dengan blok logika di atasnya (else, then, catch)
{/ untuk menutup blok logika

If Blocks (decision/branch)

Kita menggunakan {#if condition}{/if}  untuk melakukan logika if. Di bawah ini adalah contohnya:

<script>
let user = { loggedIn: false };  function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>

{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}

{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if}

Else

Gunakan {:else} untuk melakukan logika else. Blok else bisa dilakukan seperti ini:
{#if [condition]}
  ...
{:else}
  ...
{/if}

Karakter # akan mengindikasikan tag pembukaan blok. Karakter / akan selalu mengindikasikan tag penutupan. Karakter : seperti di {:else}, mengindikasikan tag sambungan blok.

Else if

Kita bisa melakukan kondisi berantai dengan else if seperti ini:

{#if [condition]}
  ...
{:else if [condition]}
  ...
{:else}
  ...
{/if}

Each  (looping)

Jika ingin melakukan loop pada sekumpulan data, gunakan each:

<script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>

<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{cat.name}
</a></li>
{/each}
</ul>

Kita bisa mendapatkan indeks data sebagai argumen kedua, seperti ini

{#each cats as cat, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{i + 1}: {cat.name}
</a></li>
{/each}

Bisa juga menggunakan destructuring— each cats as { id, name } — untuk menggantikan cat.id dan cat.name dengan id dan name.

{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}

Keyed each

Ketika kita menambahkan atau menghapus komponen dari blok each, maka yang akan dirubah adalah komponen pada posisi paling akhir/bawah. Tapi kadang itu tidak sesuai dengan apa yang kita mau, contohnya jika kita menggunakan operasi array slice(1), kita ingin menghilangkan data yang paling atas/pertama, tanpa perlu mengatur ulang data yang tersisa. Maka untuk menyamakan perspektif kita bisa menggunakan keyed each untuk menandai masing-masing komponen yang ada.

{#each things as thing (thing.id)}
<Thing current={thing.color}/>
{/each}

dan bukan seperti ini:

{#each things as thing}
<Thing current={thing.color}/>
{/each}

jadi ketika kita menghapus array posisi pertama, maka komponen yang akan dihilangkan juga yang pertama bukan yang terakhir, untuk contoh interaktif bisa dilihat di https://svelte.dev/tutorial/keyed-each-blocks.

Await Block (async calls)

Kebanyakan aplikasi web harus berurusan dengan  asynchronous data pada suatu titik. Svelte membuat urusan ini menjadi mudah untuk menunggu data secara langsung pada markup HTML kita. Di bawah ini adalah contoh dari blok await:

{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}

Begini contoh cara pakainya:

<script>
  let promise = exampleAsync();
  async function exampleAsnyc() {
    await new Promise(r => setTimeout(r, 2000)); // eg. hitting certain API
    return Math.random()
  }
  function onClick() { promise = exampleAsync(); }
</script>

<button on:click="onClick">Click Me!</button>