# How does the Javascript logical OR (||) operator work?

The logical OR (or `||`) operator in Javascript is an operator which returns the **left** hand side if the left hand side is **truthy**, but otherwise defaults and returns the right hand side. This means it can be used to test both logical statements, and also to return the right hand side operand should the left one be `falsy`. Let's take a look at how it works. 


## What does truthy and falsy actually mean in Javascript?
Before we continue, lets first understand what `falsy` means. It may seem like a vague statement, but it actually has a very specific definition. The following values are `falsy` in Javascript:
- `false`
- `0` or `-0` or `0n`
- `any` empty string, i.e. `""`
- `null`
- `undefined`
- `NaN`

Similarly, `truthy` simply means anything that **are not** `falsy`.

Since `falsy` can mean `0` and `""`, it can sometimes be a bad choice for setting default values. For example, in some scenarios, if your value really is `0` and you want to show it, you won't be able to with the `||` operator. For these cases, it's better to consider the [nullish coalescing operator](https://fjolt.com/article/javascript-nullish-coalescing). 

## How does the logical OR operator work in Javascript?

As mentioned, the `||` operator has two main functions in Javascript. Most commonly it is found in logical `if..else` statements, where it returns true if one or more of its operands is `truthy`, but it is also used to return the first value if it's `truthy`, or default to the right hand side operand if not.

The `||` works in both of these ways because it actually returns a value.

### Using logical OR with logic

You probably will have seen `||` most commonly used in logical statements like `if` and `else`. In these cases, we are typically testing a logical statement, so `||` will return `true` if one or more of its operands is `truthy`. What is happening below is the `||` operator returns a value, which the `if` statement then converts to `true` or `false`

```javascript
let x = 100;

// This returns true, since both of these statements are correct.
if(x > 5 || x > 10) {
    // ...
}

// Since both "1" and "2" can be converted to true, this also returns true in this context.
if("1" || "2") {
    // ...
}

// Since both "" and null are falsy, they are converted to false, and as such this returns false.
if("" || null) {
    // ...
}
```

This is one of the main ways you will use `||` in your code, but it is also frequently used to return values based on how `truthy` or `falsy` they are. 

### Returning Values 

Let's  look at another example now, outside of logical statements. As mentioned, `||` returns its left hand side if it's `truthy`, but otherwise returns its right hand side.

That sounds a little confusing, so let's look at a few examples. 
```javascript
// Is set to 1, since the first operand is falsy 
let x = false || 1;

// Is set to hello, since "hello" is truthy
let y = "hello" || true;
```

In the above example, since `x` has its left hand side set to `false`, `x` becomes 1. Similarly, in `y` since `"hello"` is not `falsy`, the value of `y` is `"hello"`. This functionality is different from its application in logical statements and `if..else` statements, but can be useful in many situations.

Interestingly, even if the last item given is `falsy`, Javascript will still return it. For example:
```javascript
// Is set to null since false is falsy
let x = false || null;

// Is set to false since 0 is falsy
let y = 0 || false;
```

## Chaining the OR operator
It is possible to chain the `||` operator in Javascript. When chaining logical statements (in `if..else` clauses), the statement will return true if any chained item is `truthy`:

```javascript
// This works since both "1" and true are truthy
if("1" || true || false) {
    // ...
    console.log('this works')
}

// This doesn't work since all values are falsy
if(false || null || undefined) {
    console.log('this does not work');
}

```

When we use `||` chained outside of logical statements, it will use the first `truthy` value found, or default to the final value. For example, below, `x` is equal to `3`, `y` is `true`, and `z` is `{}`. If you're wondering why `z` is `{}`, it's because anything that is not `falsy`, is `truthy`, which means an object is `truthy`!
```javascript
// x is set to 3
let x = false || 0 || 3;

// y is set to true
let y = false || true || 3;

// z is set to  {}
let z = {} || [] || x;
```

## Conclusion

The `||` operator is frequently used in logical statements, as well as defaulting to non `falsy` values if one is found. It's a flexible operator which is core to understanding Javascript. If you're interested in another, similar, operator, you may also want to read about the [nullish coalescing operator](https://fjolt.com/article/javascript-nullish-coalescing).