Passing parameters to Svelte function

In Svelte we can define functions that are going to be called when an event is triggered. For example, to call holaMundo on the click of an element we can indicate it as on:click={holaMundo}

Sometimes it is necessary to pass parameters to that function inside a Svelte component, but we cannot indicate it like this:

on:click={holaMundo(parameter)}

Since that will execute the function as soon as the component is loaded, and won’t wait for the click.

In this post I will show you how to pass arguments to functions in Svelte without calling them automatically.

Pass parameters to function in Svelte

If you want the quick fix, check out the following. To pass arguments, define an anonymous function and within that function call the real function by passing the arguments. This way:

on:click={()=>{holaMundo(parameter)}}

Let’s separate things:

The definition of the function looks like this: ()=>{holaMundo(parameter)}

And we are indicating that function within the on:click={}

We can also pass the event and the DOM element itself, but I’ll explain that in another section later.

Understanding how Svelte works

In this and other frameworks, the function to be called in the event must be indicated, not executed. We must give it something that evaluates to a function or is basically of type function.

That is why if we have a function called holaMundo, we must indicate it like this:

on:click={holaMundo}

It is also valid (but will not work as expected) to use parentheses and call the function, like so:

on:click={holaMundo()}

But in that case, Svelte would call the function and expect holaMundo to return a function. Yes: it would expect that when you call the function, it would return another function that would be executed on click.

Also, that function (holaMundo) would be called when the component is mounted.

Passing the event and the DOM element

On several occasions it is necessary to get the DOM element where the event was fired as well as the event. In that case we can do it like this:

on:change={(event) => {
    onEstadoInputCambiado(event);
}}

Note: here instead of click I am listening to the change event; Remember that it is only for example.

The important thing is that we are passing the event, and then inside the function we can access it as well as the DOM element:

const onEstadoInputCambiado = async (event) => {
    const propioElemento = event.target;
};

We have the event in event and the DOM element in event.target.

Passing other parameters

Finally, let’s see how to pass our own parameters, beyond the event and HTML element.

I have a set of input checkbox elements repeated with each. When the state is changed I want to call a function and pass the each element to it, which in this case would be elemento.terminado.

I do it like this:

{#each nota.elementos as elemento, indice}
    <div class="flex items-center">
        <input
            type="checkbox"
            on:change={(event) => {
                onEstadoInputCambiado(event, elemento.terminado);
            }}
        />
    </div>
{/each}

In short

If the function has no parameters, execute it like this:

on:click={holaMundo}

If you want to pass parameters:

on:click={()=>{holaMundo("parameter 1", "parameter 2")}}

If you want to pass the event and arguments:

on:click={(event)=>{holaMundo(event, "parameter 1", "parameter 2")}}