Learning Svelte Part # 5

Arrays & Objects

Hello developers and welcome back to this series about how i am learning Svelte. In today's post i will explain how to update Arrays and Objects, the update happen reactively when we change values.

Let’s try with an example:

First of all, we’re going to declare a new variable called frameworks.

<script>
let frameworks = ["Vue", "React","Angular", "Ember"];
</script>

And we will loop trough it, in th HTML section:

<ul>
{#each frameworks as framework}
  <li>{framework}</li>
{/each}
</ul>

Essentially we are creating a new list item for each one out of our Frameworks, the result in our html file:

Html result

Now to demonstrate the reactivity we are going to add another item to our list, let’s say after a 3 seconds delay.

To do that we need a new function:

Function

We would expect now to have the last item added to our list, but it's not the case, we need another step before accomplishing the result.

Svelte it's not able to catch the change yet, so it's not reflected inside the list.

To make Svelte to pick up the change we only need to write another line of code on our function, that it's going to work because we will use an equal operator that it's re-assigning the value of frameworks

The new function:

frameworks