JavaScript Error Handling

JavaScript – ReferenceError: invalid assignment left-hand side

Next on the list in our extensive JavaScript Error Handling series we’re going to examine the Invalid Left-Hand Assignment error in greater detail. The Invalid Left-Hand Assignment error is a sub-object of ReferenceError and is thrown, as the name implies, when code attempts to perform an invalid assignment somewhere.

In this post we’ll look at a few code examples to illustrate some common methods of producing an Invalid Left-Hand Assignment error, as well as examine how to handle this error when it rears its ugly head. Let the party begin!

The Technical Rundown

  • All JavaScript error objects are descendants of the Error object, or an inherited object therein.
  • The ReferenceError object is inherited from the Error object.
  • The Invalid Left-Hand Assignment error is a specific type of ReferenceError object.

When Should You Use It?

As one of the simplest JavaScript errors to understand, the Invalid Left-Hand Assignment error appears in only a handful of situations in which code is attempting to pass an assignment incorrectly. While this is generally thought of as a syntactic issue, JavaScript defines this particular assignment error as a ReferenceError, since the engine effectively assumes an assignment to a non-referenced variable is being attempted.

The most common example of an Invalid Left-Hand Assignment error is when attempting to compare a value using a assignment operator (=), rather than using a proper comparison operator (== or ===). For example, here we’re attempting to perform a basic comparison of the variable name with the values John or Fred. Unfortunately, we’ve made the mistake of using the assignment operator =, instead of a comparison operator such as == or ===:

Sure enough, rather than giving us an output, the JavaScript engine produces the expected Invalid Left-Hand Assignment error:

It’s worth noting that catching an Invalid Left-Hand Assignment error with a typical try-catch block is particular difficult, because the engine parses the code from inside out, meaning inner code blocks are parsed and executed before outer blocks. Since the issue of using a = assignment operator instead of a == comparison operator means the actual structure of the code is changed from the expected, the outer try-catch fails to be parsed and properly executed. In short, this means Invalid Left-Hand Assignment errors are always “raw”, without any simple means of catching them.

Another common method for producing an Invalid Left-Hand Assignment error is when attempting to concatenate a string value onto a variable using the addition assignment += operator, instead of the concatenation operator +. For example, below we’re attempting to perform concatenation on the name variable on multiple lines, but we’ve accidentally used the += operator:

This isn’t the syntax JavaScript expects when concatenating multiple values onto a string, so an Invalid Left-Hand Assignment error is thrown:

To resolve this, we simply need to replace += with the concatenation operator +:

Now we skip the Invalid Left-Hand Assignment error entirely and get our expected output indicating the full name stored in the name variable:

To dive even deeper into understanding how your applications deal with JavaScript Errors, check out the revolutionary Airbrake JavaScript error tracking tool for real-time alerts and instantaneous insight into what went wrong with your JavaScript code.