Skip to content

Stop polluting the global JS scope #42

@alexbainter

Description

@alexbainter

All of the functions and variables we're declaring at the root level in our JS files end up just hanging out in the global scope, accessible to any other JS running in the same context. For example, any script loaded on the index page can access createOptionElement from query_form.js:

function createOptionElement(text, value = text) {
const element = document.createElement("option");
return Object.assign(element, { text, value });
}

This isn't ideal since it can potentially lead to issues if two scripts (either our own or third-party scripts like lucide/htmx) try to use the same function/variable names in the global scope, and it can also prevent garbage collection.

Continuing the theme of keeping this project nice and simple, and considering we don't have a ton of JS, let's go old-school and just make sure we wrap our own JS files in IIFEs. If/when we decide to introduce build tools for our JS, we can make this happen automatically. We can probably enforce this with ESLint too (#41).

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions