Let me start with an apology for the title, which is a bit inaccurate. There are no native named parameters in Javascript.
Having said that, using ES6 awesome destructuring we can enact named parameters.
Now before demonstrating exactly how, I want to give two use cases where it can come in handy.
-
The first scenario is when we have complex function calls, with several arguments in different types. This makes the call less readable therefore more bug-prone (missing parameter, wrong order and more).
-
The second is when dealing with a promise. You can define explicitly what you’re expecting to receive and even set up default values.
Usage
Before a function is executed all arguments passed are assigned to parameters based on its’ signature. That means object destructuring will perfectly here.
Instead of:
const myFunc = (organizationId, name, force, verbose) => {
...
}
// not the most readable function call somewhere in your code
myFunc(17, 'Test', true, false)You can do this:
const myFunc = ({ organizationId, name, force, verbose }) => {
...
}
// not the most readable function call somewhere in your code
myFunc({ organizationId: 17, name: 'Test', force: true, verbose: false })
The important thing to remember is that destructuring is based on same property name. The order does not matter.
Pro Tips
- Like regular destructuring, you can also rename the parameters during the assignment:
// renamed name to orgName
const myFunc = ({ orgId, name: orgName , force, verbose }) => {
console.log(orgName); // 'Test'
}
myFunc({ orgId: 17, name: 'Test', force: true, verbose: false)- We can have default values and optional parameters
const myOtherFunc = ({ x = 1, y = 2, z = 3 } = {}) => {
console.log(x, y, z);
}
// x isn't passed thus received its default value
myOtherFunc({ y: 5, z: 10}) // 1 5 10