How is array map working without passing the parameter?

Question

const arr2 = arr.map(double)

How this is working without me passing the array item? I need to pass a parameter to function double: something like double(item).

let arr = [1, 2, 3, 4, 5]

function double(x) {
  return x * 2
}

const arr2 = arr.map(double)

const arr3 = arr.map(item => double(item))

console.log("arr2= ", arr2)
console.log("arr3= ", arr3)

Output:

arr2 = [2, 4, 6, 8, 10]

arr3 = [2, 4, 6, 8, 10]

`double` is a function statement; thus passed directly as callback to an array's `map` method this function will be invoked with every iteration step of `map` (The implementation of) `map` itself takes care of passing the right parameters, the current values of `item`, `idx`, `arr` to this callback function. — Peter Seliger, Jul 22 '21 at 15:56
`map` is calling `double` in example one. In example two, `map` is calling an anonymous arrow function that calls `double` with a parameter. Both are being passed the current element as its first parameter. — Brian Thompson, Jul 22 '21 at 15:56
You also don’t pass the parameter `item` to the function `item => double(item)` yourself. You’re fine with that but are confused about the function `double`? — Sebastian Simon, Jul 22 '21 at 15:57
Does this answer your question? [Where do the parameters in a javascript callback function come from?](https://stackoverflow.com/questions/34624634/where-do-the-parameters-in-a-javascript-callback-function-come-from) — Sebastian Simon, Jul 22 '21 at 15:57
The second example uses an arrow function which just forwards its single `item` argument to `double`. Since the invocation of `double(item)` happens as part of the arrow function, the return value of `double(item)` automatically is the return value of that very arrow function. — Peter Seliger, Jul 22 '21 at 16:03

sergdenisov · Answer 1 · 2021-07-22T16:14:54.090

2

You can understand things like this by reading the code of polyfills. Simplified example:

Array.prototype.myMap = function(callbackFn) {
  const arr = [];
  for (let i = 0; i < this.length; i++) {
    // call the callback function for every value of this array
    // and push the returned value into our resulting array
    arr.push(callbackFn(this[i], i, this));
  }
  return arr;
}

In your case:

// for arr2
callbackFn === function double(x) {
  return x * 2
}

// for arr3
callbackFn === (item) => double(item)

edited Jul 22 '21 at 16:14

answered Jul 22 '21 at 16:05

sergdenisov

8,327
9
48
63

Just for the record ... The implementation of this polyfill does not meet the standard/specs for it does not take care of the callback's possible `this` context which gets provided as optional second parameter of `map` ... `arr.map(callback[, thisArg ])` – Peter Seliger Jul 22 '21 at 16:11
1

@PeterSeliger I know, but it's enough for understanding this case. [The polyfill from MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#polyfill) is too complicated. – sergdenisov Jul 22 '21 at 16:13
2

I knew you know, that's why I tried to be as neutral and informative as possible (not that someone gets the idea of starting to write own polyfills without reading the specs) ... and that's why I will upvote this A. as well as I did with the new conrtibuter's one. – Peter Seliger Jul 22 '21 at 16:16

score 1 · Accepted Answer · answered Jul 22 '21 at 15:54

1

Please read the map documentation.

The map method pass 3 arguments to the provided callback: the current element, the index and the original array.

You'll find everything in the doc.

answered Jul 22 '21 at 15:54

Marco Nisi

1,211
10
13

score 0 · Answer 3 · answered Jul 22 '21 at 16:09

you pass a function to the map function so basically in arr3 map function you created a new anonymous function using the arrow syntax that activate the double function inside but you didn't gave it the actual item this happens inside the map function

let arr = [1, 2, 3, 4, 5]

function double(x) {
  return x * 2
}

const arr2 = arr.map(double)

const arr3 = arr.map(item => double(item)) // This is a new function that you created

console.log("arr2= ", arr2)
console.log("arr3= ", arr3)

How is array map working without passing the parameter?

3 Answers3