The left first. ||
uses what is called short-circuit evaluation, also known as minimal evaluation, meaning it will only evaluate the right side of the expression, if the left side is false.
From the ECMAScript Language Specification:
11.11. Binary Logical Operators
The production LogicalORExpression : LogicalORExpression ||
LogicalANDExpression
is evaluated as follows:
- Let lref be the result of evaluating LogicalORExpression.
- Let lval be GetValue(lref).
- If ToBoolean(lval) is true, return lval.
- Let rref be the result of evaluating LogicalANDExpression.
- Return GetValue(rref).
Thus, in your expression:
ctx['ballctx'] || createCanvas('game-screen', 'ballctx');
^-- lval ^-- rval
If lval
evaluates to true
, rval
won't be evaluated. In other words, you'll only create a new canvas if ctx['ballctx']
evaluates to false, so your code is correct.