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 logical OR 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 or false). In Javascript there are 3 logical operators:

AND Operator (&&)

Evaluates to true if both inputs are true. Otherwise returns false.

true && true; // returns true
true && false; // returns false
false && false; // returns false

OR Operator (||)

Evaluates to true if either or both inputs are true. Otherwise returns false.

true || true; // returns true
true || false; // returns true
false || 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 code

if (isA() || isB()) { // Do something } 
// if either or both isA() and isB() return true, then execute code

if (!isA()) { // Do something } 
// if isA() doesn't return true, then execute code

However, what happens when we put non-boolean values in an if 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 to true and some of them evaluate to false. In fact all expressions can be evaluated as either true (known as a truthy value) or false (known as a falsy value).

Truthy and Falsey Values

Falsey values are those that evaluate to false in an if 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 the true boolean value) evaluate to true 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 an AND operator needs to test the truthiness of both sides of the expression - both values must be true for the whole expression to be true. It then returns the last value that it evaluated, in this case "world" if the expression evaluates to true.

This isn't quite the same for OR. Since OR 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 as short circuit evaluation - if the first value is true, 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 to false, then the OR statement must then check the second value to see if that is true.

0 || 1
// returns 1

In this case, 0 evaluates to false, so the OR statement then has to check the truthiness of the second value - 1 is truthy, so 1 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 the OR 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"