Cloud Business Software
contents

ES6 was published in 2015 to standardize JavaScript. One of the good feature that came along with it is the Default parameter which basically allows us to set a default value on our function's parameters when there is no argument passed or if it is undefined.

Arguments VS Parameters

Let's begin first by reviewing the difference between arguments and parameters. These 2 terms are used interchangeably but by definition, parameters are what we specify in the function declaration whereas the arguments are what we pass into the function. 


function add(x, y) {
    return x + y
}
add(1, 2)

Based on the given example above, x and y are the parameters, while 1 and 2 are the arguments.

The Basics of ES6 Default Parameters

Let’s create an example to see what happens when there is no argument passed to a parameter of a function


function add(x, y) {
    return x + y
}
add() //Output NaN

The result would be NaN. A typical workaround with this before ES6 came around was to use typeof to check if the value is undefined.


function add(x, y) {
    var y = (typeof(y) !== "undefined") ? y : 0;
    return x + y 
}
add(1, 2) //Output 3
add(1)    //Output 1

Now let’s see how this can be handled in ES6


function add(x=4, y=8){
  return x + y 
}
add(1,2)  // 3
add(1)    // 9
add()     // 12

Very simple isn't it? You can just assign an initial value to the parameters.

Effect on Later Parameters

It is important to note that parameters are set from left to right. So the initialization of the default values will occur based on the position of your input. Consider the following example:


function createArray(x = 10, y) {
  return [x,y]; 
}                            
createArray()   // [10, undefined]
createArray(5)  // [5, undefined]

Since we have only initialized the first parameter, the later (or succeeding) parameters on its right will also assume the value from those on the left. In this case, y is set to automatically get the value of x.

Using Function as Default Parameter

Another cool feature is that you can also set a function as a default parameter. Let’s see that in action:


function getX() {
  return 10;
}
function add(x = getX(), y=5) {
  return x + y 
}
add() // 15

Let's do another one to make it interesting and see if y will catch the value of x knowing that it's getting its value from a function.


function getX() {
    return 3;
}
function add(x= getX(), y = x*2, z = y+2) {
    return x + y + z; 
}
add()       // 17
add(2)      // 12
add(2,3)    // 10
add(1,2,3)  // 6

Wrapping up

Default Parameter is very useful when dealing with undefined parameters. This new feature available in ES6 allows us to assign a default value to the function's parameter rather than leaving it undefined.

To learn more about JavaScript, check out the other articles or hit the share icons below to share it with a friend.