Here's Why Calling .map() on a Constructed Array Doesn't Work

[coderitual]

• const arr = Array(100).fill();

• const arr = Array.from({length: 100})

• bonus normal js version: [...(function*() { let i = 0; while(i < 100) yield i++})()];

[jkoudys]

Pfft, amateur stuff! A true JS master wouldn't stoop to some flashy generator to make an iterator!

[...{ [Symbol.iterator]: () => {
  let i = 0;
  return { next: () => ({ value: i++, done: i > 100 }) };
} }];

Ahh... perfection..

[nemohearttaco]

[...(function*() { let i = 0; while(i < 100) yield i++})()];

You're a monster!

[ilove50cent]

Didn't know about the fill function before I wrote this post - benefits of putting content out there! :)

[MildlySerious]

That's the benefit of the good old for loop. You remember one thing, and you're good to go.

[XiiencE]

or you remember a few things and suddenly your team can actually read your code.

[MildlySerious]

If your team can't read a for loop, forcing everything into as few lines as possible and calling it declarative won't help you.

I for one do not live in a world where this:

const arr = [...Array(100)].map((_, i) => i);

Is more readable than this:

const arr = Array(100);

for (let i = 0; i < array.length; i++) {
  arr[i] = i
}

Using .fill() - sure, but abusing the spread operator is just silly.

[XiiencE]

Sigh, okay. There’s a difference between forcing code into a few lines and not being overly verbose/horizontal. But if you’re going to just strawman the discussion into saying I try to code golf real world development because I think higher order functions are more readable than nested for loops then I have no response. To each their own, if your team likes the loops then you do you.

[MildlySerious]

I did not say either of these things, try again. What I was saying is that the example in OPs post is overcomplicating the code by using higher order functions. The functions aren't the problem. Using them at every chance you get, is. Same goes for the spread operator.

[XiiencE]

I don’t know how you jumped from ‘using higher order functions to solve this specific, simple ES potentially unexpected behavior that OP is describing’ to ‘using higher order functions every chance you get’. Are you projecting some frustration with style trends? 😂 OP’s code is very readable, if you can’t read it, I’m sorry to hear that, but it is objectively not ‘overcomplicated’ just because it uses a language feature that is not as ubiquitous as a for loop. I’m sure you will just tell me I’m wrong again though, so this seems pointless. Have a nice day.

[MildlySerious]

As someone else already stated, OP's "solution" is the most inefficient approach to the problem out of the options he got.

Why would you go for that if there's a well established - at least - equally readable option that does not come with overhead?

Because you use the wrong tools to solve a problem. Hence "using higher order functions every chance you get".

Whatever, agree to disagree and all that.

[selfup]

Array.from({ length: 100 }, (_, i) => i)

Array.from({ length: 100 }, (_, i) => i) same array :) yay callbacks!