What does .push.bind do?

Question

I'm trying to learn coding in Javascript and came across this question and have a few questions. What does results.push.bind(results) do in this question? Please see question below:

Suppose getData is a function that takes a query object and returns a promise for the result of the query. Suppose also that someArrayOfQueries is an array of query objects. Explain what would be printed by the following code and why:

function runMultipleQueries(queries) {  
    var results  = [];  
    queries.forEach(doQuery);  
    return results;  
    function doQuery(query) {    
        getData(query)      
            .then(results.push.bind(results));  
    }
}
function log(value) { 
    console.log(value);
}

runMultipleQueries(someArrayOfQueries).forEach(log);

Answer 1

In Javascript, unlike in other Object Oriented languages, the variable this is quite complicated and can be changed many times.

When working with arrays, the function push takes the array it is called "on", and puts a new element to the end of it. In this case, the push function knows what array it is working on by reading the this variable.

Imagine this example code:

var myDataStructure = {};
myDataStructure.value = 0;
function addOneToValue() {
  this.value += 1;
}
myDataStructure.addOne = addOneToValue;
myDataStructure.addOne(); // here - the variable `this` == myDataStructure

However, if you call the function addOneToValue with the code addOneToValue(), the value of this is not in fact myDataStructure. It is undefined, or a global object like window.*

To manually force addOneToValue to always use myDataStructure as the this value, you can do the following:

addOneToValue = addOneToValue.bind(myDataStructure);

Now you can safely call addOneToValue(), since the this value was bound to myDataStructure.

In your code, runMultipleQuery is passing the function to another handler, who will not call the function like results.push. That means when the function is called, push will again have an uncertain this value. However, by calling bind, we can ensure that runMultipleQuery calls the push function and forces this to be the results variable.

Answer 2

What results.push.bind(results) does is it forces the method call of push to use the scope of results.

TLDR; results is an Array. results.push() is a call to Array#push, but by passing the function results.push directly to the Promise Promise#then it will be called within a different scope.

That is, the keyword this will reference a different object.

By using bind (e.g. - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), the scope will be "bound" to a specific Object.

The reason for this is because JavaScript is a prototype language, rather than an object-oriented language.

Answer 3

What does .push.bind do?

Returns the .length of the array, when called

function runMultipleQueries(queries) {
  var results = [];

  return Promise.all(queries.map(doQuery));

  function doQuery(query) {
    return Promise.resolve(query)
      .then(results.push.bind(results))
  }
  
}

function log(value) {
  console.log(value);
}

runMultipleQueries([10, 20, 30]).then(log);

Note, that as astutely observed and alerted to by @Bergi, the pattern .then(results.push.bind(results)) actually returns the .length of the array.

One solution which still includes the use of the pattern is to chain a second .then() to get the .length returned by previous .then() and return the element of the array by subtracting 1 from the value and using bracket notation

function runMultipleQueries(queries) {
  var results = [];

  return Promise.all(queries.map(doQuery));

  function doQuery(query) {
    return Promise.resolve(query)
      .then(results.push.bind(results))
      .then(len => results[len - 1]);
  }
  
}

function log(value) {
  console.log(value);
}

runMultipleQueries([10, 20, 30]).then(log);

though creating results array is not necessary when using Promise.all(), which returns an array of values

---

.forEach() alone will not await the previous result of getData() call, results will probably be an empty array at runMultipleQueries(someArrayOfQueries).forEach(log);

Use Promise.all() and .map() instead of .forEach(), return the Promise from getData() call

function runMultipleQueries(queries) {

  return Promise.all(queries.map(doQuery));

  function doQuery(query) {
    return new Promise(function(resolve) {
      setTimeout(function() {
        resolve(query)
      }, Math.floor(Math.random() * 1000))
    })
  }
  
}

function log(value) {
  console.log(value);
}

runMultipleQueries([1,2,3]).then(log);