JavaScript Function Default Argument

Introduction

JavaScript developers have had to enter every possible argument they could think of for functions before the introduction of ES6. This former approach to JS function arguments reduced the flexibility and usability of functions. However, when JavaScript was updated in 2015 by ECMAScript, the update brought about many changes which increased the flexibility of JavaScript datatypes, including function objects.

This article introduces you to the concept of ES6 JavaScript function default argument.

Either anonymous or named, JavaScript functions may decide to have arguments or not. It depends on the function of the function. Oops! That sounded a bit ambiguous. I mean, it depends on the function's task. Function arguments are placeholders for the values the function will work on. Since the function is in its definition stage, it does not know what value will be passed into it, but it has an idea of the value. Instead of waiting for the value to be added, functions use arguments, work on them, and then receive the actual value, known as the parameter, when they are later called.

If a parameter is expected to assume the position of a function argument when the function is called, and the parameter is not passed, JavaScript returns undefined for the missing parameter.

function greetUser(username) {
    return `Hello, ${username}`
}

//calling the function

greetUser(); //Hello, undefined

To prevent a function from returning undefined in place of a parameter when a function is called, JavaScript introduced a Function Default Argument feature in ES6. A function default argument holds a default value for the function parameter, and it is used if the function gets called without a parameter.

function greetUser(username="John") {
    return `Hello, ${username}`
}

/* If the greetUser function's username argument is replaced with a parameter when called, JavaScript uses the parameter */

greetUser(Naruto); //Hello, Naruto

/* Else, it uses the default argument, 'John' as the username if the function does not get a parameter, instead of 'undefined' */

greetUser(); //Hello, John

JavaScript ES6 function can take any datatype as a default argument, be it string, array, object, number, boolean, etc., as long as the default argument matches the function's task.

//Object default argument sample

function greetUser(user={firstName: 'John', lastName: 'Doe'}) {
    const fullName = `${user.firstName} ${user.lastName}`;
    return `Hello, ${fullName}`
}

//with parameter
const user1 = {firstName: 'Samuel', lastName: 'Jack'}
greetUser(user1); //Hello, Samuel Jack

//without parameter
greetUser(); //Hello, John Doe

//Array default argument sample
function greetUsers(users=['Dan', 'Joseph', 'Natasha', 'Kelly']) {
    for(let user = 0; user < users.length; user++) {
       return `Hello, ${user}`
    }
}

//with parameter
const listOfUsers = ['Solomon', 'Grundy', 'Mike', 'Anthony']
greetUsers(listOfUsers); 
/*
Hello, Solomon
Hello, Grundy
Hello, Mike
Hello, Anthony
*/

//without parameter
greetUsers();
/*
Hello, Dan
Hello, Joseph
Hello, Natasha
Hello, Kelly
*/

//Number default argument sample
function square(x=2) {
    if (x = 0) {
      return 0;
   }
    return x * x;
}

//with parameter
square(5) //25

//without parameter
square() //4

//Boolean default argument sample
function youEatDinnerBy6(answer=false) {
    if (answer) {
      return "That's healthy!";
    }
    else {
      return "You need to eat dinner early!"
    }
}

//with parameter 
youEatDinnerBy6(true) //That's healthy!

//without parameter
youEatDinnerBy6() //You need to eat dinner early!

JavaScript function default argument has made life easier for developers compared to previous times. With the default arguments, you can control the results of functions, unlike when JavaScript did that for you, throwing undefined at all your missed parameters.

Conclusion

In this article, you have learned what a default argument is, how you can use them in your programs, and the benefits of using them.

Like, comment, and share this article with your friends and fams. You can connect with me on Twitter @Tech Evangelist to correct me, teach me more, learn from me, or write your technical articles.

I'm available for freelance, part-time, or full-time technical writing roles.

Gracias, y Adios, 👋.