Invalid Left Hand Side In Assignment Error Message

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.

Related

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

varprintError=function(error,explicit){

    console.log(`[${explicit?'EXPLICIT':'INEXPLICIT'}]${error.name}:${error.message}`);

}

 

try{

    varname='Bob';

    if(name='John'||name='Fred'){

        console.log(`${name}returns!`)

    }else{

        console.log(`Just${name}thistime.`)

    }

}catch(e){

    if(einstanceofReferenceError){

        printError(e,true);

    }else{

        printError(e,false);

    }

}

1

Uncaught ReferenceError:Invalid left-hand side inassignment

varprintError=function(error,explicit){

    console.log(`[${explicit?'EXPLICIT':'INEXPLICIT'}]${error.name}:${error.message}`);

}

 

try{

    varname='Bob'

    +=' Smith';

 

    console.log(`Nameis${name}.`);

}catch(e){

    if(einstanceofReferenceError){

        printError(e,true);

    }else{

        printError(e,false);

    }

}

1

Uncaught ReferenceError:Invalid left-hand side inassignment

varprintError=function(error,explicit){

    console.log(`[${explicit?'EXPLICIT':'INEXPLICIT'}]${error.name}:${error.message}`);

}

 

try{

    varname='Bob'

    +' Smith';

 

    console.log(`Nameis${name}.`);

}catch(e){

    if(einstanceofReferenceError){

        printError(e,true);

    }else{

        printError(e,false);

    }

}

History

This warning has existed in two forms across the three main linters. It was introduced in the original version of JSLint and has remained in all three tools ever since.

  • In JSLint and JSHint the warning given has always been "Bad assignment"

  • In ESLint the warning has always been "Invalid left-hand side in assignment"

The situations that produce the warning have not changed despite changes to the text of the warning itself.

When do I get this error?

The "Bad assignment" error (and the alternative "Invalid left-hand side in assignment" error) are thrown when JSLint, JSHint or ESLint encounters an assignment expression in which the left-hand side is a call expression. In the following example we have an statement with an assignment expression where you would normally expect a conditional:

JSLint also raises this warning when it encounters an assignment to a property of the object. In this example we attempt to define an property:

Why do I get this error?

In the case of assignment to a function call this error is raised to highlight a fatal reference error. Your code will throw an error in all environments if you do not resolve this issue. It makes no sense to assign a value to a call expression. The return value will be a literal value (such as a string or number) or an object reference, neither of which can be directly assigned to. Imagine it as if you're trying to do .

If you're receiving the warning in this situation the chances are you were actually trying to perform a comparison rather than an assignment. If that's the case just ensure you're using a comparison operator such as instead of the assignment operator :

In the case of assignment to a property of an object this error is raised to highlight a bad practice. The object is notoriously difficult to work with and has behaviour that differs significantly between "normal" and "strict" mode. JSLint has numerous warnings related to abuse of the object but if you're receiving the "Bad assignment" error the chances are you can use a normal variable instead:

In JSHint 1.0.0 and above you have the ability to ignore any warning with a special option syntax. Since this message relates to a fatal reference error you cannot disable it.

In ESLint this error is generated by the Esprima parser and can therefore not be disabled.

0 thoughts on “Invalid Left Hand Side In Assignment Error Message

Leave a Reply

Your email address will not be published. Required fields are marked *