JavaScript x = x || {}

Seeing an OR” operator inside of a JavaScript assignment can be confusing to interpret. That assignment becomes more obvious once we remember two rules about JavaScript Boolean evaluation. If that puzzles you, please read on. Once you see it you will never forget it:

The thing to remember is that JavaScript OR-evaluations, short-circuit when the very first true value is found.

By short-circuiting I mean that the Boolean-inspection comes to an end and the operand on the right is never checked. By being true I mean that the value in the first operand already exists in the current program context as an identifier representing something , or, if not an identifier, the number is at least a valid value (not false or undefined).

When the JavaScript || (or) operator sees the first value as true, it does not check the second value. It short-circuits by assuming the result as true.

When this type of “construct” is used in an assignment, the first value to be true becomes the value assigned.

The other thing to know is that, in JavaScript, a Boolean evaluation is done from left to right.

Based on those two concepts, we can see why 2 is the value assigned to x in the following example:

var x = 2 || 3;  //2

Let me throw in two more examples just to make it clear:

var y = undefined || 5; //5

let z = true || 7; //true

For that matter, when we see in JavaScript something like the following declaration:

var x = x || {};

It means that, if x exists, it is assigned to variable x, which is the same as no change at all since it remains the same. If however, x does not exist, then a new empty object with the name of x is created.

Just for the sake of completion, when it comes to the && (AND) Boolean operator, there is no short-circuit evaluation since both operands must be evaluated. In that case, the last operand to the right is the one assigned to the variable.

Examples:

var x = 3 && 4 && 5;  // 5

var x = x && {}  // {}

The OR operator in the configuration discussed above, is widely used when initiating an object or an array for the purpose of sequentially adding values to the object or array being created.

Example:

 let inventory = {};
 function addMe(myObject, myArray, value) {
      myObject[myArray] = myObject[myArray] || [];
       myObject[myArray].push(value);
 }
 addMe(inventory, ‘colors’, ‘blue’);
 console.log(inventory); // { colors: [ ‘blue’ ] }
 addMe(inventory, ‘colors’, ‘orange’);
 addMe(inventory, ‘clients’, ‘Ada Lovelace’);
 console.log(inventory);
 /*
 { colors: [ ‘blue’ ] }
 { colors: [ ‘blue’, ‘orange’ ], clients: [ ‘Ada Lovelace’ ] }
 */

One more thing:

If you use let instead of “var” in the following example, you will get an error (even if the x variable already exists):

let x = x || {};  // error

This is because let-variables are not hoisted (copied to the top of the execution scope) and therefore the word "x" is totally unknown at the time of declaration. In addition, the visibility of a let variable starts at the point of declaration and downward until the end of the code-block (which totally bypasses any preexisting variable with the same name). In my view, "let" is just another useful way of declaring variables and it have many advantages, but it is not a complete replacement for var.

Cheers,

Tony de Araujo

Advertisements

Author: tarau

technical writer, web technologies

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s