Assigning Default Values to Variables in Javascript

When building websites or web apps, the data that is shown on the screen is often dynamically created dependent on some user defined input. Sometimes this input is missing or not as expected. In these cases it's good to have default values to fall back to so that our app doesn't break or behave unexpectedly.

Below is an example of assigning default values to a variable using the logicalOR operator, known as short circuit assignment:

function greet(name) {  const greeting = name || "Person";  return "Hello " + greeting;}greet("Sam"); // returns "Hello Sam" greet(); // returns "Hello Person"

So what's going on here? To understand, let's first have a quick look at logical operators.

Logical Operators

Logical operators evaluate an expression and return a boolean value (true orfalse). In Javascript there are 3 logical operators:

AND Operator (&&)

Evaluates totrue if both inputs aretrue. Otherwise returnsfalse.

true && true; // returns truetrue && false; // returns falsefalse && false; // returns false

OR Operator (||)

Evaluates totrue if either or both inputs aretrue. Otherwise returnsfalse.

true || true; // returns truetrue || false; // returns truefalse || false; // returns false

NOT Operator (!)

Returns the opposite boolean value to the input.

!true // returns false!false // returns true

Logical Operators in if statements

The usual use case for logical operators is to conditionally execute code dependant on what those operators evaluate to.

if (isA() && isB()) { // Do something } // if both isA() and isB() return true, then execute codeif (isA() || isB()) { // Do something } // if either or both isA() and isB() return true, then execute codeif (!isA()) { // Do something } // if isA() doesn't return true, then execute code

However, what happens when we put non-boolean values in anif statement?

if ("hello world") { // Do something } // code is executed if ("") { // Do something } // code is not executed if (5) { // Do something } // code is executed if (0) { //Do something } // code is not executed

This means that some of these expressions evaluate totrue and some of them evaluate tofalse. In fact all expressions can be evaluated as eithertrue (known as a truthy value) orfalse (known as a falsy value).

Truthy and Falsey Values

Falsey values are those that evaluate tofalse in anif statement. In Javascript there are only 6 falsey values:

• false
• 0
• "" (empty string)
• null
• undefined
• NaN

All other values, whether they be strings, numbers or objects (and of course thetrue boolean value) evaluate totrue and are known as truthy values.

Logical Operators and Non-Boolean Values

So what happens when we put non-boolean values (which can be either thruthy or falsey) into a logical expression?

"hello" && "world"// returns "world" "hello" || "world"// returns "hello"

In the first example, we see that the result of"hello" && "world" is actually"world". This is because anAND operator needs to test the truthiness of both sides of the expression - both values must betrue for the whole expression to betrue. It then returns the last value that it evaluated, in this case"world" if the expression evaluates totrue.

This isn't quite the same forOR. SinceOR only needs one of the values to be true in order for the whole expression to be true, if the first value is truthy then it can exit out of the evaluation early, having only tested the first value, and then return the first value. This is known asshort circuit evaluation - if the first value istrue, there is no need to check the rest of the expression, so it short circuits having only tested the first value.

However, if the first value does evaluate tofalse, then theOR statement must then check the second value to see if that istrue.

0 || 1// returns 1

In this case,0 evaluates tofalse, so theOR statement then has to check the truthiness of the second value -1 is truthy, so1 is returned from the expression.

In this way we can assign default values. We can use a user-defined variable as the first value and a default to fall back to as the second value. If the user gives a truthy input, their input is returned because theOR statement short circuits. In the case that the user gives no input, the first variable will be falsy and so the second value is returned.

const userVariable = "user value";const value = userVariable || "default value"// value is equal to "user value"const userVariable = "";const value = userVariable || "default value"// value is equal to "default value"

I hope that you've found this post useful. Please let me know your comments/questions through Twitter.

• @dr_sam_walpoleIf you want, you can alsobuy me a coffee ! 😊