1

I am fairly new to JavaScript and am going over some code. However there is one bit i am unsure about.

product = product !== null && product[0] !== null && product[0].id || "";

Where product is an array. Could someone please help me understand what this does. Any help would be much appreciated. Many thanks =)

sam
  • 33
  • 7
  • 1
    Does this answer your question? [Javascript AND operator within assignment](https://stackoverflow.com/questions/3163407/javascript-and-operator-within-assignment) – VLAZ Nov 27 '19 at 17:16
  • 1
    Also relevant [JavaScript OR (||) variable assignment explanation](https://stackoverflow.com/questions/2100758/javascript-or-variable-assignment-explanation) [What does the construct x = x || y mean?](https://stackoverflow.com/questions/2802055/what-does-the-construct-x-x-y-mean) – VLAZ Nov 27 '19 at 17:17
  • It helps, however I am still slightly confused by the statement especially when theres multiple "and"s and an "or" – sam Nov 27 '19 at 17:18
  • 2
    @jknotek That's not correct. The `&&` operator evaluates to the last operand evaluated. If the first operand is falsy, it returns the first operand (`0 && true` → `0`). If the first operand is truthy, it returns the second operand (`true && 1` → `1`; `true && null` → `null`). – Jordan Running Nov 27 '19 at 17:32
  • @JordanRunning Ah yes, thank you for the correction. – jknotek Nov 27 '19 at 17:34
  • With [optional chaining](https://github.com/tc39/proposal-optional-chaining) the equivalent would be `product = product?.[0]?.id || ''` – Patrick Roberts Nov 27 '19 at 17:36

2 Answers2

0
  1. product !== null it checks if product is null if it is it will stop right here and not do the other calculations (this is practiced so you won't get undefined, in this case, hmm null)

  2. product[0] !== null checks if null, so when .id you won't get an error can't find id of undefined / null 

    let usr = null
console.log(usr.id)

    GIVES ERROR Uncaught TypeError: Cannot read property 'id' of null enter code here

With a few words, these are some practices to check if the VARIABLE has unwanted values to stop the calculations right there and not get errors. Some prefer to try catch v--

Renaldo Balaj
  • 2,390
  • 11
  • 23
0

One way to understand what this does it to run it and observe the result.

Here's a JSBin showing 3 examples - which produce a different outcome, depending on the initial value of product - https://jsbin.com/roruvecubi/edit?js,console

To further clarify this with an explanation...

It will attempt to evaluate that all the following premises are true at the same time and re-assign product to the value of id of the first object found (if these are found) or an empty string if otherwise.

  1. product array is NOT null

AND

  1. First element of product array is NOT null

AND

  1. First element of product array is an object containing a truthy key-value pair with key id. I.e. First element could like this:
 { 
   id: "someValue" // product[0].id would be a truthy value in this case 
 }

AND

  1. If 3.0 is true - assign value of id. If 3.0 is NOT true (id: does not contain a truthy object, array, number, string, true - Google the precise definition of truthy), then just assign empty string "" and thus result will be product = "";
Barzev
  • 402
  • 3
  • 14