ES6 Variables

React ES6 Variables (let and const)

Prior to ES6, the only way to declare a variable in JavaScript was by using the var keyword. However, var had several quirks related to scoping that often caused unpredictable bugs in large applications.

ES6 introduced two new ways to declare variables: let and const. In modern React development, you will almost exclusively use these two keywords, leaving var entirely in the past.

The Problem with var

Variables declared with var have "function scope" or "global scope." They do not respect block scope (like the code inside an if statement or a for loop).

var x = 10;

if (true) {
  var x = 20; // This actually overwrites the global x!
}
console.log(x); // Outputs: 20

This behavior often leads to accidental overwrites of variables, especially inside complex React components.

The Solution: let

The let keyword allows you to declare a variable with block scope. A block is generally any code wrapped inside curly braces {}. Variables declared with let are contained strictly within that block.

let y = 10;

if (true) {
  let y = 20; // This is a completely different variable scoped to this block
  console.log(y); // Outputs: 20
}
console.log(y); // Outputs: 10 (The outer variable remains safe!)

Use let when you expect the value of a variable to change later in your code (e.g., counters in loops, or temporary calculations).

Constants with const

The const keyword is used to declare variables that cannot be reassigned. Just like let, const is block-scoped.

const pi = 3.14159;
pi = 3.14; // ERROR! Assignment to constant variable.

const in React

In React, const is the default choice for almost everything. By preventing reassignment, you make your code more predictable and less prone to side-effects.

• Component Declarations: React functional components are almost always declared with const.
• Props: Values passed as props should be treated as immutable, making const a great fit for destructuring them.
• Hooks: When using useState, the state variable itself should not be reassigned directly using =, so it is declared with const.

import React, { useState } from 'react';

// Component declared as a constant
const Counter = () => {
  // State variables are constants because React updates them via setCounter
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

Mutating Objects and Arrays with const

It is important to understand that const does not make the value immutable; it only makes the binding immutable. If you assign an object or an array to a const variable, you can still modify its properties or push new items into it.

const user = { name: "Alice", age: 25 };

// You CAN do this:
user.age = 26; 
// You CANNOT do this:
user = { name: "Bob", age: 30 }; // ERROR! Reassignment

(Note: In React state management, you still shouldn't mutate objects directly, but this is a React rule, not a JavaScript limitation).

Summary of Best Practices

1. Always use const by default. This communicates to other developers that the variable should not be reassigned.
2. Use let only when you know the variable needs to be reassigned (e.g., inside a for loop).
3. Never use var. It can lead to confusing scope bugs and is considered outdated in modern JavaScript and React.