JavaScript: Function Default Values

Here is a simple way in modern java script to set default function values in the function signature

function newCharacter(name = "default bad guy", health = 100) {
    let character = { 
        name: name,
        health: health
    };
    return character;
}

let badGuy = newCharacter();
console.log("Name is: " + badGuy.name);
console.log("Health is: " + badGuy.health);

Name is: default bad guy
Health is: 100

Starting with ES6 you can add default parameters directly in the function signatures like in the example above. For more ways to default values in functions scroll down 📜

Defining in the function

While defining the default values directly in the function is great. However, you need to support older JS versions (ES5 and earlier) or you need to define some thing more complex than basic types like an int or a string than checking for the undefined value in the function is a good way to go.

const newCharacter = (name, health) => {
    if (name === undefined) {
        console.log("undefined name, defaulting");
        name = "default bad guy";
    } else {
        console.log("name was set");
    }
    if (health === undefined) {
        console.log("undefined health, defaulting");
        health = 100;
    }

    let character = {
        name: name,
        health: health
    };
    return character;
};

let badGuy = newCharacter();
console.log("Name is: " + badGuy.name);
console.log("Health is: " + badGuy.health);

Output

undefined name, defaulting
undefined health, defaulting
Name is: default bad guy
Health is: 100

Defining in the function ternary style

A common way you will see the default value checks in javascript is via ternary operators. You can use these if you want, but I find them hard to read and this makes me not a fan of using them. The syntax is like this

let myVar = (true or false condition) ? (value if true) : (value if false)

so an example would be

name = name !== undefined ? name : "default bad guy";

So in the example of setting a default value our condition checks if the var name is undefined

• true or false condition is name !== undefined
• if true (aka name is defined) than name is set to what is already in the var name
• if false (aka name is undefined) value if false is the defaut value default bad guy

If you are wondering why we used !== instead of != than you need to check out type coercion in JavaScript. Even though type coercion is meant to be a convenient feature it can cause all kinds of problems. So using the !== and === stops type coercion from occurring and thus preventing some potential issues. If you want to know more checkout JavaScript: The Good Parts (affiliate link) section on type coercion

so how we would define a default value would be like this

const newCharacter = (name, health) => {
    name = name !== undefined ? name : "default bad guy";
    health = health !== undefined ? health : 100;
    
    let character = {
        name: name,
        health: health
    };
    return character;
};

let badGuy = newCharacter("Boss");

Output

Name is: Boss
Health is: 100

Using Arrow Functions

Sometimes it is more convenient to use arrow function instead of using the function syntax

const newCharacter = (name = "default bad guy", health = 100) => {
    let character = {
        name: name,
        health: health
    };
    return character;
};

let badGuy = newCharacter("another bad guy");
console.log("Name is: " + badGuy.name);
console.log("Health is: " + badGuy.health);

Name is: another bad guy
Health is: 100

Reuse default values

There may be times when you want to reuse a default value for other arguments to a function

function newCharacter(name = "default bad guy", health = 100, maxHealth = health) {
    let character = {
        name: name,
        health: health,
        maxHealth: maxHealth,
    };
    return character;
}

let badGuy = newCharacter("big boss", 200);
console.log("Name is: " + badGuy.name);
console.log("Health is: " + badGuy.health);
console.log("Max Health is: " + badGuy.maxHealth);

Output

Name is: big boss
Health is: 200
Max Health is: 200

Default Named Parameters

Javascript does not support named parameters by default but by using an object as the argument you can get a similar result

function newCharacter({name = "default bad guy", health = 100, maxHealth = health}) {
    let character = {
        name: name,
        health: health,
        maxHealth: maxHealth,
    };
    return character;
}

let badGuy = newCharacter({health: 50});
console.log("Name is: " + badGuy.name);
console.log("Health is: " + badGuy.health);
console.log("Max Health is: " + badGuy.maxHealth);

Name is: default bad guy
Health is: 50
Max Health is: 50

Fun Surprise

Congrats for making it all the way to the end! As a fun surprise you should inspect your js console (usually right click->inspect then find the console). You will see the above examples running in your browser 😎

As an Amazon Associate I earn from qualifying purchases