DEV Community

loading...
Cover image for Named arguments | JS
Product Hackers

Named arguments | JS

susomejias profile image Jesús Mejías Leiva Updated on ・2 min read

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"
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
})

Enter fullscreen mode Exit fullscreen mode

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...
}

Enter fullscreen mode Exit fullscreen mode

(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)

Enter fullscreen mode Exit fullscreen mode

Thanks for reading me. 😊

thanks

Discussion (6)

Collapse
shimphillip profile image
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.

Collapse
hodovani profile image
Collapse
susomejias profile image
Jesús Mejías Leiva Author

Thank you for the contribution!

Collapse
susomejias profile image
Jesús Mejías Leiva Author

Thank you for the contribution, I will check it 🤗

Collapse
frondor profile image
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.

Collapse
susomejias profile image
Jesús Mejías Leiva Author

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 🤗

Forem Open with the Forem app