From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Set default values for function arguments - JavaScript Tutorial

From the course: Learn JavaScript: Write Modern Code with JavaScript ESNext

Start my 1-month free trial Buy for my team

Set default values for function arguments

“

- There are many times in our code where we have a function with several arguments in order to maximize the configurability of our code. Now more arguments has the potential to make our functions more flexible, but at the same time, we don't want to have to pass in all those arguments every time we call our function. So in this case, we need a good way to provide default values for the arguments that we don't want to have to pass in. Otherwise, these arguments will be undefined when our function is called and could potentially mess up the logic inside the body of our function. Prior to ES6, the way that we had to set the default values for our arguments was something like this. We had to go through each argument and check if it was undefined, which we could do with the syntax that we see here. And don't worry if you don't understand why that syntax works, that's just how it's done. But frankly, defining default values this way was really a pain to do and much more verbose than it had to be. And that's why ES six added a new, much nicer syntax for assigning default values to arguments. In order to define default values for arguments in ES6, all we have to do is add an equal sign after the argument and then the default value that we want for that argument and it's as simple as that. And I'm using the arrow function syntax here, but this works with other function syntaxes as well. So just as an example, let's head over to our console and imagine that we have a function called default args, which takes a few arguments and simply returns an object with all those arguments as properties. We'll define it like this. We'll say let default args, and we'll use the arrow function syntax here, and we'll say arg1, arg2, and arg3. And we'll set default values for each of those arguments. So for arg1 we'll have the default value be a string that says hello. For arg2, we'll have the default value be three. And for arg3, we'll have the default value be true. And now what our function is going to do is simply return an object with each of these arguments as properties. And we can do that by simply saying arg1 comma, arg2 comma, arg3 comma, and then closing the bracket and the parentheses. And notice that we're using the parentheses here because we're just returning an object. So let's hit enter. And now that we've defined our function, actually calling our function will look something like this. If we call default args with no arguments like this, default args with empty parentheses, we can see that the object it returns contains all the default values that we specified up top here. If we said default args and then specified goodbye for the first argument, for example, we'd see that the default argument for arg1 was replaced by the argument that we passed, while the other two are still the default arguments. And something important to note with default values as well, is that only the value undefined will trigger the default argument. In other words, default arguments don't care whether a value is falsy or not. If we pass null to a function, for example, inside the function, that argument will have the value null instead of the default value. And this is true with zero false and all the other falsy values. So if we call default args with null zero and false, we'll see that the object we get back contains null zero and false instead of the default arguments. So that's just something to keep in mind when working with default arguments in JavaScript.

Contents