Skip to main content

How to Resolve the "SyntaxError: Identifier has already been declared" Error in JavaScript

The SyntaxError: Identifier '...' has already been declared error is one of the most common errors for developers new to modern JavaScript. It occurs when you attempt to declare a variable with a name that is already in use within the same scope, using the let or const keywords.

This guide will explain the root cause of this error, show you how it appears in different common scenarios (including loops and switch statements), and teach you the correct way to declare and reassign variables to avoid it.

The Core Problem: Re-declaring Variables with let and const​

The keywords let and const, introduced in ES6, create variables that are block-scoped. A key rule of block-scoped variables is that you cannot declare the same variable more than once in the same scope.

For example, attempting to declare 'city' a second time in the same scope will give a SyntaxError:

// Problem: Attempting to declare 'city' a second time in the same scope.
let city = 'New York';
let city = 'London'; // ⛔️ SyntaxError: Identifier 'city' has already been declared

The same error occurs with const:

const count = 100;
const count = 200; // ⛔️ SyntaxError: Identifier 'count' has already been declared
note

This is a feature, not a bug. It prevents you from accidentally re-declaring a variable, which was a common source of bugs with the older var keyword.

The Solution: Declare Once, Reassign as Needed​

To fix this error, you must understand the difference between declaration and reassignment.

  • Declaration (let, const): This creates the variable. It should only be done once per scope.
  • Reassignment (=): This updates the value of an existing variable.

If you need to change a variable's value, declare it with let and then reassign it without the let keyword.

// 1. Declare the variable a single time using `let`.
let city = 'New York';
console.log(city); // Output: New York

// 2. Reassign its value as many times as you need.
city = 'London';
console.log(city); // Output: London
note

If your variable's value should never change, declare it with const.

const PI = 3.14159;
// PI = 3; // This would throw a TypeError because you cannot reassign a constant.

Understanding Block Scope​

Variables declared with let and const exist only within the "block" they are defined in. A block is any code surrounded by curly braces {...}, such as in an if statement, a for loop, or a standalone block.

This means you can declare a variable with the same name in a different scope without causing an error.

const user = 'Alice'; // Outer scope

if (true) {
  const user = 'Bob'; // Inner scope (this is a DIFFERENT variable)
  console.log(user);  // Output: Bob
}

console.log(user);    // Output: Alice
note

While this is allowed, it's generally considered bad practice to "shadow" variables like this, as it can make code harder to read.

Common Scenarios Where the Error Occurs​

Simple Re-declaration​

This is the most common case, as shown above. The fix is to remove the second let or const keyword.

Conflicting Function and Variable Names​

Functions, classes, and variables all share the same scope. You cannot declare a variable with the same name as a function.

For example:

function calculateTotal() {
  // ...
}
const calculateTotal = () => { /* ... */ }; // ⛔️ SyntaxError

Solution: Ensure all functions and variables within the same scope have unique names.

Incorrect for Loop Syntax​

A classic mistake is to use commas instead of semicolons in a for loop's definition, which causes the interpreter to see multiple declarations of the same variable.

For example:

// Problem: Using commas instead of semicolons.
for (let i = 0, i < 10, i++) { // ⛔️ SyntaxError: Identifier 'i' has already been declared
  // ...
}

Solution: Always use semicolons to separate the parts of a for loop.

for (let i = 0; i < 10; i++) {
  // Correct
}

Re-declaring a Variable Inside a switch Statement​

All case blocks within a switch statement share the same scope. This means you cannot declare a block-scoped variable with the same name in multiple case blocks.

For example:

switch (action) {
  case 'create':
    const message = 'Creating item...'; // `message` is declared here
    console.log(message);
    break;
  case 'delete':
    const message = 'Deleting item...'; // ⛔️ SyntaxError: Identifier 'message' has already been declared
    console.log(message);
    break;
}

Solution: Create a new block scope for each case by wrapping its contents in curly braces {...}.

switch (action) {
  case 'create': { // New block scope
    const message = 'Creating item...';
    console.log(message);
    break;
  }
  case 'delete': { // New block scope
    const message = 'Deleting item...'; // This is a new, separate variable
    console.log(message);
    break;
  }
}

Conclusion​

The SyntaxError: Identifier has already been declared is a protective feature of modern JavaScript that prevents you from accidentally creating conflicting variables.

  • Declare a variable only once in a given scope using let or const.
  • If you need to change a variable's value, use let for the declaration and then reassign it without the keyword.
  • Be aware of shared scopes in constructs like switch statements and use curly braces {} to create new block scopes when needed.

Table of Contents