js/no-var

Why

var is scoped to the whole function, is hoisted as undefined, can be declared twice without an error and, at the top level of a classic script, becomes a property of window. Loops that create callbacks with var share one variable, a classic source of "every button opens the last item".

Fix

Use const by default and let for a value you reassign. Both are block scoped, cannot be redeclared and throw when read before their declaration. Load the script as a module so top-level names stay out of the global object.

Examples

// bad
for (var i = 0; i < buttons.length; i++) buttons[i].onclick = () => open(i)
// good
for (const [i, button] of buttons.entries()) button.addEventListener('click', () => open(i))

Sources

• MDN, var (description of hoisting and function scope)
• ESLint, no-var

Read it in the terminal

npx github:dawidolko/frontend-skills explain js/no-var