-1

I don't understand why the followings provide different results, and on the second one I see people using an underscore (_, i), but I am not really sure what it does.

  1. let test1 = Array.from(5, (v,i) => i); //empty array;

  2. let test2 = Array.from({length:5}, (v,i) => i); // [0,1,2,3,4]

I don't get why I need to pass an object to get an array populated of the first n numbers. Could someone please explain?

Boban
  • 7
  • 3
  • 2
    Because that's how `Array.from` works. *"`Array.from()` lets you create Arrays from 1) iterable objects (objects such as `Map` and `Set`) 2) array-like objects (objects with a `length` property and indexed elements*". The number `5` doesn't satisy either of these conditions. The object with `length` property satisfies the second condition – adiga Apr 24 '21 at 07:49
  • Check what is expected to be passed as a first argument: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from – zerkms Apr 24 '21 at 07:49
  • what if length is -1 ? – LongChalk Jun 23 '22 at 08:56

3 Answers3

1

Let's see the signature of Array.from() method first.

Array.from(arrayLike, mapFn)

So, the first argument should be an arrayLike object (an object that has a length property of a non-negative integer). You can pass an array, string, etc. as well.

The second parameter is a map function which maps the the elements of the first argument (arrayLike) to the returned value from the callback function.

This map function takes a callback function with following signature.

callback(value, index)

The map function creates a new array populated with the results of calling the callback function (v, i) => i on every element in first argument of Array.from.

Now, let's see first case,

let test1 = Array.from(5, (v,i) => i);

Here, (v, i) => i is a map function. v is element of arrayLike object and i is the index of that element. The index i is returned.

But, 5 is neither an array nor an arrayLike object and the length property of 5 is undefined. So, map function maps no (zero) element and produces an empty array. Think of the following implementation.

function mapFn (arrayLike, callback) {
   let result = [];
   for (let i = 0; i < arrayLike.length; i++) {
       let mappedValue = callback(arrayLike[i], i);
       result.push(mappedValue);
   }
   return result;
}

If you pass 5 to the mapFn function, the for loop iterates 0 times and mapFn returns an empty array.

In case of second example,

let test2 = Array.from({length:5}, (v,i) => i); // [0,1,2,3,4]

{length: 5} is an arrayLike object. The map function produces an array with returned values of the callback function. The callback function returns index. Hence, [0,1,2,3,4].

In the callback function only the i parameter is used and returned from the function. v argument is not used. But, it needs to be there so that the second parameter i can be accessed. So, (_, i) is same as (v, i). You can name the parameters with any valid variable name.

lmngz
  • 93
  • 6
  • Perfect explanation. I read that Array. from(5), creates an undefined array of length 5 so I would have thought that an Array does exist. I also read that with this method the keys are not assigned (are undefined), is that the reason when you say: "But, 5 is neither an array nor an arrayLike object. So, running the map function doesn't produce an array"? – Boban Apr 24 '21 at 15:06
  • I have edited my answer. `length` property of `5` is `undefined`. So, map function maps no (zero) element and returns an empty array. By the way, `new Array(5)` creates an array of length 5 with `undefined` elements. – lmngz Apr 25 '21 at 02:31
0

You are basically following the following approach

Array.from(arrayLike, (currentValue, index) => { ... } )

So the arrayLike variable needs to be either a string, map ... or it should be an object determining the length of the array (like in your case). So in your case the size of the array is determined by the arrayLike object. currentvalue is undefined every time the arrow function runs and the index goes from 0 to arrayLike.length - 1.

Dejazmach
  • 742
  • 8
  • 15
0

Because it is expecting and arrayLike object and arrays have a length property.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60