Is there any memory difference between objects created with class vs objects created 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 with class definitions.
Object types under test
Objects created with single class.
Objects created with different functions.
Objects created with multiple classes.
Objects with a single class
One single class will contain all 10 functions inside (for the purpose of our test)
class MyClass {
MyFunction1() {...} // here MyFunction is a class method.
MyFunction2() {...}
...
MyFunction10() {...}
}
// Object created using single class
const myClassObject = new MyClass();
Objects created with function
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).
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
| Size | Description |
| Object with single class > Object with functions (in size) | Each object of a single class contains multiple methods which is not true for an object with function. |
| Object with functions ~ Object with multiple classes | Sizes are similar |
| Object with single class > Object with multiple classes | Sizes of the object type is greater |
The Test
Objects with a single class
- Created 1 million object instances with a
single javascript class.
Memory snapshot (using Chrome dev tools)
Objects with function
Created 10 function methods.
Created 1 million object instances in total.
Memory snapshot
Objects with multiple classes
Created 10 wrapper classes for each function.
Created 1 million object instances in total.
Memory snapshot
Results
The memory consumed by objects created using a single class or multiple wrapper classes or multiple functions comes out to be 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