Avoid repetition code in Svelte for bind values - dry

Question

following this example:
https://svelte.dev/tutorial/select-bindings
I wanted to enhance this example by saving the state of the answer, so I modified the code slightly to achieve this.
But I am worried this will result in a lot of repeated lines in different parts of code, checking if the selected value is defined after render.
I would like to move foundIndex function outside of handleSubmit and handleChange, but it throws an error, because the selected.id is not defined at the initial 'state'.
See below:
<script>
let questions = [
{ id: 1, text: `Where did you go to school?`, answer: "" },
{ id: 2, text: `What is your mother's name?`, answer: "" },
{ id: 3, text: `What is another personal fact that an attacker could easily find with Google?`, answer : "" }
];
let selected;
let answer = '';
function handleSubmit() {
const foundIndex = questions.findIndex(question => question.id === selected.id);
questions[foundIndex].answer = answer;
};
function handleChange() {
const foundIndex = questions.findIndex(question => question.id === selected.id);
answer = questions[foundIndex].answer || "";
};
</script>
<style>
input { display: block; width: 500px; max-width: 100%; }
</style>
<h2>Insecurity questions</h2>
<form on:submit|preventDefault>
<select bind:value={selected} on:change={handleChange}>
{#each questions as question}
<option value={question}>
{question.text}
</option>
{/each}
</select>
<input bind:value={answer}>
<button on:click={handleSubmit}>
Submit
</button>
</form>
<p>selected question {selected ? selected.id : '[waiting...]'}</p>
Link to REPL:
https://svelte.dev/repl/5a8cd70dc6664e4b983e1bc729ac953b?version=3.12.0

Answer 1

Move the function, but pass in the questions and selected.id as a parameter.
function findIndex(questions, selectedId) {
return questions.findIndex(question => question.id === selectedId);
}
Then call it from your handlers.