CODEWITHSUNDEEP
javascriptreturnthis
mtx
mtx

Reputation: 1234

Performance implications of return vs this in a javascript function

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?

Upvotes: 1

Views: 347

Answers (1)

StriplingWarrior
StriplingWarrior

Reputation: 156544

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().

Upvotes: 1

Related Questions