Facebook Pixel

Common let and const Mistakes in JavaScript

let and const have their own pitfalls. Here are the most common mistakes and how to avoid them.

Common let and const Mistakes in JavaScript

let and const are safer than var, but they have their own pitfalls. Here are the common mistakes.

Mistake 1: Using const When You Need to Reassign

const count = 0; count++; // TypeError: Assignment to constant variable `` **Fix**: Use `let` for variables that will change. ### Mistake 2: Forgetting `const` Does Not Freeze Objects ```js const config = { apiUrl: "..." }; config.apiUrl = "changed"; // OK (no error, but maybe unexpected) `` **Fix**: Use `Object.freeze` if you want immutability. ### Mistake 3: Accessing `let`/`const` Before the Declaration Line ```js console.log(x); // ReferenceError (TDZ) let x = 5; `` **Fix**: Declare before use. The TDZ is intentional; do not try to work around it. ### Mistake 4: `const` Without an Initializer ```js const x; // SyntaxError: Missing initializer in const declaration `` **Fix**: Always initialize `const` at declaration: `const x = 5;`. ### Mistake 5: Re-declaring in the Same Scope ```js let x = 1; let x = 2; // SyntaxError: Identifier 'x' has already been declared `` **Fix**: Use distinct names or reassign (`x = 2`) instead of re-declaring. ### Mistake 6: Using `const` in a Classic `for` Loop Counter ```js for (const i = 0; i < 3; i++) {} // TypeError: Assignment to constant variable `` **Fix**: Use `let` for the classic `for` counter. Use `const` for `for...of` and `for...in`. ### Mistake 7: Expecting `const` to Prevent Mutation of Nested Objects ```js const obj = { nested: { a: 1 } }; obj.nested.a = 2; // OK (const does not deep-freeze) `` **Fix**: Use a deep freeze function or an immutable data library. ### Mistake 8: Redeclaring a `let` Across Switch Cases ```js switch (x) { case 1: let y = 1; break; case 2: let y = 2; // SyntaxError (same block scope) break; } `` **Fix**: Wrap each case in its own block: ```js switch (x) { case 1: { let y = 1; break; } case 2: { let y = 2; break; } } `` ### The Takeaway Common `let`/`const` mistakes: using `const` for reassignable variables, forgetting `const` does not freeze objects, TDZ access, missing initializers, re-declaring, `const` in classic `for` loops, expecting deep freeze, and re-declaring across switch cases. Use `let` for changing values, `const` + `freeze` for immutability, and wrap switch cases in blocks.

Assuming it makes objects and arrays immutable. const only prevents reassignment of the variable binding. You can still mutate the object's properties. Use Object.freeze for immutability.

Because const requires a value at declaration (const x = 5). The engine catches the missing initializer at parse time, before any code runs, so it is a SyntaxError not a runtime error.

Because i++ reassigns i, and const does not allow reassignment. It throws TypeError: Assignment to constant variable. Use let for classic for loop counters, const for for...of and for...in.

Because all cases in a switch share one block scope (unless wrapped in braces). A let in two cases is a re-declaration in the same scope. Fix by wrapping each case in its own block with braces.

Object.freeze is shallow. For deep immutability, write a recursive deepFreeze function that freezes the object and every nested object. Or use an immutable data library like Immutable.js or Immer.

Ready to master React completely?

Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.