I've run into this enough that I thought I'd ask: is it bad to have parameters the same name as a variable in the outer scope. This happens alot when I write in React or Svelte where the state of the component is the name I want to use in the function. Below is some code I just wrote in Svelte where I run into this. I get that is works, but I don't really like it. I think it would also break if I needed to modify the function to use the state in the outer scope. Any pointers would be helpful. Thank you.
// global state named `files`
let files: File[] = [];
// also wanted to use `files` as a param name but couldn't
function handleFilesChange(uploadedFiles: File[]) {
files = sortFilesChronologically(files, "desc");
}
// using `files` as a param name
function sortFilesChronologically(files: File[], direction: "asc" | "desc" = "asc") {
return [...files].sort((file1, file2) => {
const file1Time = new Date(file1.lastModified).getTime();
const file2Time = new Date(file2.lastModified).getTime();
const dirModifier = direction === "asc" ? 1 : -1;
return dirModifier * (file1Time - file2Time);
});
}
It can potentially cause unnecessary confusion and errors, but tooling can help prevent this from happening at all or differentiate state from arguments. ESLint was already mentioned in that regard.
If a function does not rely on state reactivity, you can consider to extract it to a separate file where the shadowing would not happen.
Using prefixes like you did with handleFilesChange to separate the names is always an option as well. I often use new, old, current and the like.
I think it would also break if I needed to modify the function to use the state in the outer scope
You would just have to rename the function parameter first, which should be simple refactoring operation.