Class objects vs function objects — a memory comparison (Part 1)

Is there any memory difference between objects created with class vs objects created with with function? Let's find out.

Introduction

In Javascript, a class is a special javascript function and can be defined either using the class keyword or class expression. This is similar to how a function is also defined (function keyword or function expression).

// 1. Using class definition
class MyClass {
  doSomthing() {
    console.log("do something");
  }
}

// 2. Using class expression
const MyClass = class {
  doSomething() {
    console.log("do something");
  }
}

For our test, we would be using 10 functions (2 is enough, but 10 is better) and would be mixing it with class definitions.

Object types under test:

• Objects created with single class.
  • One single class will contain all 10 functions inside. ```javascript

class MyClass {
MyFunction1() {...} // here MyFunction is a class method.
MyFunction2() {...}
...
MyFunction10() {...}
}

// Object created using single class
const myClassObject = new MyClass();

- Objects created with **_different functions_**.
  - Each **_object_** will be created from the corresponding _**function**_. 
```javascript


MyFunction1() {...}
MyFunction2() {...}
...
MyFunction10() {...}

// Objects created using functions
const myFunctionObject1 = new MyFunction1();
const myFunctionObject2 = new MyFunction2();
...
const myFunctionObject10 = new MyFunction10();

• Objects created with multiple classes.
  • Each class will contain one single function (ie. class will just be a wrapper around our function).
  • Practically classes are less likely to be used this way, but we would doing it anyways to get our test statistic.
  • 10 classes will have 10 functions inside.

class MyClass1 {

  MyFunction1() {...}

}

class MyClass2 {

  MyFunction2() {...}

}

...

class MyClass10 {

  MyFunction10() {...}

}

// Objects created with wrapper classes

const myClassObject1 = new MyClass1();

const myClassObject2 = new MyClass2();

...

const myClassObject10 = new MyClass10();

Expectation

As a JavaScript developer, below was our general expectation:

• Each object of "Object with single class" contains all 10 functions inside. So size of each object should be greater than size of object with functions (or object with multiple classes).

• Object with functions should be similar in size with object with functions (although object with multiple classes contains a wrapper class, we are ignoring it).

Size	Description
Object with single class > Object with functions	size of object with single class is greater
Object with functions ~ Object with multiple classes	sizes are similar
Object with single class > Object with multiple classes	size of object type is greater

Test

Objects created with single class

• Created 1 million object instances with the single javascript class.

Memory snapshot (Using chrome devtool)

Objects created with functions

• Created 10 function methods.
• Created 1 million object instances.

Memory snapshot

Objects created with multiple classes

• Created 10 wrapper classes for each function.

Memory snapshot

Results

The memory consumed by objects created using single class or multiple wrapper classes or multiple functions comes out as similar.

Size	Description
Object with single class ~ Object with function	similar size
Object with function ~ Object with multiple class	similar size
Object with single class ~ Object with multiple classes	similar size

References

You can check out the above test in the below link:
https://github.com/manojadams/js-objects-memory

Comments

[Anurag Bhattacharyya]

Nice article.