Passing an array.push function in javascript

Question

I have a problem passing an array.push function in javascript having a code like this:

const array = [];
    addToArray("works", (e) => array.push(e));
    addToArray("notWorks", array.push);
    doConsoleLog("hello", console.log);
    
    function addToArray(element, pushFn) {
      pushFn(element);
    }
    
    function doConsoleLog(message, log) {
      log(message);
    }

Just curious how's that first call of addToArray works, but second causes TypeError: Cannot convert undefined or null to object. How is it possible? Type of array.push is a function. It is not possible to pass functions directly like in the case of console.log above, which works pretty well?

Answer 1

push is a method of array. When invoked, it uses this as a reference to the object it is being called on. If you pass it around like a normal function, you will lose that reference, the method will use the value of this defined at the moment of the call (inside addToArray, this is probably document.window), and will therefore fail.

In order to pass around a method, you need to bind it to the object you want it to operate on, in this case array. This is true for any object method in JavaScript. Function.prototype.bind() exists exactly for this purpose: it "binds" a function (in this case your method) to a given value of this, in order to work correctly.

const array = [];

addToArray("now it works", array.push.bind(array));
// or
addToArray("now it works", Array.prototype.push.bind(array));

function addToArray(element, pushFn) {
  pushFn(element);
}