CODEWITHSUNDEEP
javascriptperformanceoptimization
Aron Maguire
Aron Maguire

Reputation: 31

Javascript: Constructor function vs Object Initializer speed

Is there any difference between the run speeds of a constructor function when compared to an equivalent object initializer?

For example

function blueprint(var1, var2){
    this.property1 = var1;
    this.property2 = var2;
}

var object1 = new blueprint(value1,value2);

vs

object1 = {property1:value1, property2:value2};

If there is, is it relevant enough to be of concern when optimizing code or would file size take priority?

Upvotes: 3

Views: 3604

Answers (7)

Vasily Liaskovsky
Vasily Liaskovsky

Reputation: 2528

For following ways of creating an object:

  1. Class with predefined properties
  2. Class that adds properties directly in the constructor
  3. Object literal created completely at once
  4. Object created by adding properties by one

...I created benchmarks:

  1. Object creation
  2. Object access

I tested this on Chrome v126 and Firefox v128 and results are different:

  • Chrome: object creation is fastest using class with predefined properties with other ways slower about 15-25%. However, access for objects constructed by predefined class is considerably slower (x4) with other options performing relatively even.
  • Firefox: object creation is considerably faster (x4) when creating as plain object at once. Object access performance is even.

So, there is no single answer, choose what you need.

Upvotes: 0

user3483494
user3483494

Reputation:

The constructor function is used for multiple entries under the same "object". The object initializer should only be used for a limited amount of entries, for example 3.

The constructor function is faster for multiple entries while the ... object initializer is faster for few entries, at least in theory, I have not tested the speeds because I doubt the difference is catastrophic.

Upvotes: 1

Ian Nartowicz
Ian Nartowicz

Reputation: 11

Using a constructor to create a trivial object with just value properties is counter-productive. Just creating a simple object literal from scratch each time is faster. You can always define a function if it is to be called from lots of different places. Hey you just created a basic constructor function :lol:

If your object becomes non-trivial, for example including getters, setters, or full-blown methods, then a constructor (with the javascript in a prototype to be shared) is orders of magnitude faster than creating an object from scratch. Of course you are talking about a few micro-seconds (on a typical desktop) for creating an object with a small amount of embedded javascript vs less than a microsecond for calling a constructor, so in most cases it isn't important. Creating an object with only value properties is another order of magnitude faster.

Remember also that the initial creation of the constructor is an expensive operation, which may be more important if it is only to be used a few times. In some cases the constructor can be pre-compiled, for example if it is defined in a javascript code module in a Firefox addon, and then it is a win-win.

There are also more formal methods for creating objects such as the Object.create() function. However this is complicated and cumbersome to use and doesn't appear to be well optimised in any current browser. In all the tests I've run it is desperately slow compared to other methods, but might be useful when you need advanced capabilities and aren't going to be calling it hundreds of times.

Upvotes: 1

Michael Lorton
Michael Lorton

Reputation: 44386

If there is, is it relevant enough to be of concern when optimizing code or would file size take priority?

Neither.

It's extremely rare for decisions like this to have any (positive) effect on the system performance. Even if current browsers (or whatever your execution environment) show an observable advantage one way or another, that difference is not terribly likely to persist over new releases.

"It's much easier to optimize correct code than to correct optimized code."

Write readable, maintainable code and when it is all correct, check to see whether it is objectionably slow or the files are unreasonably large and make the optimizations.

Upvotes: 6

pete
pete

Reputation: 25081

Ran in console:

function blueprint(var1, var2){
    this.property1 = var1;
    this.property2 = var2;
}

var start = new Date();
var stop;
var object1;
for (var i = 0; i < 1000000; i++) {
    object1 = new blueprint(1,1);
}
stop = new Date();
console.log(stop - start);

Results...

 Google Chrome: 2832 milliseconds

Firefox 3.6.17: 3441 milliseconds

Ran in console:

var start = new Date();
var stop;
var object1;
for (var i = 0; i < 1000000; i++) {
    object1 = {
        'property1': 1,
        'property2': 1
    };
}
stop = new Date();
console.log(stop - start);

Results...

 Google Chrome: 2302 milliseconds

Firefox 3.6.17: 2285 milliseconds

Offhand, it's pretty obvious which one is faster. However, unless you are going through a significant amount of operations I think you should use whatever is more readable and not worry about it.

Upvotes: 6

ShankarSangoli
ShankarSangoli

Reputation: 69905

I think object intializer will be faster than using constructor because constructor has a function call and it has to maintain its own instance too.

As a side note, use constructor if you want to create multiple instances of similar objects other wise go for object initializer if only single object is required.

Upvotes: 4

casablanca
casablanca

Reputation: 70701

I wouldn't worry about it. The overhead of the constructor is an additional function call and a few extra properties to set (like the prototype). With modern JIT engines, it should hardly matter.

Upvotes: 0

Related Questions