DEV Community: Manoj

function vs expression vs arrow definitions - Performance comparison (Part 3)

Manoj — Wed, 16 Aug 2023 20:32:11 +0000

In this post we are going to compare performance of javascript functions created with function definitions vs function expressions vs arrow functions.

To test this, we created three types of files:

withFunctionDefinition.js - contains simple function definitions
withFunctionExpression.js - contains function definitions using function expression syntax
withArrowDefinition.js - contains function definitions with arrow syntax

withFunctionDefinition

Lets create a file with name withFunctionDefinition.js and add 1 million function definitions to the file.

withFunctionExpression

Lets create another file with name withFunctionExpression.js and add 1 million function definitions using expressions to the file.

withArrowDefinition

Lets create yet another file with name withArrowDefinition.js and add 1 million arrow functions.

Results

File withFunctionDefinition takes a constant time to get executed and has the best overall performance.
The time complexity of files withFunctionExpression and withArrowDefinition grows linearly alongwith number of functions defined in the file (and both are similar)

References

https://github.com/manojadams/js-objects-memory/blob/main/function-definition_vs_function-expression_vs_arrow-function/README.md

Effortless react forms with Material UI

Manoj — Mon, 07 Aug 2023 20:02:28 +0000

In this article, we would see how to create react forms effortlessly using Material UI and json.

We are going to create a registration form using MuiForms react library.

Install MuiForms

npm install mui-forms

Define your schema

{
"fields": [{
        "name": "first_name",
        "meta": {
            "displayType": "text",
            "displayName": "First Name",
            "displayProps": {
                "md": 6,
                "sm": 6
            }
        }
    }, {
        "name": "last_name",
        "meta": {
            "displayType": "text",
            "displayName": "Last Name",
            "displayProps": {
                "md": 6,
                "sm": 6
            }
        }
    }, {
        "name": "email",
        "meta": {
            "displayType": "email",
            "displayName": "Emal"
        }
    }, {
        "name": "password",
        "meta": {
            "displayType": "password",
            "displayName": "Your password"
        }
    }]
}

Create a file with name schema.json (or any other name) and save it.

Add to your app

import React from "react";
import MuiForms from "mui-forms";
import schema from "./schema.json";

function MyForm() {
  return (
   <MuiForms 
      schema={schema} 
      onSubmit={(formData) => {
        // handle form submission
      }}
    />
  )
}

Registration form is ready

Reference:

Registration form link

Github source

Class vs Function Objects- Memory comparison (Part 2)

Manoj — Thu, 03 Aug 2023 20:40:24 +0000

Introduction

It is a common practise for JavaScript developers to use function definition to create Objects rather than class definition.

Note
Here we are going to compare the memory size of objects created using a single definition type (i.e either class definition or function definition).

Expectation

And it may seem that the objects created through both the ways should be similar in size, but are they really similar or one way is more memory efficient than the other?
Lets find out.

Steps

To start with, we created 1 million JavaScript Objects using class definition and 1 million JavaScript Objects using function definition.

We compared both and the result is surprising.

Objects created with class

Memory snapshot (using chrome dev tools) - 1 million objects

// Create a basic class with name MyClass
class MyClass {
    constructor(arg) {
        this.value = arg;
    }
    method1() {
        console.log("lorem ipsum demo1");
    }
    method2() {
        console.log("very different lorem");
    }
}

Objects created with function

Memory snapshot (using chrome dev tools) - 1 million objects

// Create a basic function with name MyFunction
function MyFunction(arg) {
    this.value = arg;

    this.method1 = function() {
        console.log("lorem ipsum demo1");
    }

    this.method2 = function() {
         console.log("very verdifferent lorem");
    }
}

Results

Name	Detail
Objects created with class	*16 10^⁶ Bytes**
Objects created with function	*24 10^⁶ Bytes**

Objects created with function have a far greater size.

Now, lets see what if we create objects with nested function structure

Objects with nested functions

Memory snapshot - 1 million object instances

// Create a basic function with name MyFunction
function MyFunction_withInnerFunction(arg) {
    this.value = arg;
    function method1() {
        console.log("lorem ipsum demo1");
    }
    function method2() {
         console.log("very verdifferent lorem");
    }
}

Overall results

The shallow size** of objects created with function is high.
The retained size** of objects created with function is very high.

Name	Detail
Objects created with class	*16 10^⁶ Bytes**
Objects created with function	*24 10^⁶ Bytes**
Objects created with nested function	*16 10^⁶ Bytes**

**Terminology

Shallow size - size of memory held by object itself
Retained size - size of memory held by object and memory of its references (not memory held by referenced objects but the references itself).

Reference:

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

Manoj — Tue, 01 Aug 2023 14:32:45 +0000

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

DEV Community: Manoj

function vs expression vs arrow definitions - Performance comparison (Part 3)

withFunctionDefinition

withFunctionExpression

withArrowDefinition

Results

References

Effortless react forms with Material UI

Install MuiForms

Define your schema

Add to your app

Registration form is ready

Reference:

Class vs Function Objects- Memory comparison (Part 2)

Introduction

Expectation

Steps

Objects created with class

Objects created with function

Results

Objects with nested functions

Overall results

**Terminology

Reference:

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

Introduction

Object types under test:

Expectation

Test

Objects created with single class

Memory snapshot (Using chrome devtool)

Objects created with functions

Memory snapshot

Objects created with multiple classes

Memory snapshot

Results

References

Objects created with `functions`

Objects created with `multiple classes`