1

What does this type of notation mean?

 render() {
          const {isAuth, error} = this.state;

          document.getElementById("root").innerHTML = `
             <div style="color: ${error && "red"}">
                ${isAuth ? "Welcome back!" : error}
              </div>
           `;
        }

I do not understand why is it written like this. And what does it mean in a style property?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Ray Elshobokshy
  • 11
  • 2
  • Please do basic research before asking, this is covered in e.g. https://stackoverflow.com/q/35835362/3001761, https://stackoverflow.com/q/9549780/3001761 – jonrsharpe Nov 27 '22 at 18:42
  • 1
    What framework is this supposed to be written in? If this is supposed to be React, it is extremely poorly written code and you should definitely not try to learn from it. – Guillaume Brunerie Nov 27 '22 at 18:48
  • Try a bit of experimenting. e.g. alert("I saw an error" && "red") versus alert("" && "red") or alert(false && "red") – A Haworth Nov 27 '22 at 19:02

2 Answers2

1

This is an example of short-circuit evaluation.

result = '' && 'foo';  // result is assigned "" (empty string)
result = 2 && 0;       // result is assigned 0
result = 'foo' && 4;   // result is assigned 4

Source

  • '' is falsy, so an empty string is returned.
  • 2 is truthy, so 0 is returned.
  • 'foo' is truthy, so 4 is returned

Essentially, if error is true, then this:

`<div style="color: ${error && "red"}">`

will become this

`<div style="color:red">`

And if error is false, then the code will become

`<div style="color:false">`

Additionally, if error were to be "", then the code will become

`<div style="color:">`

And if error were to be "foo" or another truthy value, then the code will become

`<div style="color:red">`
NerdyGamer
  • 104
  • 1
  • 4
  • 1
    Good answer! Could you add the case where the variable error would be a string? `"" && "red"` would give us `""`. But `"green" && "red"` would give us `"red"`. – Alexandre Elshobokshy Nov 27 '22 at 19:18
0

I am guessing a little bit here, because depending on the framework those could maybe mean something different. But i am assuming that it is vanilla JS we are talking about (or a framework that uses vanilla js conditions)

Here is a small example:

const apple = true;
const ananas = false;

console.log('1', apple && 'it is an apple'); // returns "1 it is an apple"
console.log('2', ananas && 'it is an ananas'); // returns "false"

This notation is calle "short circuit evaluation".

From MDN: The logical AND expression is a short-circuit operator. As each operand is converted to a boolean, if the result of one conversion is found to be false, the AND operator stops and returns the original value of that falsy operand; it does not evaluate any of the remaining operands.

So writing conditionOne && doSomething is kind of the same as writing if (conditionOne) { doSomething }

You can read about it on MDN (short-circuit evaluation)

Boguz
  • 1,600
  • 1
  • 12
  • 25