Passing process.stdout.write directly vs through callback gives different output?

Question

I'm not quite sure why this is happening, however I have the following which I wrote:

const runScript = (cmd, args) => {
  return new Promise((res, rej) => {
    // spawn a new process
    const ls = spawn(cmd, args);

    ls.stdout.on("data", (data) => {process.stdout.write(data)});

    ls.stderr.on("data", (data) => {process.stderr.write(data)});

    ls.on("close", code => {
      console.log(`Command ${cmd} ${args} exited with code ${code}`);
      code === 0 ? res(code) : rej(code);
    });

    ls.on("error", code => {
      rej(code);
    });
  });
};

This works fine. But I figured I could change the .on("data") event handlers to just pass in the write function directly. So I switched from

ls.stdout.on("data", (data) => {process.stdout.write(data)});

To

ls.stdout.on("data", process.stdout.write);

Depending on the command, I either get no output with the refactored version (passing .write directly) or an EPIPE. I thought they were the exact same. What's happening exactly here? I'm suspecting it has something to do with either the buffering or what process is referring to.

Answer 1

When you pass process.stdout.write as an argument, it reads the value of process.stdout.write and passes JUST the function pointer to the write method. Then, when ls.staout.on() calls that method sometime later, it's not bound to process.stdout and it does not work properly.

Instead, change to this:

ls.stdout.on("data", process.stdout.write.bind(process.stdout));

And, it will be properly bound to the desired object when it is called.

See How this is set inside a function call for a summary of how this is controlled inside a function.

---

As a bit simpler example, see this:

class X {
    constructor(val) {
        this.val = val;
    }
    add(otherVal) {
       return this.val + otherVal;
    }
}

let x = new X(3);
let fn = x.add;
fn(5);               // doesn't work properly

Examples of things that would work properly:

let x = new X(3);
x.add(5);       // obj.method() sets proper value of this to obj in the method

Or, if you want to pass around the method:

let x = new X(3);
let fn = x.add;
fn.call(x, 5);   // fn.call(x) artificially sets this to x inside the method

Or this:

let x = new X(3);
let fn = x.add.bind(x);  // creates stub function that calls method properly
fn(5);

This won't work either because when fn(5) is called, there's no binding to the x object so when the function runs, the reference to this inside the add() method won't have a proper value of this and it won't work properly.

When this code does let fn = x.add, it gets a pointer to the add method, but there's no binding to the x object. That gets lost. Then, when you call fn(5), since the this value in Javascript is set according to how a function is called, this is just an ordinary function call so the this value is set to undefined (in strict mode) or the global object (when not in strict mode). In either case, it's not the desired x object. To make it the x object, it has to be called as x.fn() of the this value has to be artificially set some other method such as with .apply(), .call() or .bind().

In your case above, since you don't control the caller of the function (it's being called by other code that you don't control), then .bind() is an appropriate solution.