In this post I will describe the new syntax that might save you quite a bit of time!
How we had to do it before ES2015
Before ES2015, we had to do something like this to get default parameter values:
It could be done with a slightly different syntax as well, but the this is the general idea.
You would have to manually check if the parameters are set or not, and then set them.
How we can do it with ES2015
We can now skip all that manual, error-prone labor, and just define our default parameters in a simple and intuitive way
It’s really that easy! And exactly how you would expect it look like.
There are however a few extra tricks and gotchas that you might want to know about.
Default parameters are evaluated at call time
The default arguments get evaluated every single time the function is called.
That means that you create a new object every time.
It also means you have to keep that in mind if you use functions in your default parameters.
For instance, take a look at the following example:
You might not have expected this behaviour, but since the parameters gets evaluated every time, this kind of makes sense.
Either way, it’s good to know!
Parameters are available to later default parameters
Parameters that have been evaluated can be used in consequent default parameters. That way you can use previous inputs in interesting ways to formulate your default values.
I didn’t figure out a really good way to show this, so I just created a variation from the example on MDN with some auto pluralisation.
The point is that you can use previous parameters to construct later default parameters.
Might come in handy!
Sending in undefined does the same as sending in nothing
Another thing to keep in mind, is that if you send in undefined (intentionally, or otherwise) to your function, the default value will be used.
In other words (or code rather):
I think the code says it all. Sending in undefined does the same as sending in nothing. Default value will be used.
I’m not sure if this is expected behaviour or not, but it’s certainly something to be aware of.
Can you use default parameters yet?
As always with the “newer” standards, you have to make sure you can actually use the new fancy syntax.
The site can help you figure out whether or not you can use default parameters for your target browser (or platform): ES6 Compatibility table
Follow me on Twitter: @gjermundbjaanes