With ES6, we can fake Named Arguments in JavaScript — let's take a look at how we can do that.
We already went through that last example with the tip calculator function:
function tipCalc(total, tip = 0.15, tax = 0.13) {
// do some math
}That works well, because we know that the first thing is going to be total, second thing is going to be tip... or was it tax? Then the third one was either tip or tax. You see, We're already getting confused as to the order. Which order should I actually put them in? I might end up tipping too much, or maybe not enough.
There's some things we can do to make this order independent.
The first thing I'm going to do is just finish off this function and add some destructuring to it:
function tipCalc({total, tip = 0.15, tax = 0.13}) {
return total + (tip * total) + (tax * total);
}You can see that we've wrapped the variables in tipCalc in curly brackets. Now, when we pass in a single object as the argument and it's going to destructure them into our three variables, total, tip, and tax. It's important to note that even though we are technically passing a single argument in the form of an object, it's not like we're going to have to use them like options.total, options.tip, and options.tax.
This function will destructure them into three variables available inside of the actual function.
Then when we call it, we simply run tipCalc and we pass it an object with the total value, tip, and tax:
function tipCalc({total, tip = 0.15, tax = 0.13}) {
return total + (tip * total) + (tax * total);
}
const bill = tipCalc({total: 200, tip: 0.20, tax: 0.13});
console.log(bill);If we refresh, we'll see in the console that we've got $266 as our total bill.
But what is really important here is, first of all, I can leave things off, and we don't have to pass that undefined sort of hole-filler if it's in the middle like we used to:
function tipCalc({total, tip = 0.15, tax = 0.13}) {
return total + (tip * total) + (tax * total);
}
const bill = tipCalc({total: 200, tax: 0.13});
console.log(bill);The default tip is going to kick in, and you can put them in any order that you please. Maybe I want to put the tip first and the total goes second:
function tipCalc({total, tip = 0.15, tax = 0.13}) {
return total + (tip * total) + (tax * total);
}
const bill = tipCalc({tip: 0.20, total: 200});
console.log(bill);That still works just as we want because passing in an object here, and it's getting destructured. What's more is that if we leave the one out from the object that we pass in, the defaults are filling themselves in.
One last thing is, if you ever are to just pass in nothing. Let's say if we put a default for the total be $100. This is maybe a common order and we would want to just run tipCalc:
function tipCalc({total = 100, tip = 0.15, tax = 0.13}) {
return total + (tip * total) + (tax * total);
}
const bill = tipCalc();
console.log(bill);What happens here? We get an error:
TypeError: Cannot match against 'undefined' or 'null'
This is a destructuring error, and that's because we haven't passed in anything, so there's no object to destructure, so you have to give tipCalc a default argument:
function tipCalc({total = 100, tip = 0.15, tax = 0.13} = {}) {
return total + (tip * total) + (tax * total);
}
const bill = tipCalc();
console.log(bill);If no object is passed it's going to default just to a blank object created by our curly brackets, and all of the three of our variables, total, tip, and tax are going to be included.
This is a little bit of a funky syntax, so it takes some times to get comfortable with it. Maybe try it out throughout your work day, but it's definitely worth getting used to, because it's going to really help you reduce a lot of your boilerplate code where you're checking for defaults.