Named arguments | JS

Today I am writing again to present a good practice that I discovered a short time ago and that I have been applying since then in any project that uses JavaScript. In this post we will see what the named arguments are and how they can help us to make code cleaner. Lets goo!!

Taking advantage of ES6 Destructuring

Destructuring is a functionality that is included with ES6, this functionality allows us to create simpler and more readable code, we will see an example of use before entering with the named arguments

const food = { tomato: "tomato", banana: "banana" }// use destructuring for get values, order doesnt matterconst { banana, tomato } = foodconsole.log(tomato) // output: "tomato"

Standard arguments Named arguments

To make the comparison of how the arguments behave in both cases we will use a function called createProduct()

Standard arguments

In this case we will use the arguments in the standard way, we will also introduce a argument called priceInEur with a default value of 1

/* Create a function with named arguments */function createProduct(name, priceInEur = 1, weightInKg, heightInCm, widthInCm){  // functionality}// call function and passing argscreateProduct('cookies', undefined, 20, 10, 10)

Here we observe one of the first drawbacks and that is that we need to pass an undefined value to preserve the order of the arguments defined in the function and so that it has its default value

Named arguments

For this example we will use the same function but in this case we will use the named arguments

/* Create a function with named arguments */function createProduct({ name, priceInEur = 1, weightInKg, heightInCm, widthInCm }){  // functionality}// call function and passing argscreateProduct({    name: 'cookies',    //priceInEur | set default value if not passed    weightInKg: 20,    heightInCm: 10,    widthInCm: 10})

As we can see what we call named arguments is nothing more than a destructuring of the keys of an object that in this case will act as arguments of the function.

Being a destructuring of an object we can take advantage of its advantages and for example dispense with optional arguments, change the order of the object's properties and some more things that we will see now

Warning

As we can see, it is a practice that is not complex to apply, but it is not good to abuse it either, especially in functions where a single argument is used and also this is self-descriptive by the name of the function, for example:

 function getProductById(id){    // code...} function getProductById({ id }){    // code...}

(Bonus track) Use the same good practice with returning values

function getProductById(id){    const response = null, error = null, loading = false    // code...    return {        response,        error,        loading    }}// use this wayconst { response, error, loading } = getProductById(1)

Thanks for reading me.