Must we use a procedure for element-manipulating-methods?

JavaScript
1 
document.querySelectorAll(".x").forEach( (e)=>{
    e.style.display = "none";
});

I gather that the e (element) here, may not be accessed without a parameter.
Is it really the case?

2

You can do it with a for loop instead if you like:

var els = document.querySelectorAll(".x").length;
for (var i = 0; i < els.length; i += 1) {
    els[i].style.display = "none";
});

But we’ve been trying to escape the many problems of for loops for decades now. I would much rather do it using forEach instead.

My only quibble with the original code is that the parameter is a bit misleading, as the letter e is also used to refer to an event, so I would rename that to be clearer instead as either el, or element:

document.querySelectorAll(".x").forEach((el)=>{
    el.style.display = "none";
});

Oh okay, there’s another quibble too. I find that arrow-notation is best used on a single line.

document.querySelectorAll(".x").forEach(
    (el) => el.style.display = "none"
);

Or if each ".x" was of a certain type such as being an information panel, to use a more specific name for them instead.

document.querySelectorAll(".x").forEach(
    (panel) => panel.style.display = "none"
);
3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.