Short Circuit Assignment / Evaluation in JavaScript

Short circuit assignment / evaluation is rooted in boolean logic. It is a piece of modern day JavaScript development pattern that is centered to many code bases. Mastery of its working is essential to performing as a competent developer. The following article examines this topic in depth.

By the end of this article, you will know the returned values of these absurd short circuit evaluation statements

Summary: Short circuit is the process of assigning a variable from a single term after evaluating the entire double or multi-term boolean statements. Short circuit assignment either stops at a falsy value in an AND operation, stops at a truthy value in an OR operation, or stops at the final value if a falsy vale in an AND operation or a truthy value in an OR operation could no be found.

The structure of a double-term short circuit assignment is as follows

• Example 1 : (term1 && term2)
  Case of short circuit assignment with the AND / && operator.
• Example 2 : (term3 || term4)
  Case of short circuit assignment with the OR // || operator.

AND (&&) Operator

With the AND operator, in example no. 1, both terms have to be true in order for the statement to evaluate to true. In multi-term cases, all terms have to be true in order of the statement to evaluate to true. In other words, in AND short circuit assignment, the existence of any falsy value, or the detection of the first falsy value would halt the evaluation. Therefore, the first term to be false, i.e. the first term the evaluation halts at, will be the assigned value of the short circuit evaluation.

To demonstrate this in practise, all the possible boolean scenarios will be analyzed in a double-term short circuit AND assignment:

1. truthy(1) && truthy(2) (e.g. ‘hello’ && ‘world’)
   answer: ‘world’
   explanation: the evaluation reads ‘hello’ as truthy, skips ‘hello’, reads ‘world’ as truthy, it is gonna skip ‘world’ if there is a 3rd value but since ‘world’ is the last value, this is the assigned result.
2. truthy && falsy (e.g. 1 && 0)
   answer: 0
   explanation: the evaluation reads 1 as truthy, skips 1, reads 0 as falsy, it immediately stops and assigns the statement to 0 since 0 is the first falsy value.
3. falsy && truthy (e.g. ‘’ && ‘yes’)
   answer: ‘’ (empty string)
   explanation: the evaluation reads ‘’ as falsy, so it immediately stops since ‘’ is the first falsy value.
4. falsy(1) && falsy(2) (e.g. null && undefined)
   answer: null
   explanation: the evaluation reads null as falsy, so it immediately stops since ‘’ is the first falsy value.

To demonstrate further how this would work in multi-term short circuit assignment, here are a few examples:

• 4 && 3 && 10 && 0 && 5 && 6
  answer: 0
• true && true && false && true
  answer: false
• ‘Hello’, ‘’, ‘Goodbye’
  answer: ‘’

OR (||) Operator

With the OR operator, in example no. 2, only one term within a sequence of multiple terms needs to be true in order for the whole statement to evaluate to true. In other words, in OR short circuit assignment, the existence of any truthy value, or the detection of the first truthy value would halt the evaluation. Therefore, the first term to be true, i.e. the first term the evaluation halts at, will be the assigned value of the short circuit evaluation.

To demonstrate this in practise, all the possible boolean scenarios will be analyzed in a double-term short circuit OR assignment:

1. truthy(1) || truthy(2) (e.g. ‘Tom’ || ‘Tom Nooks’)
   answer: ‘Tom’
   explanation: the evaluation reads ‘Tom’ as truthy and immediately evaluates the statement to ‘Tom’
2. truthy || falsy (e.g. ‘empty’ || ‘’)
   answer: ‘empty’
   explanation: the evaluation reads ‘empty’ as truthy and immediately evaluates the statement to ‘empty’
3. falsy || truthy (e.g. 0 || 1)
   answer: 1
   explanation: the evaluation reads 0 as falsy, skips it, then read 1 as truthy and immediately evaluates the statement to 1
4. falsy(1) || falsy(2) (e.g. NaN || false)
   answer: false
   explanation: the evaluation reads NaN as falsy, skips it, then read false as falsy, is about to skip it, but since false is the last term, the statement evaluates to false.

In summary, in an AND short circuit assignment, the first falsy value is returned, in an OR short circuit assignment, the first truthy value is returned. If there is no falsy value in the AND statement, or if there is no truthy value in the OR statement, the last value is returned.

Truthy and Falsy Values

Before proceeding any further, it is evident at this point that the implementation and practice of short circuit evaluation requires a deep understanding of boolean logic, especially its expression in JavaScript. In ECMAScript specifications, other than true and false, certain data type values and structures are falsy, whilst others truthy, these have been shown in multiple instances above. A clearer erudition of this topic will put the use of short circuit assignment into much greater dexterity. This will be explicated subtely in this section.

In ECMAScript, data are classified either into 9 types:

• Primitives (6 types): undefined, boolean, number, string, bigint, and symbol
• Object (7 main types): object, array, map, set, weakmap, weakset, date
• Function (non-data structure)
• Null (special primitive)

However, there are only 8 designated falsy values, all of which are primitive and special primitive types.

• Undefined
• Null
• Number: 0, -0, NaN (not a number)
• BigInt: 0n
• String: “” (empty string)
• Boolean: false

This means that all other data type and data structure values which are either empty or falsy-looking are in fact truthy. Commonly mistaken truthy values include:

• Array: [] (empty array)
• Object: {} (empty object)
• Function: function(){} (empty function)
• Strings: ‘0’, ‘false’ (falsy values converted into strings)

However upon using loose (==) instead of strict (===) equality, these rules might not be applied in instances. Prominent example is ([] == false) returns true. More information on this can be explored here.

Complex Short Circuit Evaluation

Short circuit assignment can be very messy and complex once && and || are combined in a statement. If both of these operators are combined, however, it might be helpful to visit the MDN operator precedence guide. Grouping () has the highest number (22). Whilst && and || have respectively orders of 7 and 6. && is higher in order than ||. Hence && will always be calculated first. In simple language, the example of 0 && 1 || 5 && 3 || 4 || false && null can be re-written with brackets by taking into consideration operator precedence to produce (0 && 1) || (5 &&3) || 4 || (false && null).

The following are a few ridiculous examples:

• (0 && 1 )|| ((2 && 3 || false && true )|| ‘hello’)
  answer: 3
  explanation: the first term (0 && 1) evalutes to 0 since it is falsy, the second term is (2 && 3 || false && true ) OR ‘hello; term (2 && 3) evalutes to 3 since they are both truthy, (false && true) evalutes to false, (these operations are done in this order because all && operations are performed prior to || operations), both terms are reduced to 3 || false, which evalutes to 3; in 3 || ‘hello’, 3 is returned as the first truthy value.
• 5 && 4 || (0 && ‘’ || true && NaN) && false
  answer: 4
  explanation: the first term evaluates to 4 as both values are truthy, the second term ((0 && ‘’ || true && NaN) && false) evaluates to falsy since even if the first part is truthy, the last part is plainly falsy, 4 || false would evaluate to 4.
• 10 && ‘hello’ && (‘hi’ || ‘’) && NaN
  answer: NaN
  explanation: this statement is a multi-term AND short circuit evaluation other than the third term (‘hi’ || ‘’) which evalutes to ‘hi’ since it is truthy; in this statement all terms before the last one are true, hence NaN is returned.

That’s all for today. Thank you for reading.