Dynamic parameters in JavaScript

Posted by

   



When working with JavaScript functions, it is often useful to assign default values ​​to parameters to ensure that the code works correctly even if some arguments are not passed. However, a common problem occurs when you want to set a default value for only a specific parameter without affecting the others.

🔗 Do you like Techelopment? Check out the website for all the details!


The Problem

In many programming languages, such as Python, you can pass arguments by name, allowing you to set just the desired value without having to specify all the previous parameters. For example, in Python we can write:


def my_function(arg1="The", arg2="World", arg3="is", arg4="yours"):
    print(arg1, arg2, arg3, arg4)

my_function(arg4="mine")


This code will only update arg4, leaving the other parameters at their default values.

In JavaScript, however, function parameters are positional, which means that to change just one value without affecting the others, we are forced to pass all the previous parameters as well, even if we don't intend to change them. Suppose we have the following function:


function myFunction(arg1="The", arg2="World", arg3="is", arg4="yours") {
    console.log(arg1, arg2, arg3, arg4);
}


If we only want to change arg4, we still have to provide values ​​for arg1, arg2 and arg3 as well, which makes the code less clear and more prone to errors:


myFunction("The", "World", "is", "mine");


This approach becomes problematic especially when the number of parameters increases and the default values ​​have to be repeated every time we want to change just one of them.


The Solution

To overcome this problem, we can use object destructuring with default values. This method allows us to pass an object as an argument to the function and specify only the properties we want to change, while keeping the default values ​​for the others.

Here's how we can implement this solution:


function myFunction({ arg1="The", arg2="World", arg3="is", arg4="yours" } = {}) {
    console.log(arg1, arg2, arg3, arg4);
}


Now we can call the function by changing only the desired parameter:


myFunction({ arg4: "mine" });


This call will update arg4 to "mine", while the other parameters will keep their default values.

Output


Why ={} is necessary?

The final ={} in the function declaration myFunction is used to handle the case where the function is called without arguments, as in the case:


myFunction();


Without ={}, if the function is called without parameters, JavaScript would attempt to destructure undefined, causing an error:

Thanks to ={}, If no arguments are passed, the function uses an empty {} object as the default value, avoiding the error and ensuring that the default values ​​of the parameters are retained correctly.

What we have learned

Using default values ​​for function parameters is common in JavaScript, but you have to be careful how you assign them to avoid unwanted behavior. By using nested default destructuring, we can ensure that each property has its own fallback value without accidentally overwriting the entire object.

This technique improves the robustness and readability of the code, making it more resistant to errors and easier to maintain, and brings the behavior of JavaScript closer to that of more flexible languages ​​like Python.


Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment