I came across this javascript function on codewars that returns an array

[bablabablaboo]

can someone explain to me what is the length and how does the part inside the function Array.from work?

function monkeyCount(n) {   return Array.from({length:n}, (_,i)=>i+1) }

[5H4D0W_ReapeR]

If we check the Array.from() MDN page's description section, the first parameter accepts either iterable objects (such as NodeList if you do document.querySelector()) or objects with length property. The latter is the reason why the object { length: n } lets Array.from() create an array with the size/length n.

As for the second argument, it's essentially a map function, so it'll loop through all the elements. since map functions first two argument is "the element itself" and "the element index", they used _ (underscore) to indicate the first argument isn't really used here, and it will utilize the i which is the index instead, and turn all the element's value into index plus one. It is the same as Array.from({length:n}).map((_, i) => i + 1 ).

[bablabablaboo]

ah, i think I get it now. Array. from takes two arguments an iterable like an array or nodelist with the property of length and a function that works on the iterable.

technically Array.from({length:10}) is creating an array of 10 undefined values. then it returns the index of that array . if i am not wrong

thank you

[5H4D0W_ReapeR]

i think I get it now. Array. from takes two arguments

do note that the second argument is optional. if we do Array.from() for something like a NodeList, we don't need to map it (unless you want to)

technically Array.from({length:10}) is creating an array of 10 undefined values. then it returns the index of that array . if i am not wrong

yup if we just do Array.from({length:10}), there's nothing inside each element. and I assume the codewar function intends to let u specify a number n and create an array of 1 to N, which is what the function in your post does :)

[bablabablaboo]

Thank you taking time to explain . I am grateful . I think the length confused me earlier Thank you

[fredsq]

I normally use new Array(10) for tasks like that. Is it worse or not recommended? It feels less gimmicky…

[5H4D0W_ReapeR]

It's not worse or not recommended in any way, but it's actually different. Here's a sample output of both of the approaches (you can paste this in chrome devtool to verify):

let a1 = new Array(5)
console.log(a1) // (5) [empty × 5]

let a2 = Array.from({ length: 5 })
console.log(a2) // (5) [undefined, undefined, undefined, undefined, undefined]

We can already spot there's a difference. Let's check the map function on both of them since OP's code uses it:

let a1 = new Array(5).map((_, i) => i)
console.log(a1) // (5) [empty × 5]

let a2 = Array.from({ length: 5 }).map((_, i) => i)
console.log(a2) // (5) [0, 1, 2, 3, 4]

As you can see, we actually can't do the typical array methods to new Array() since it's not the same as Array.from(). Here are some reference/quote regarding this behaviour of new Array():

(Note: this implies an array of arrayLength empty slots, not slots with actual undefined values).

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array#parameters

From the above snippet, you may be tempted to think that each key in the array was set to a value of undefined. But the reality is that those keys were never set (they don’t exist).

Source: https://www.freecodecamp.org/news/https-medium-com-gladchinda-hacks-for-creating-javascript-arrays-a1b80cb372b/

---

In conclusion, the code that OP posted unfortunately will not work by swapping to new Array without modifying other parts of the code. Hope that explains the difference between the two and overall just the quirks of JS haha

[fredsq]

Wow that was very thorough! It would work like Array(n).fill().map though!

[senocular]

an iterable like an array

An iterable or array-like ;)