I created a reactive variable to sort an array when a state variable has changed. It does work if I declare the sort function directly as a callback, but not if I pass an already declared function.
So this is the code which does not work:
const sortSongs = (a, b) => {
const [option, direction] = sortOption.split("-");
const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase();
const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase();
if (itemA < itemB) {
return direction == "up" ? 1 : -1;
}
if (itemA > itemB) {
return direction == "up" ? -1 : 1;
}
return 0;
};
$: filteredSongs =
lessons
?.sort(sortSongs)
.filter(lesson => lesson.title?.toLowerCase().includes(value)) || [];
And this the one who does work:
$: filteredSongs =
lessons
?.sort((a, b) => {
const [option, direction] = sortOption.split("-");
const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase();
const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase();
if (itemA < itemB) {
return direction == "up" ? 1 : -1;
}
if (itemA > itemB) {
return direction == "up" ? -1 : 1;
}
return 0;
})
.filter(lesson => lesson.title?.toLowerCase().includes(value)) || [];
So shouldn't both be working? Why does it make a difference where I declare the function? Here is a REPL to see this in action. The red songs got the not-working code, while the green ones have the working one.
You expect $: filteredSongs to reevaluate when sortOption changes, but when you pass the function reference .sort(sortSongs), sortOption is 'hidden' inside the function and not directly related to the reactive statement anymore. It's mentioned in the docs here in the second paragraph
Only values which directly appear within the $: block will become dependencies of the reactive statement
A quick and dirty solution would be to pass sortOption as a parameter
?.sort(sortSongs, sortOption)
.sort() only expects the compare function as argument, so sortOption will be ignored, but is again a dependency because inside the $: block again
This would be a clearer alternative without calling .sort() with a 'redundant' argument
let lessons = [];
...
const sortSongs = (songs, sortOption) => {
return songs.sort((a,b) => {
const [option, direction] = sortOption.split("-");
const itemA = a[option == "Song" ? "title" : "artist"].toLowerCase();
const itemB = b[option == "Song" ? "title" : "artist"].toLowerCase();
if (itemA < itemB) {
return direction == "up" ? 1 : -1;
}
if (itemA > itemB) {
return direction == "up" ? -1 : 1;
}
return 0;
})
};
$: filteredSongs =
sortSongs(lessons, sortOption)
.filter(lesson => lesson.title?.toLowerCase().includes(value));