Suggestions to Improve Clarity in the Example of Passing State into Functions

[good-dev-student]

Hi there! I found the example of passing state into functions a bit complicated and unclear. It might help to simplify the explanation or break it down into smaller steps. I'd really appreciate it!

now:
https://svelte.dev/docs/svelte/$state#Passing-state-into-functions

function add(getA: () => number, getB: () => number) {
	return () => getA() + getB();
}

let a = 1;
let b = 2;
let total = add(() => a, () => b);
console.log(total()); // 3

a = 3;
b = 4;
console.log(total()); // 7

suggested:

function add(a: number, b: number) {
return a + b;
}

let a = 1;
let b = 2;

function total() {
return add(a, b);
}

console.log(total()); // 3

a = 3;
b = 4;

console.log(total()); // 7

or even :

<script lang="ts">
	const add = (a: number, b: number) => a + b;

	let a = 1;
	let b = 2;

	const total = () => add(a, b);

	console.log(total()); // 3

	a = 3;
	b = 4;

	console.log(total()); // 7
</script>

For the 3 versions i see the same result !

[FrotaLucas]

Hello everyone, I’d like to contribute to this task.
I really liked the two suggestions you provided, @good-dev-student . The example became much clearer! =)
Woud you mind if I submit a PR with your first suggestion?

[dummdidumm]

Changing the code like that would change how the concept of closures is explained, and to me at least it becomes more confusing because there's now a new function introduced, whereas the current docs consistently talk about add as the only function

[mateothegreat]

The key thing to understand is that the current docs example isn’t just about adding two numbers. It’s deliberately showing a closure pattern:

function add(getA: () => number, getB: () => number) {
	return () => getA() + getB();
}

Here, getA and getB are functions that return the current value of a and b. When total() is called later, it doesn’t use the values from when add was first called — it calls getA() and getB() again, so it always sees the latest state.

That’s the subtle but important teaching point:

• Your versions capture a and b directly in the outer scope, which works fine here because a and b are mutable variables in the same scope.
• The docs version works even if a and b live somewhere else entirely (e.g. inside a component’s $state or passed from another module), because it’s passing accessors, not values. This is a common pattern in Svelte 5 when you want to pass reactive state into a helper function without losing reactivity.

If the docs swapped to your simpler form, they’d lose the opportunity to demonstrate:

• How to pass state accessors into a function.
• How closures can keep a live connection to changing values.
• Why this matters when working with Svelte runes like $state or $derived.

So in short: the versions above are perfectly valid JavaScript and easier to read for a beginner. But they teach a different concept — “call a function that uses outer variables” — rather than “pass functions that return state so the helper can stay reactive.”

If the goal is to make the docs more approachable without losing the closure lesson, one option could be to keep the accessor pattern but break it into smaller steps with comments, so the reader sees why we’re wrapping a and b in functions.