How to make a short function for forEach?

Question

JavaScript

Hello.
1. I do not want to use jQuery, but I need a trick from there with applying parameters to an array of objects (sorry if I used the wrong terms).

I mean this $(".block").addClass("red")
And if there are multiple objects with class block then addClass will be applied to all objects. In pure JS I do it like this:

document.querySelectorAll(".block").forEach((el)=> {
    el.classList.add("red");
});

Prompt how to be with function which would do forEach?
I just can't quite figure out how to do that. That's not how it works (well, it shouldn't)

function qsf(e) {
        return
  document.querySelectorAll(e).forEach((el)=> {
    el
  })
}

2. At the moment I have made 2 functions for myself

function q(e){return document.querySelector(e)}
function qs(e){return document.querySelectorAll(e)}

And now I turn through q and qs, respectively. So much more convenient and shorter.
Question: How is this the right decision? Am I slowing down the code this way? After all, I make it constantly call the function. Maybe it has something to do with the RAM?

3. Why earlier, when I saw js code, they constantly wrote getElementById or getElementsByClassName, and did not use querySelector, because it's so much easier? In the same place it is possible to address both on ID and on Class. It's just that for me, when I first encountered the code, about 5 years ago, it was an argument for using jquery. There is only a dollar sign, but here is some pipets. And now it turns out that there is a querySelector.

PS
getElementsByClassName I saw just like this:

document.getElementsByClassName("block").forEach((el)=> {
    el.classList.add("red");
});

and it scared me, because you could do $(".block").addClass("red");

Answer 1

Question: How is this the right decision? Am I slowing down the code this way? After all, I make it constantly call the function. Maybe it has something to do with the RAM?

If the function is not called hundreds/thousands of times per second, then it is not critical. Such micro-optimizations should not adversely affect the quality of the code. The difference in execution speed will be within the margin of error.

Why before, when I saw js code, they constantly wrote getElementById or getElementsByClassName

This was done when there was poor browser support. And even at the moment there are problems with it, for example, the NodeList that querySelectorAll returns does not have a forEach method in older browsers. Therefore, it is common to add a polyfill or convert a NodeList to an array that forEach already has.

Prompt how to be with function which would do forEach?

The function must accept either another function , or it must store a reference to the list of elements in the closure, and return public methods that will perform operations on these elements (how to write this, try to figure it out yourself if you went through the topic with closures).
qsf('.elements', el => el.classList.add("red"));
qsf('.elements').addClass('class-name');

Answer 2

1. Why is there returnif the function should not return anything to you, but just hang classes?

function qsf(e) {
  document.querySelectorAll(e).forEach((el)=> {
    el.classListt.add('red');
  })
}

2. In this case, the difference is in the area of ​​error) you simply add information about the function to memory
3. Xs)