Q:

Confusion about { length: } provided below

Using React (JSX) programming and I've encountered the following code :
range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)
I wanna know what does length : { length: max - min + 1 } and underscore : (_, i) => min + i) does and returns.
I have tried reading the docs for Array.from and still doesn't understand what the length and underscore means.
Are there any pages where I can learn those two length and _?
Thanks!

A:

Here is a good explanation of Array.from. From the docs, we can see that Array.from takes 1-3 arguments. 

Array.from(arrayLike[, mapFn[, thisArg]])

With one argument, it tries to turn whatever was passed as the argument into an array. So:
Array.from("foo") become ["f", "o", "o"]. Cool!
With two arguments, Array.from uses the second argument as a function and tries to apply it to each element of the array that was created from the first argument.
So if you had Array.from("foo", el => el.toUpperCase()); it would turn the string "foo" into ["f", "o", "o"] and then run the function el => el.toUpperCase() on each letter and you would end up with ["F", "O", "O"]. Neat!
You have this: 
Array.from({ length: max - min + 1 }, (_, i) => min + i)
It's similar to our Foo example. The first argument becomes an array and the second argument is a function that gets applied to each element of the new array.
This is just like Array.map!
So, first, let's figure out what happens if we do Array.from with an object: Array.from({ length: 3 }). Wow! We get [undefined, undefined, undefined].
For each element, it runs the function given in the second argument: (_, i) => min + i). Looking at the map documentation we can see

arr.map(function callback(currentValue[, index[, array]])

so that _ is a variable that holds the current value of the element in the array. The value in each element is undefined which is why they used an underscore. They don't care about the value. What they do care about is the index. And that is the second argument to the map function.
Let's try it: Array.from({ length: 3 }, (_, i) => i) gives us [0, 1, 2]. Awesome! So it takes the object, makes an array from it, then uses that to map the index of each element to a new array.
Still, there's some min/max stuff in there. I think you can see where this is going.
They wrap the cool function in another function an pass in the min (the start value) and the max (the end value). Then they create an array of undefined values of that length. THEN fill the array with the indexes adjusted from the minimum. So range(5, 10) probably gives us [5...10]. Let's try it.
const range = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i); gives us [5, 6, 7, 8, 9, 10]. Sweet!
Now, you had range: (min, max) => ... not const range = (min, max) => .... That is probably because your range is a method of an object. There is probably some code somewhere that says const somelibrary = { range: (min, max) => Array.from({ length: max - min + 1 }, (_, i) => min + i)} or something similar. And to call the range method, you need to do somelibrary.range(5, 10). But the result is the same.
You end up with an array filled with values starting at min and ending at max.
Hope this helps!

