Svelte Does Not Generate Extra Code for Assignments to Variables Not Used in Template

I’m new to Svelte, which has been a pleasure to work with so far, but there is one point not answered by the documentation.

Svelte parses the JavaScript and instruments assignments to state variables or props in order to implement reactivity. So if you have a component like this:

<script>
	let name = "John";

	function rename() {
		name = "Josephine";
	}
</script>

<div>Hello, {name}!</div>
<span on:click={rename}>Rename John to Josephine</span>

Svelte will generate JavaScript to react to the assignment to name in the rename function like this:

function instance($$self, $$props, $$invalidate) {
	let name = "John";

	function rename() {
		$$invalidate(0, name = "Josephine");
	}

	return [name, rename];
}

See this $$invalidate(0, name = "Josephine"); statement?

Now, I didn’t look at how much goes on inside this $$invalidate function, but I’m naturally wary of unnecessarily tickling internal mechanisms. Over the weekend, I was implementing a virtualized list in Svelte and was using a state variable to throttle the amount of updating, because browsers can send a large number onscroll events in a short amount of time when the user scrolls around:

function onScroll(e) {
    scrollTop = e.target.scrollTop;
    if (scrollEventsBlocked) {
      return;
    }
    else {
      scrollEventsBlocked = true;
      requestAnimationFrame(endDebounce);
    }
  }

  function endDebounce() {
    scrollEventsBlocked = false;
    updateView();
  }

Since scrollEventsBlocked isn’t used in the rendering of the component, I was wondering whether Svelte was generating the same kind of instrumented code for this state variable as for the ones that should update the component.

It’s surprisingly hard to find an answer to this online. There are tons of (more or less) helpful tutorials all rehashing the basics of Svelte reactivity, as the content farms they seem to want to emulate, but it took me several attempts at tickling DuckDuckGo or Google with the right search query to find someone answering this question.

It turns out, Svelte correctly ignores these and simply outputs the plain JavaScript assignment as written if the variable isn’t part of the HTML template code. To see this, the Svelte’s REPL tool is quite handy. To come back to the example above, let’s add a variable that’s not used in the HTML template and see what Svelte does with it:

<script>
	let name = "John";
	let irrelevant = 0;

	function rename() {
		name = "Josephine";
		irrelevant = irrelevant + 1;
	}
</script>

<div>Hello, {name}!</div>
<span on:click={rename}>Rename John to Josephine</span>

And here’s the updated JS output from above:

function instance($$self, $$props, $$invalidate) {
	let name = "John";
	let irrelevant = 0;

	function rename() {
		$$invalidate(0, name = "Josephine");
		irrelevant = irrelevant + 1;
	}

	return [name, rename];
}

No magic code when updating irrelevant. QED.