ES6 Default Parameters in JavaScript Functions | JavaScript Tutorial Series by SFDC Stop

Hello Trailblazers,

Welcome to the fourth tutorial in JavaScript Tutorial Series by SFDC Stop. In this tutorial, we're going to learn about ES6 Default Parameters in JavaScript Functions. We're going to see how we used to define default parameters before ES6 and how we can do it using ES6 syntax. This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to have a look at the code gist with explanation.

Tutorial Video

Code Gist with Explanation

We're going to define a simple JavaScript function which will add two values and display the result. The code for that function is given below:

Now, let's run this code once and then we'll learn about the default parameters. The output when we're calling this function with values 3 and 5 is given below:

As you can see, we're getting the result of addition of 3 and 5 displayed as 8. 

How we used to define default parameters before ES6?

Now, let's see how we used to define default parameters before ES6. For this, we're going to provide a default value for the parameter b. The updated code is given below:

As you can see in the above code, inside the function we're checking that if b is defined i.e. we're passing a value for parameter b, we're using that b itself otherwise, we're going to assign a default value to b which is 2. The output when the above function is called is given below. This time, we're only going to pass 1 value to the function which will be used for parameter a and the parameter b will take up the default value.

As you can see above, we're passing only one parameter as 3 and the default value 2 is being taken up for parameter b giving us the total sum as 5.

How can we define default parameters using ES6 syntax?

ES6 has made it much simpler to define default parameters for functions in JavaScript. We're going to re-write the same function again now and see how we can define a default value for parameter b using ES6. The updated code is given below:

As you can see above, it is so simple to provide the default value for any parameter in ES6 by just giving that value with an equals = sign. Here we're giving the default value for parameter b as 2 by specifying b=2 in the function parameters itself. The output when the above function is called is given below:

As you can see above, we're getting the output as 5 when the parameters a and b are added as the default value for b is automatically considered as 2 and we're passing the value for a as 3.

How can we define a default value if we're passing an object to a function in JavaScript?

The syntax to define the default value, when an object is passed to a function parameter is given below:

As you can see in the above code snippet, we've defined a function named as personAge which is accepting two parameters, the age of the person and the person object itself. The person object has two properties:- firstName and lastName. We've defined the default value for firstName as Richard and the lastName as Hendricks. Therefore, if this function is called with just one parameter, these values will be taken up as the default values for the person object.

One important thing to notice is that we're assigning an empty object to the person object which has the default values like:- { firstName = 'Richard', lastName = 'Hendricks' } = {}. This is important because we're telling the JavaScript function that the default value for this second parameter as a whole is an empty object which has no values for firstName and lastName, so, the default values for these properties i.e. Richard and Hendricks can be taken up.

The output we're getting when the above function is called is given below:

As you can see above, we've only passed a single value for the age parameter as 20 and we're getting the output as: Richard Hendricks is 20 years old which is perfect. So, this is how you can define default values for an object passed as a parameter to a JavaScript function.

To summarize, the learnings are given below:-

• Before ES6, we were using conditional operator to define the default values for parameters
• ES6 made it very simple and we can simply define a default value for a parameter by providing the value after the = sign at the same place where the parameter is defined
• In case, we're passing an object to the function, we need to define a default value as an empty object after the = sign for the object parameter as a whole. Although, for the object properties, we can define the default values within the parameter definition. Both these steps are important to make sure that the object is initialized as well as the parameters also get their default values.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!