Skip to main content

How to Resolve the "SyntaxError: Invalid left-hand side in assignment" Error in JavaScript

The SyntaxError: Invalid left-hand side in assignment is a common error in JavaScript that occurs when you try to assign a value to something that cannot receive a value. The "left-hand side" of an assignment operator (=) must be a valid target for assignment, such as a variable or an object property.

This guide will explain what causes this error by breaking down the most common mistakes, such as confusing the assignment operator (=) with comparison operators (== or ===), and show you how to fix them.

The Core Problem: What is a "Left-Hand Side"?​

In JavaScript, the assignment operator (=) works by taking the value on its right side and assigning it to the target on its left side. This "left-hand side" (LHS) must be a valid reference where a value can be stored.

Valid LHS targets include:

  • A variable: let myVar = 10;
  • An object property: myObj.prop = 20;
  • An array element: myArray[0] = 30;

Invalid LHS targets include:

  • A literal value: 10 = 20; (You can't assign a value to the number 10)
  • The result of a mathematical operation: (x + y) = 30;
  • The result of a function call: getMyValue() = 40;

The "Invalid left-hand side in assignment" error occurs when you place an invalid target on the left side of an =.

Cause 1 (Most Common): Confusing Assignment with Comparison​

This is the most frequent cause of the error, especially for beginners. You use a single equals sign (=) inside an if statement when you meant to use a comparison operator (== or ===).

Example of code with error:

let myValue = 10;

// Problem: This is an assignment, not a comparison.
// It tries to assign the value 20 to the value 10.
if (myValue = 20) { // This is equivalent to `if (10 = 20)`
  console.log('This will not work.');
}

Error Output:

Uncaught SyntaxError: Invalid left-hand side in assignment
warning

If you try this code in the browser console, it doesn’t throw a syntax error. Instead, it assigns 20 to myValue, and since 20 is a truthy value, the if block runs.

The solution is to always use the strict equality operator (===) or the loose equality operator (==) for comparisons in conditional statements.

const myValue = 10;

// Correct: Use '===' for comparison.
if (myValue === 20) {
  console.log('Value is 20');
} else {
  console.log('Value is not 20');
}

Cause 2: Incorrectly Accessing Object Properties​

This error can occur if you use dot notation with an object key that is not a valid identifier, such as a key containing a hyphen.

Example of code with error:

const styles = {};

// Problem: 'background-color' is not a valid identifier for dot notation.
// The engine interprets this as "subtract color from styles.background".
styles.background-color = 'blue';
note

This fails because styles.background - color is a mathematical operation, which is an invalid target for assignment.

The solutions uses bracket notation ([]) for any object key that is not a valid JavaScript identifier (e.g., contains spaces, hyphens, or starts with a number).

const styles = {};

// Correct: Use bracket notation for keys with special characters.
styles['background-color'] = 'blue';

console.log(styles); // Output: { 'background-color': 'blue' }

Cause 3: Assigning a Value to a Function Call​

You cannot assign a value to the result of a function call. The return value of a function is a temporary value, not a storage location.

Example of code with error:

function sum(a, b) {
  return a + b;
}

// Problem: This tries to assign the string 'result' to the number 10.
sum(5, 5) = 'result';

The solution assigns the result of the function call to a variable.

function sum(a, b) {
  return a + b;
}

// Correct: The function's return value is assigned to the 'result' variable.
const result = sum(5, 5);

console.log(result); // Output: 10

How to Debug the Error​

Modern browsers and code editors make this error easy to find.

  • Check the Console: The error message in your browser's developer console will usually point to the exact line number where the syntax error occurred.
  • Look for Red Squiggles: Your code editor (like VS Code) will almost always highlight the invalid assignment with a red underline, often providing a helpful error message when you hover over it.

Conclusion​

The Invalid left-hand side in assignment error is always a syntax error caused by trying to assign a value to an invalid target.

To fix it, check your code for these common mistakes:

  • Ensure you are using === or == for comparisons inside if statements, not the single assignment operator (=).
  • Use bracket notation (obj['key']) for object keys that contain hyphens or other special characters.
  • Make sure you are assigning the result of a function call to a variable, not the other way around.

Table of Contents