Performance implications of return vs this in a javascript function

Question

What is the difference between following code bits:

function Foo(context) {
  let mode;

  function setMode(m) {
     mode = m;
  }

  function doStuff() {
    if(mode === 'param') {
      // ... do stuff with context
    } else {
      // ... do different stuff with context
    }
  }

  this.setMode = setMode;
  this.doStuff = doStuff;
}

vs

function Bar(context) {
  let mode;

  function setMode(m) {
     mode = m;
  }

  function doStuff() {
    if(mode === 'param') {
      // ... do stuff with context
    } else {
      // ... do different stuff with context
    }
  }

  return {
    setMode,
    doStuff,
  }

}

In Foo I use this to 'augment' the new instance of Foo function:

const f = new Foo();
f.setMode('param');
f.doStuff(stuff);

In Bar I return 'new' object with methods each time function Bar is called:

const b = Bar();
b.setMode('parampam');
f.doStuff(stuff);

Are there any benefits (performance? memory usage?) of using one way or another? return vs this?

I am familiar with lexical 'this' scope, and how closure works but I'd like to know if above choice is purely syntactical or it has performance implications?

Which is faster?

VLAZ
– VLAZ

2022-06-16 16:54:43 +00:00
Commented Jun 16, 2022 at 16:54 — VLAZ
– VLAZ, Commented Jun 16, 2022 at 16:54

StriplingWarrior · Accepted Answer · 2022-06-16 16:54:55Z

1

The performance implications will be trivial: don't worry about those unless this code is getting called a lot, and in that case it's better to benchmark both approaches to see how they're impacting performance in your specific case.

There are a few behavior differences involved. For example, new Foo().constructor points to the Foo function, whereas the object returned by calling Foo() or Bar() without the new keyword doesn't. Also, you can use the instanceof operator to check whether an object is an instance of Foo (meaning whether the object was constructed by calling new Foo()).

So you want to think about how you want users to think about your function.

If you want users to feel like they're creating an instance of a specific class type, and interacting with that class, use the first pattern. The fact that you have functions on that object that act like instance methods makes me think that's what you're going for in this case.

If you want users to feel like the function they're calling is going to procure an object and return it, use the second pattern. In that case, I'd probably rename Bar to something like getBar() or createBar().

answered Jun 16, 2022 at 16:54

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mtx Over a year ago

It is called a lot. I found similar code inside Three.js WebGLRenderer.render (with this) function which i think is optimized for performance (or at least supposed to be)

Collectives™ on Stack Overflow

Performance implications of return vs this in a javascript function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related