Why am I not getting an error when checking for null length

Question

I check the number of digits in a string using the match and length properties. Here is the code with my function http://codepen.io/PiotrBerebecki/pen/redMLE

Initially, when I returned numberOfDigits.length I received an error message ( Cannot read property 'length' of null ). I solved this problem by changing the line to (numberOfDigits && numberOfDigits.length) . This works, but I would like to better understand why a new statement can be executed at present. Now the interpreter executes `numberOfDigits.length?

In addition, why do we get the same errors when the operands are reversed (numberOfDigits.length && numberOfDigits) ?

Here is the complete JavaScript code:

 function checkLength(str) { let numberOfDigits = str.match(/\d/g); return (numberOfDigits && numberOfDigits.length); } console.log( checkLength('T3xt w1th sOme numb3rs') ); console.log( checkLength('Text with some numbers') ); 

UPDATE 1: The answers below explain that:

• The order of the operands in the && expression is counted.
• JavaScript optimizes the && operator, and if the first operand evaluates to null, then JavaScript does not check the second, because the expression cannot evaluate to anything other than null / false .

Answer 1

JavaScript is trying to optimize the && operator:

 numberOfDigits && numberOfDigits.length 

If numberOfDigits is a fake value (and null is false) then the whole expression will be false and there is no need to evaluate numberOfDigits.length .

false values: undefined , null , 0 , '' , false , NaN . One way to check if something is false is to use Boolean(falsyValue) === false (or more practical but less verbose ! falsyValue ).

---

This is a side effect of the && operator. I can recommend not to use it and convert the code into something readable:

 function checkLength(str) { let numberOfDigits = str.match(/\d/g); return Array.isArray(numberOfDigits) ? numberOfDigits.length : 0; } 

Answer 2

"Does the interpreter execute` numberOfDigits.length now? "

No, JavaScript short circuits of logical expressions - as soon as the result is known (i.e. the first operand in and is false, or the first operand in or true), no further operations are performed in the expression.

Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

also, be careful: && and || optionally return Booleans in JavaScript

Answer 3

the reason is that when the interpreter sees two operations related to the logical and (& &), first it will execute the first, and only if it is checked for true will it execute the last.

therefore, since he found numberOfDigits to be zero, which is equivalent to false in JS, it stops execution and is never reset to numberOfDigits.length .

on the contrary, a crash will occur.

in logical OR (||), the interpreter will cease to evaluate after the first statement is true.

Answer 4

I believe the reason is that the order of conditions is considered.

The numberOfDigits condition is evaluated first, so if it is false, the remaining conditions are not evaluated, and you will not get an error.

In a different order, you try to read the length property for null, giving rise to an error.

Answer 5

The “AND” logic will be executed as shown below.

 true & true = true false & anything = false` 

If the first condition fails, then there is no point in fulfilling the second. therefore, it will not execute numberOfDigits.length if numberOfDigits is null or undefined, so there is no error in the case below.

 (numberOfDigits && numberOfDigits.length) => false false && anything => false 

In the same way, if the first condition is not equal to zero, it will fulfill the second condition.

 (numberOfDigits && numberOfDigits.length) => true true && true (must be) => true 

Note. In javascript, null and undefined interpreted as false in conditional statements.