JavaScript && Operator used for returns

Question

I am working understanding a JavaScript library and I came across this statement:

const assetsManifest = process.env.webpackAssets && JSON.parse(process.env.webpackAssets)

Then later on in the library, it uses the assetsMannifest like an object e.g.

assetsManifest['/vendor.js']

I thought the && operator was only used to return boolean values in logical checks. Can someone explain to me what is going on here?

Many thanks,

Clement

The logical operators return a _truthy_ thing but doesn't return a boolean. E.g., `1 || false //1`, `true && "a" //"a"` — VLAZ, Dec 05 '16 at 12:01
Note that this is specific to some languages like Javascript that have a C-like syntax. Others with a very similar syntax (and the same operators) don't behave this way and do indeed return just a boolean rather than the last evaluated value. — jcaron, Dec 05 '16 at 12:04
Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. check below link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators . your case process.env.webpackAssets is object like String converted to object and accessed ''/vendor.js" key on the object — vijay, Dec 05 '16 at 12:07
I think I get this now :) It's very weird compared to other languages, but it does mean less code, which is always a plus. — Clement, Dec 05 '16 at 12:15

score 12 · Answer 1 · edited May 23 '17 at 11:54

12

This operator doesn't always return true or false. It doesn't work like in some other programming languages. In JavaScript && operator returns the first value if it's falsy or the second one if not.

Examples:

null && 5 returns null because null is falsy.

"yeah yeah" && 0 returns 0 because every string is truthy.

Not so obvious :-)

Further reading:

Why don't logical operators (&& and ||) always return a boolean result?

edited May 23 '17 at 11:54

Community

1
1

answered Dec 05 '16 at 12:02

Chris Dąbrowski

1,902
1
12
12

I found the link incredibly helpful. Especially the part where the `||` operator favors the first true value and the `&&` operator returns the most-right value provided everything before it was truthy – Clement Dec 05 '16 at 12:11

ixpl0 · Accepted Answer · 2016-12-05T12:08:20.587

10

&& returns first value converting to false or last value converting to true. It's because no need to calculate full logical condition with && if first value is falsy

console.log(55 && 66);
console.log(0 && 77);
console.log(88 && 0);

Also you can use && or || as if operator:

if (itsSunny) takeSunglasses();

equals to

itsSunny && takeSunglasses();

edited Dec 05 '16 at 12:08

answered Dec 05 '16 at 12:02

ixpl0

748
5
15

synthet1c · Answer 3 · 2016-12-05T12:07:19.053

3

in that context it is checking if process.env.webpackAssets is a truthy value. If it is it will evaluate and return the next part. in this case JSON.parse(process.env.webpackAssets)

The logic is essentially

if (process.env.webpackAssets) {
  return JSON.parse(process.env.webpackAssets)
}
else {
  return process.env.webpackAssets // (null | undefined | 0 | '' | false)
}

edited Dec 05 '16 at 12:07

answered Dec 05 '16 at 12:04

synthet1c

6,152
2
24
39

1

Or more precisely, `else return process.env.webpackAssets` - that value could also be `null` or `undefined`, for example. – VLAZ Dec 05 '16 at 12:05

Qwertiy · Answer 4 · 2016-12-05T12:12:56.147

Both && and || are evaluting there arguments in lazy mode and return the last value, after witch the result is known.

123 && (0 || '' && 78) || 7 && 8 || [] && {} || 90 || 77 && 13

###_^^ both results are possible 123 && ???
        #_^^ first part is falsy, resume 0 || ??
             #####_^^ can't be true, return ''
          ^^_########## 0 || '' return ''
    ^^_################ return ''
#######################_^^ resume
                           #_^^ resume
                             ^^_# return 8
                        ^^_###### return 8
                                  ^^_########################## drop

And the result is 8.

JavaScript && Operator used for returns

4 Answers4