Destructuring Tweets - Episode 10 - Short && Circuit && Evaluation
Tags: snippet, javascript, destructuring, evaluation
Published: 2021-03-07 20:40:58

---
title: Destructuring Tweets - Episode 10 - Short && Circuit && Evaluation
published: true
description: I pick a more or less random snippet from Twitter and analyze it in depth in this series. It shall help me, and you understand the trickery behind it. In this episode, we learn what a short-circuit elevation is and how it operates.
tags: snippet, javascript, destructuring, evaluation
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/807afd9zx0gxfslxwpy4.png
---

What's cookin', good lookin'? Welcome to my blog series about demystifying JavaScript quizzes from Twitter! This week is about a rather basic concept. Let's dive right into the beautiful world of logical operators in JavaScript!

# Snippet of the Week

This week's [snippet](https://twitter.com/ravinwashere/status/1366620016293015552) is from [Ravin](https://twitter.com/ravinwashere):
```javascript
let name1 = " ",
  name2 = undefined,
  name3 = "ravin",
  name4 = "rav",
  username = name1 && name2 && name3 && name4;

console.log(username);
```
Here, we see a declaration of several variables. Or, more precisely, four names. The first one is a seemingly empty string. However, hold in mind that this is not the case! It contains a whitespace symbol. Next, they store `undefined`, right followed by another two strings.
The next line is where things get interesting. The previously defined variables are chained with the `&&` operator, and the output is stored in yet another. They log this last variable, leaving us with the question, what the value of it is.

# The Output

If you are not familiar with the presented API, the log might seem to be wildly random. For it is merely `undefined`. Isn't it weird how a logical operator does not return a bool? And why does it not take any of the provided strings into account?

# The Analysis

First things first, we need to understand how the `&&` in JavaScript works. It returns the first falsy value it encounters or the last (most-right) one. Such value is one of `NaN`, `null`, `0`, an empty string (`""` and such) or `undefined`.
This definition may sound a bit weird at first. However, it makes actual total sense (at least in JavaScript terms). Please give it a thought. If everything is truthy, the last expression is returned. This final expression can also be truthy or falsy, then having the sole power to determine the full statement's logical outcome.
Think through these different statements:
```javascript
if ('a string' && true) {
 //?
}
if (NaN && true) {
 //?
}
if (NaN && '') {
 //?
}
if (true && false) {
 //?
}
if (true && true && false) {
 //?
}
if ('a string' && 123 && 'foo'){
 //?
}
```
By now, you should know why the output in the given snippet is `undefined`. It's merely the first falsy statement encountered! `name1` is a truthy (non-empty!) string, `name 2` a falsy undefined. The other two variables aren't even taken into considerations at this point.
Our snippet comes down to:
```javascript
console.log(' ' && undefined); // returning undefined being falsy
```
This behavior is called "Short-Circuit Evaluation" btw.

> The logical AND expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:

>`(some falsy expression) && expr` is short-circuit evaluated to the falsy expression;

>Short circuit means that the `expr` part above is not evaluated,
> 
> from <cite>[MDN Logical AND (&&)][1]</cite>

# Snippet Summary

- **Trickery**: short-circuit evaluation returning the first falsy expression
- **Key Learning**: how exactly the Logical AND operator in JavaScript works
- **Further Reading**:
    - [Logical AND (&&)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)
    - [MDN Expressions and Operators - Logical Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#logical_operators)

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND