-1

I know this question has been asked for before, but I can't seem to find the right keywords to find my answer.

In javascript, you can do this

console.log(true && "hello world"); // prints hello world
console.log(false && "hello world"); // prints false

What is this behaviour called? Where javascript will output the contents of a variable if the entire expression evaluates to true?

John
  • 28,573
  • 67
  • 217
  • 373
  • 5
    I don't know if there's a name for it, that's just how things work. It's kind of like short-circuiting – CertainPerformance Jan 23 '21 at 16:04
  • 3
    @CertainPerformance "short-circuiting" is indeed the name for it! – Niet the Dark Absol Jan 23 '21 at 16:06
  • Well other languages short-circuit, but the JavaScript behavior of *evaluating* as boolean but then *resulting* in the pre-coersion actual values is unusual. I have never seen the behavior given a name. – Pointy Jan 23 '21 at 16:11
  • @Pointy - This is pretty definitively stated on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation - and in the spec (states exactly what you said just below the definition of the [short-circuit semantics](https://tc39.es/ecma262/#prod-ShortCircuitExpression)) – Randy Casburn Jan 23 '21 at 16:15
  • @RandyCasburn yes, but read about the C or C++ or Java operators and they're also described as "short-circuit". The term is old, and definitely predates JavaScript. It distinguishes this group of languages from other languages that would *always* evaluate both sides of a logical "AND" (see [this question](https://stackoverflow.com/questions/1232603/do-all-programming-languages-have-boolean-short-circuit-evaluation). The distinctive feature of JavaScript is not the short-circuit evaluation, it's that the `&&` does not necessarily yield a boolean value. – Pointy Jan 23 '21 at 16:26
  • 1
    Try searching for "truthy values" and "falsy values" – Patrick Hollweck Jan 23 '21 at 16:33
  • @Pointy - well of course it does - the OP's question was about what this evaluation is called, not what it produces or how. The OP correctly describes the what/how part. The OP's question about "what is this called" is directly _int the spec_ and the seminal documentation on MDN. I am not challenging your demonstrated vast knowledge here - I'm vectoring directly as the OP's question with a very direct answer that comes from the spec. It's that simple. – Randy Casburn Jan 23 '21 at 16:34
  • Well perhaps you're correct; it's not completely clear to me whether the question was about the short-circuit itself or about the way the final value is *not* a boolean. (*Where javascript will output the contents of a variable if the entire expression evaluates to true?*) *That* behavior is what I think has no generally-used name, though I could be wrong about that. – Pointy Jan 23 '21 at 16:39

1 Answers1

1

In the React world, This is called Conditional Rendering using the && operator. This technique leverages how Javascript short-circuits comparisons to change the view; in this case, a logged value. It is a concise and useful way to dynamically render different objects as properties change.

If you weren't rendering, it would just be a good old-fashioned short-circuit, which has been used for decades, and goes all the way back to Kernaghan and Ritchie and C language. E.g. the OR operator can be used when referencing object properties to guard against undefined values; e.g.:

const cheese = {}
console.log(cheese.cheddar) // unsafe
console.log(cheese.cheddar || "") // safe

Here, we don't really care about the actual value, we just need a truthy or falsy resolution.

Also note the double-bang !! operator, which will convert the whole darn expression to a boolean:

console.log(!!(true && "hello world")) // true

References: https://reactjs.org/docs/conditional-rendering.html https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb What is the !! (not not) operator in JavaScript?

kmiklas
  • 11,204
  • 17
  • 55
  • 84