Set Default Values MDN

Here are four ways to set a default value for a variable in JavaScript, each one of them with its pros and cons.

This is useful when we want a default value to be overwritten only if a new value is set.

✅ Logical operator ||

The first option is to set the default value with the logical operator ||.

const defaultLogical = (fruit) => {
  fruit = fruit || "apple";
  console.log("fruit is " + fruit);
};
defaultLogical(); // fruit is apple
defaultLogical("strawberry"); // fruit is strawberry

✅ Ternary operator

Another option we have is to set the default value by using the ternary operator.

const defaultTernary = (fruit) => {
  fruit = fruit ? fruit : "apple";
  console.log("fruit is " + fruit);
};
defaultTernary(); // fruit is apple
defaultTernary("strawberry"); // fruit is strawberry

⚠️ Warning: falsy values

On the previous examples, if a falsy value like '' or 0 is set on the variable, it will be overwritten by the default apple

defaultLogical(0); // fruit is apple
defaultLogical(""); // fruit is apple
defaultLogical(undefined); // fruit is apple

defaultTernary(0); // fruit is apple
defaultTernary(""); // fruit is apple
defaultTernary(undefined); // fruit is apple

If we want to control this behavior, and keep the falsy as possible values, we can use the default parameter

✅ Default parameter

With this method, if we set a default value for a parameter inside a function, we can avoid it from being overwritten in the case of passing falsy value, and maintain this falsy value as the final one.

So, depending on the behavior we expect when a falsy value comes in, we might want to use one of the options above or this one.

const defaultWithParameter = (fruit = "apple") => {
  console.log("fruit is " + fruit);
};

defaultWithParameter(0); // fruit is 0
defaultWithParameter(""); // fruit is ''
defaultWithParameter(); // fruit is apple
defaultWithParameter(undefined); // fruit is apple
defaultWithParameter("strawberry"); // fruit is strawberry

⚠️ Warning: undefined

As you can see in all previous cases, if the value is set to undefined, it will be overwritten by the default one provided. To control this, we could apply an if/else statement.

✅ If/else

This option gives us more control over the code, but is also more verbose. It is the best option if we need to perform additional actions for each scenario.

const defaultIfElse = (fruit) => {
  if (fruit) {
    console.log("fruit is " + fruit);
  } else if (fruit === undefined) {
    console.log("fruit is undefined");
  } else if (fruit === "") {
    console.log("fruit is an empty string");
  } else if (fruit === 0) {
    console.log("fruit is 0");
  }
};
defaultIfElse("strawberry"); // fruit is strawberry
defaultIfElse(undefined); // fruit is undefined
defaultIfElse(""); // fruit is an empty string
defaultIfElse(0); // fruit is 0
December 03, 2020 - author unknown