Destructuring Tweets - Episode 10 - Short && Circuit && Evaluation

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 is from Ravin:

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:

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:

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 MDN Logical AND (&&)

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 (&&)
  • MDN Expressions and Operators - Logical Operators