What I’m trying to find out is,
is it better to group the selectors together, or not.
Some people say they should be defined where they are used,
other people say to keep them at the top.
Is there a consensus on this, or is this more of a preference thing?
Does keeping the selectors that match the handlers make more sense?
Like how this one is set up?
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
button.addEventListener("click", function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
});
const value = document.getElementById("input");
const sent = document.getElementById("sent");
sent.addEventListener("click", function () {
player.volume = 1.0;
player.src = value.value;
});
}());
or is it better to group them altogether like how this one is set up?
(function iife() {
"use strict";
const player = document.getElementById("player");
const button = document.getElementById("button");
const value = document.getElementById("input");
const sent = document.getElementById("sent");
button.addEventListener("click", function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
});
sent.addEventListener("click", function () {
player.src = value.value;
player.volume = 1.0;
});
}());
There are different varying thoughts and opinions on this:
Declarations on Top
It is a good coding practice to put all declarations at the top of each script or function.
This will:
Give cleaner code Provide a single place to look for local variables Make it easier to avoid unwanted (implied) global variables Reduce the possibility of unwanted re-declarations
w3schools
https://www.w3schools.com/js/js_best_practices.asp
When I set up guidelines for a new C project I always state that it is better to declare the variables close to where they are used. For two reasons, it makes it easier to refactor the code later on (i.e. when extracting a method). It also helps the compiler to do better optimization.
Variables should be declared as locally as possible.
Declaring variables “at the top of the function” is always a disastrously bad practice. Even in C89/90 language, where variables can only be declared at the beginning of the block, it is better to declare them as locally as possible, i.e. at the beginning of smallest local block that covers the desired lifetime of the variable. Sometimes it might even make sense to introduce a “redundant” local block with the only purpose of “localizing” the variable declaration.
https://stackoverflow.com/a/3773458
Should I declare variables at the top of the function for reasons other than the scope rules?
Each computer language has its strengths and pitfalls. Each has its own coding standards/practices often accepted, built and dictated by the community around it. Because programming is a precise art I would say, unless there is a good reason to do something, you shouldn’t.
Now there are very good reasons to declare variables close to where they are used:
Makes it easy to determine the type, when reading code. Makes it easy to delete code including the declaration all together.
