Default Function Parameters in JavaScript

In JavaScript, if the caller does not provide the arguments to the function, the function parameters default to undefined. However, it's often useful to set a different default value. This is where default parameters can help.

In this video, you will learn how to use default parameters. You will validate that when not providing any arguments, the function parameters are undefined. You will also see an alternative of performing checks for undefined values, and then finding out how default parameters help you write safe and less code to achieve more.

Code

// without default parameters
```js

function add(a, b) {
    console.log('a=' + a + ', b=' + b)
    let c = a + b;
    return c;
}

add(10, 20)
add()
add(10)
add(undefined, 20)

// with default parameters
function add(a = 0, b = 0) {
    console.log('a=' + a + ', b=' + b)
    let c = a + b;
    return c;
}

add(10, 20)
add()
add(10)
add(undefined, 20)

Full Transcript

00:00 Hello there! Today you will learn how to work with default function parameters in JavaScript. Consider the function called add, which has two parameters, a and b. When we call this function using arguments 10 and 20 these arguments are used inside the function to calculate c, and return the value, right? Now, what if I call the function with no arguments at all? Do you think this code will run or fail? What do you think would be the value for a and b? Let's run through an exercise to find out. When we call add 10 20 the value for parameter a was 10 and for b, the value was 20. Now when we did not send any arguments, what value would a and b get? They both will be undefined and we will shortly write code to validate that. If I call add only with 10 as the argument, the value of a would be 10 but b would be undefined.

00:56 On the other hand, if I only want to pass the value for b, I would have to explicitly send the value of a as undefined. This happens because in JavaScript we do not have any control over what inputs the caller may provide. They may choose not to send any arguments at all and therefore when the caller does not send anything, the parameter values are undefined. Let's validate that. Here we have a function called add that takes two parameters, a and b. In this function, we log the value for a and b. Then we add the values and store it in variable called c and finally we return the value of c back to the caller. Next we have called add with different arguments starting from providing both the arguments, then without any argument and two cases for providing only one argument at a time. As we run, we can confirm that every time we did not provide an argument, the function parameter value was undefined.

01:54 Now let's say you know that there should be a default value that must exist when the caller does not provide anything. So how do you provide that default value in JavaScript? One way to do that would be that you check the parameters if they are undefined. We first check if a is undefined and if it is, we assign zero to a value, we perform a similar check for parameter b. This way we can guarantee that a value and b value are not undefined. And we then add them together. But as you see, you need to write additional code just to give the default value if the caller does not provide you with a value. Right? So what's a better way or is there a better way? There surely is. With modern JavaScript, which means ES6 and above, you can provide default values to be used with the parameters.

02:42 And what does that mean? This means that after you declare your parameter, you can use equal sign and provide the value to be used if the caller does not provide any value as argument. As you see we have provided a default values for a and b, both to be zero. Why Zero? Because in addition zero is a number that does not add any value to the original sum. So for JavaScript, it is still a number type, and if the caller does not provide any argument, we take it as zero. What's next? Now that we have default values, we do not need to do any checks on our own since there will be a value or they will be zero, right, so we can get rid of both these checks. What else? Since we do not need these checks, we do not need to create new variables and therefore we can just live with the parameters a and b passed to us, even less work.

03:34 How does that sound? Let's write code to confirm that. We are going to add the default parameter values for a and B to be zero leaving rest of the code as before. And as we run, we can confirm that when we do not provide any argument, the default value of zero applies and it is printed on the console as well. And that's it. If you work with JavaScript or any other framework such as jQuery, angular or react, you have executed JavaScript on browser, so the new course that we have launched is relevant for you. It's called Browser JavaScript and event loop. This course educates on how JavaScript is executed behind the scenes and will cover various topics such as ExecutionContext and event loop. You will have the opportunity to visually see every step of the JavaScript code execution. Check out the course link in the description below to learn more about the course and let us know if you have any questions. Keep learning and see you next time.