How add a function to an object without memory inefficiency in JavaScript

Question

Suppose we have an object foo

var foo = {
 x: 0
}

And we add a function fx to it like this:

foo.fx = function() {do_something(this.x)}

If we do this process in a loop or in a function call for multiple times, does the JavaScript engine create that fx function multiple times or does it create the function for once and just change address of this?

e.g

function objectMaker() {
     function fx() {
         this.x += 1; 
     } 

     var foo = {
        x: 0,
        fx: fx
     } 

     return foo;
}

Does the objectMaker function always allocate memory for fx method or does it create it only once?

I guess modern JS engines avoid wasting memory by recreating the same object multiple times, but it's hard to be sure. — Jeremy Thille
– Jeremy Thille, Commented Dec 10, 2019 at 16:14
In your example with function I think that on each call of objectMaker new part of memory is allocated for fx jsfiddle.net/angkq8y7/1 — Nenad Vracar
– Nenad Vracar, Commented Dec 10, 2019 at 16:18

Ori Drori · Accepted Answer · 2019-12-10 16:20:24Z

2

Since functions are passed by reference (like arrays), if you declare the function once, you can assign it to multiple objects, without duplicating it.

In your objectMaker the fx function is redefined whenever you call the function. Extract fx out of the objectMaker (define once), and assign it to each created object.

// define the function once
function fx() {
  return this.x += 1;
}

function objectMaker() {
  return {
    x: 0,
    fx
  }
}

var foo = objectMaker()
var bar = objectMaker()

console.log(foo.fx())
console.log(bar.fx())
console.log(foo.fx === bar.fx)

edited Dec 10, 2019 at 16:20

answered Dec 10, 2019 at 16:14

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

thanhtunguet · Accepted Answer · 2019-12-10 16:32:40Z

0

In Javascript, functions also are objects. If you define a function inside another function's brackets, Javascript will create a new function every time the outer function was called. If you want the function will be defined once, define it globally.

answered Dec 10, 2019 at 16:32

thanhtunguet

601 silver badge6 bronze badges

Comments

Ravi · Accepted Answer · 2019-12-10 16:41:43Z

0

Every call to objectMaker you are recreating the fx function. Move it outside to global scope so only one instance is created

answered Dec 10, 2019 at 16:41

Ravi

2,5883 gold badges27 silver badges33 bronze badges

1 Comment

dandavis Over a year ago

function re-use has been allowed by the spec since v3.

Collectives™ on Stack Overflow

How add a function to an object without memory inefficiency in JavaScript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related