Object deconstructions in function parameters is SLOW in JavaScript
I love using object deconstruction in function parameters since you don't have to search through the entire codebase for the usage of the function when you change the parameters (or their required/optional states) of the function.

However, I was bothered that deconstructing the object probably had some cost, so I created a simple benchmark.

___

We have a very dumb function with all optional parameters. It just takes the variables, converts them to lowercase, and returns them as an object.

The first function is the default method with no object deconstructing:

greetOne: (
name?: string,
lastName?: string,
profession?: string,
age?: number
) => {
return {
name: name?.toLowerCase() || "John",
lastName: lastName?.toLowerCase() || "Doe",
age: age?.toString().toLowerCase() || "30",
profession: profession?.toLowerCase() || "Developer"
};
}

The second function utilizes object deconstructing:

greetTwo: ({
name,
lastName,
age,
profession
}: {
name?: string;
lastName?: string;
age?: number;
profession?: string;
}) => {
return {
name: name?.toLowerCase() || "John",
lastName: lastName?.toLowerCase() || "Doe",
age: age?.toString().toLowerCase() || "30",
profession: profession?.toLowerCase() || "Developer"
};
}

The third one also uses object deconstructing but it's a bit fancier because when you don't want to pass any parameters, functionName() is simpler than functionName({}) (and this has less Typescript clutter):

greetThree: (props?: {
name?: string;
lastName?: string;
age?: number;
profession?: string;
}) => {
const { name, lastName, age, profession } = props || {};
return {
name: name?.toLowerCase() || "John",
lastName: lastName?.toLowerCase() || "Doe",
age: age?.toString().toLowerCase() || "30",
profession: profession?.toLowerCase() || "Developer"
};
}

___

The test cases are straightforward, we call the functions with all parameters filled in, with one missing optional parameter, and with no parameters, like so:

greetOne("John", "Doe", "Developer", 30);

greetOne("John", "Doe", "Developer");

greetOne();

___

The results show that the second and third approaches are pretty similar in terms of performance but the first one beats both of them by a 4x margin.

GREET ONE

Ops/s: 196,568,269

Average run time: 0.0000051 ms

GREET TWO

Ops/s: 45,502,358

Average run time: 0.000022 ms

GREET THREE

Ops/s: 45,354,398

Average run time: 0.000022 ms

You can test this in your browser through https://tinyurl.com/3d43kp4t

___

Note: This is just a simple benchmark I wrote in 5 minutes. I might have miscalculated some stuff.

Note 2: The benchmark repeatedly runs the function for hundreds of thousands of times in 3 seconds. In a real-world application, you probably won't call a function THIS MUCH. The difference between 0.000022ms and 0.0000051ms is non-existent when you're calling the function once or twice.

But if you do call a function in a loop, this many times, you probably don't want to use object deconstruction in parameters.

Note 3: The function example I used is very simple and it doesn't take much time to execute the inner code. If your application is something that uses fetch or anything that takes at least 1 ms, the difference is still negligible.