Today we are here to introduce another useful feature that ES6 introduced: Default Parameters. 

This new functionality allows named parameters to be initialized with default values if no value or undefined is passed.

The old school style

To better understand it, let’s analyze how we would try to give default values to parameters back in ES5:

function favouriteColor(color) {
color = color || 'blue';
console.log(color);
// do some operation
}favouriteColor(); // no parameter passed

Wait, little explanation:

Since you might have never seen this type of trick being performed in JavaScript, let me give you a brief explanation of how it works:

  • Truthy or falsy? :  Every Javascript value can be considered to be either truthy or falsy. Basically this means that the language will try to convert these values into booleans for conditional operations.
  • The short-circuit evaluation: Notice that an expression like the one mentioned above is evaluated from left to right,  if the compiler finds a value that is truthy, it won’t evaluate the rest of the expression.

Even older old school style

Just imagine that, if we weren’t aware of this little trick, we would have to do some boring and error-prone operation like this:

function favouriteColor(color) {
if(!color) {
color = ‘blue’;
}
console.log(color);
// do some operation
}favouriteColor(); // no parameter passed

No wonder how the first solution proposed became the most used. Having to write a full set of if statements for every parameter that we want to check would have soon become unmanageable.

With this solution, we can leave the || operator to do his job and stop thinking about the evaluation of the expression.

To recap:

To make a point out of what we said until this moment, in our case the color variable will assume the default value if the parameters happen to be any falsy value or simply an empty string: ' ';

This can be okay in most of the cases but ES6 now proposes an even better, more elegant and less prone to certain kinds of errors solution:

The new style

So even in this case, when not passing the argument color to the function, we are still able to assign it a default value. But this time we did it in a lot more fashionable, concise, and extremely readable way.

function favouriteColor(color=’blue’) {
console.log(color);
// do some operation
}favouriteColor(); // no parameter passed

A couple considerations( null vs undefined)

In order to avoid any error when using default parameters from now on, I would like to spend a little paragraph in explaining how their behaviour differs when you pass a null argument vs an undefined one.

Consider the example:

function favouriteColor(color=’blue’) {
console.log(color);
// do some operation
}favouriteColor(null); // explicitly passing null

function favouriteColor(color=’blue’) {
console.log(color);
// do some operation
}favouriteColor(); // undefined is implicitly passed here

As you can see from the examples, in the first case no default value is provided! This is because the default parameters mechanism will only do its job if and only if an undefined value is passed to a function. Thanks to JavaScript, this is the default behaviour when omitting a parameter so we can be safe.

Little things to know

Other little informations about how you can use this new feature might include:

Using function return values as default parameters

This mechanism allows you to use the return value of a function as the default parameter of another one:

function wheelOfColors() {
const colors = [‘blue’, ‘pink’, ‘yellow’, ‘purple’];
var randomColor = colors[Math.floor(Math.random() * colors.length)];
return randomColor;
}
function favouriteColor(color=wheelOfColors()) {
console.log(color);
// do some operation
}favouriteColor();

Reusing the value of a default parameter for another one

This mechanism is possible since default parameters are evaluated from left to right:

function favouriteColor(color1=’dark’, color2 = `${color1} blue`) {
console.log(color2);
// do some operation
}favouriteColor();

Finals

And that was it for this very short article of the ES6 Chronicles

Stay tuned for other newly introduced features in the next articles and also for a new NodeJS centered series!

Happy learning!

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here