How do higher-order functions like .map() work inside JavaScript?

Question

Nowadays everyone is trying to use these higher order functions to get promising results by writing less code. But I want to know how these functions work internally.

Suppose I wrote something similar

var numbers = [16, 25, 36];
var results = numbers.map(Math.sqrt);
console.log(results); // [4, 5, 6]

I know that each element of the "number" array is iterated one by one, but how?

I tried looking for it but haven't gotten a satisfactory answer yet.

Answer 1

I think every supplier should follow Specifications

A real implementation (e.g. V8) might be a bit more complex, see this answer as a start. You can also refer to the v8 source code in github, but it may not be easy to understand part of it in isolation.

Quote from the above answer:

ES2015 specification:

1. Suppose O is ToObject(this value).
2. ReturnIfAbrupt(O).
3. Suppose len is ToLength(Get(O, "length")).
4. ReturnIfAbrupt(len).
5. If IsCallable(callbackfn) is false, a TypeError exception is thrown.
6. If thisArg is provided, let T be thisArg; otherwise, let T be undefined.
Suppose
7. A is ArraySpeciesCreate(O, len).
ReturnIfAbrupt(
8. A).
Let
9. k be 0.
Repeat while
10. k len
    Let
    1. Pk be ToString(k).
    Let
    2. kPresent be HasProperty(O, Pk).
    ReturnIfAbrupt(
    3. kPresent).
    If
    4. kPresent is true, then
       Let
       1. kValue be Get(O, Pk).
       ReturnIfAbrupt(
       2. kValue).
       Let
       3. mappedValue be Call(callbackfn, T, «kValue, k >, or".
       ReturnIfAbrupt(
       4. mappedValue).
       Let
       5. State be CreateDataPropertyOrThrow(A, Pk, mappedValue).
       ReturnIfAbrupt(
       6. status).
    Increase
    5. k by 1.
Return
11. A.

Answer 2

.map is just a method that accepts a callback, calls the callback for each item of the array, and assigns the value to the new array. It is nothing special. You can even easily implement it yourself:

Array.prototype.myMap = function(callback) {
  const newArr = [];
  for (let i = 0; i < this.length; i++) {
    newArr.push(callback(this[i], i, this));
  }
  return newArr;
}

var numbers = [16, 25, 36];
var results = numbers.myMap(Math.sqrt);
console.log(results); // [4, 5, 6]