JavaScript function parameter question: How are parameters used when there is no argument?

Question

I'm new to JavaScript, and I can never find an explanation to this in the tutorials I have gone through.

This example function calculates the length of user names.

My question is: How does "name" work in the function? It seems to be completely arbitrary what I call it, and how exactly does it work? In all explanations of functions I've gone through, the function parameter is used when the function is called with an argument, but there is nothing like that here.

It seems to me like "name.length" works like "users.length", but I don't understand why it's written like this.

const users = ['Nathan', 'John', 'William'];

const nameLengths = users.map(function(name) {
   return name.length;
});

console.log(nameLengths);

The function passed in `Array#map` is a callback which is executed for every item in `array` and currentValue is being used as `name` in this example. — Rayon, Jul 06 '19 at 09:21
You can go through [map polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Polyfill) to understand how it is working — Code Maniac, Jul 06 '19 at 09:24
`map` is irrelevant, I could have made the example with another method. I'm wondering, how does this parameter get it's data? — committer, Jul 06 '19 at 09:28
It gets its data when it's "called back", once for (and with) each value in the array. — jonrsharpe, Jul 06 '19 at 09:34

score 1 · Answer 1 · answered Jul 06 '19 at 09:20

1

That's an anonymous function, with name being its parameter. The map method "feeds" the function with each array element as it iterates through the users array.

answered Jul 06 '19 at 09:20

Shomz

37,421
4
57
85

I know that `name` is the parameter, but how does it get it's data? – committer Jul 06 '19 at 09:22
I've explained it in the second sentence - the function gets called for each array element. – Shomz Jul 06 '19 at 09:55

Jack Bashford · Accepted Answer · 2019-07-06T09:36:20.100

That function inside map is known as an anonymous function because it has no name. If you see the docs, the argument list for the callback is:

currentValue[, index[, array]][, thisArg]

So map's callback function takes the currentValue each time it runs - in your code, this is called name. It gets its data because map is a glorified for loop with a couple of extra features - you could write your code like this if you like:

const users = ['Nathan', 'John', 'William'];

let name;
let nameLengths = [];

for (let i = 0; i < users.length; i++) {
  name = users[i];
  nameLengths.push(name.length);
}

console.log(nameLengths);

But map is easier - plus, it shows that the array is being modified/mutated, because that's the primary role of map. A better version of the above would be:

const users = ['Nathan', 'John', 'William'];

const cb = name => name.length;

let name;
let nameLengths = [];

for (let i = 0; i < users.length; i++) {
  name = users[i];
  nameLengths.push(cb(name));
}

console.log(nameLengths);

In the above code, you can clearly see the different parts of map - cb is the anonymous function that accepts name as a parameter and returns name.length, and you can also kind of see how map is pretty much a for loop/

Also I was using `const` because the OP was using `const` - I would have used `let`. — Jack Bashford, Jul 06 '19 at 09:37

JavaScript function parameter question: How are parameters used when there is no argument?

2 Answers2