Class objects vs function objects — a memory comparison (Part 1)
Tags: javascript, performance, memory
Published: 2023-08-01 14:32:45

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**_).

```javascript
// 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();
```javascript

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

```javascript
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)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwpd1fmkj66yxs7wspbw.png)

### Objects created with `functions`
- Created 10 function methods.
- Created 1 million object instances.

#### Memory snapshot

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79robohxamz7foginzhp.png)

### Objects created with `multiple classes`
- Created 10 wrapper classes for each function. 

#### Memory snapshot

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3o88v7zj1p0t0v6eljt.png)

## 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