Short Circuit Assignment
Tags: javascript, webdev, devtips, logicaloperators
Published: 2019-03-12 18:21:18

---
title: Short Circuit Assignment
published: true
description: Using the logical or operator in Javscript to make default assignments to variables.
tags: javascript, webdev, devtips, logicaloperators
canonical_url: https://samwalpole.com/javascript-short-circuit-assignment
---

# 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"
```

I hope that you've found this post useful. Please let me know your comments/questions through Twitter.
- @dr_sam_walpole
If you want, you can also  [buy me a coffee](https://ko-fi.com/samwalpole) ! 😊