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 doesn’t matter
const { banana, tomato } = food

console.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 args
createProduct('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 args
createProduct({
    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

✅ Advantages	❌ Disadvantages
The order of the arguments does not matter since we are dealing with an object	May lead to creating functions with many arguments
No need to pass optional arguments to undefined	The code will be larger since you have to add the keys and values of the object that you send by argument
Improve the extensibility and maintainability of our code
Improve legibility
provide more context to your arguments

---

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 way
const { response, error, loading } = getProductById(1)

---

Thanks for reading me. 😊

Comments

[Phillip Shim]

Good article. I think there is an ESlint rule that will complain if you have 3 or more arguments then and they are not named.

[Jesús Mejías Leiva]

Thank you for the contribution, I will check it 🤗

[Federico Vázquez]

They are not "named arguments" as you know then from Python, where they keep the position. It's only one object as first and only argument which you destructure to declare each prop as a variable in the scope of that function.
It's important to keep concepts clear and right, otherwise, you'll mention "named arguments" in a JS interview and Its most likely you ain't getting the job.

[Jesús Mejías Leiva]

In several parts of the article I indicate that the technique is simply based on the destructuring of an object that is passed as an argument, anyway I appreciate your comment, thank you 🤗

[Jesús Mejías Leiva]

Thank you for the contribution!