DEV Community

Discussion on: Stop using Array.map() everywhere 🥵

Collapse
 
deathshadow60 profile image
deathshadow60

I think your first example has the map and innerHTML backwards.

Both map and foreach far too often waste memory and execution time. I've dealt with so many codebases lately where people are making copies of copies of copies of arrays wasting so much memory and time it drags performance down noticeably for users. It also doesn't help that since these are all callback driven that means the overhead of functions for each and every iteration.

I'm not THAT familiar with JavaScript internals, but if this were a compiled language the assembly used for a function call -- inc SP to make room for vars, pusha, push args, , move copy of stack pointer into base pointer, do your function stuff. then popa and retf de-allocating the locals and arguments... I can only imagine the horror-show that must be in an interpreted language.

And for what? "Wah wah eye dunz wunna yuz teh four loupe?". I look at the crazy hoops a lot of people will go through just to avoid it, and it's utterly nutters.


const fruits = ["apple", "orange", "cherry"];
let text = "";
for (let fruit of fruits) text += fruie;
document.getElementById("main").textContent = text;

Not that one would do that in real life, given the power of Array.join.

Laugh is, I suggested using for/of on another site, and someone said "stop being stuck in the past, for loops are ancient"... IT's like "hey bozo, for/of is newer than Array.foreach" I mean For/of seems like it was created for the explicit purpose of being a more efficient method than Array.foreach!

But don't try to argue with the "every line needs to be its own function, for/if/swtich/case are teh evilz" folks.

But what do I know, I'd have coded your final example as:


// assuming main is empty

const
    fruits = ["apple", "orange", "cherry"],
    main = document.getElementByID("main");
    
for (let i = 0, fruit; fruit = fruits[i]; i++) main.append(
    i, ": ", fruit, document.createElement("br")
);

Since assignment as the comparison results in the fastest loop, given you have no -- and likely wouldn't have -- loose false values in the array. Also, append is awesome. Be even more awesome if it included references to the nodes it created.

And I trust innerHTML with data about as far as I could throw the USS Iowa. YMMV.

Some comments have been hidden by the post's author - find out more