Understanding arrow function parameters

user_13097580 0
Viewed 77

I just practiced a standard basic whiteboard problem: Create an array filled with integers from 0 through n. My solution worked but there were others posted that had very unusual syntax. I am really trying to understand it but the MDN docs aren't helping me very much. I can put together how {length: n} works but (_, i) => i seems strange. _ is the unnamed function and it takes in i and returns i? but why is that there? I would love any help.

My solution:

function arr(n){
  var newArr = [];
  for(var i = 0; i < n; i++){
    newArr.push(i);
  }
  return newArr;
}

New syntax solution:

const arr = n => Array.from({length: n}, (_, i) => i);
ecmascript-6 arrays loops javascript
1 Answers

The first argument to the mapper function Array.from can accept indicates the current element being iterated over. That is, from an array-like collection of length 3, for example, that argument will be arrLike[0], or arrLike[1], or arrLike[2].

If there aren't any elements at that point in the collection, like here, then accessing those indicies will return undefined:

const arr = n => Array.from({length: n}, (_, i) => {
  console.log(_);
  return i;
});

arr(3);

The underscore is just a variable name. You can define it however you want. It's a common convention for an unused argument to be called _, but it's only a convention, not a syntax rule.

Since the mapper function only cares about the current index being iterated over in order to construct the new array, it defines the second argument i and then returns it immediately. (Array.from can iterate over any object with a length property, from 0 to length - 1. Even if none of those properties actually exist on the object, the index, the second argument, will still be incremented from 0 up to length - 1.)

user_95152070
Related