React ES6 Variables – var, let, and const Explained

With the introduction of ES6, JavaScript now provides three ways to declare variables: var, let, and const. Each serves a specific purpose, and understanding their differences is essential for building React applications efficiently. This guide will walk you through how these variable declarations work with examples.

1. var – Function Scoped Variables #

var was the original way to declare variables before ES6. Variables declared with var are:

• Function scoped, not block scoped.
• Available outside of a block (like a loop) if declared inside it.
• Accessible globally if declared outside any function.

Example: Using var #

var x = 10;

if (true) {
  var x = 20; // Same variable redeclared in the block
  console.log(x); // Output: 20
}

console.log(x); // Output: 20 (Block scope does not apply)

As shown, the value of x changes globally because var does not respect block-level scope.

2. let – Block Scoped Variables #

The let keyword is block-scoped, meaning it is only accessible within the block (or loop) in which it is defined.

Example: Using let #

let y = 10;

if (true) {
  let y = 20; // A new 'y' is defined within the block
  console.log(y); // Output: 20
}

console.log(y); // Output: 10 (Block scope maintained)

With let, the variable declared inside the if block does not affect the variable outside it. This makes let more predictable for managing scope.

3. const – Constant References #

const declares variables that are constant references. While you cannot reassign a const variable, you can still modify the contents of objects or arrays declared with it.

Example: Using const #

const z = 10;
// z = 20; // Error: Assignment to constant variable

const arr = [1, 2, 3];
arr.push(4); // Modifying the array is allowed
console.log(arr); // Output: [1, 2, 3, 4]

Similarly, for objects:

const obj = { name: "Alice" };
obj.age = 25; // Adding a new property is allowed
console.log(obj); // Output: { name: "Alice", age: 25 }

Key Points about const: #

• You cannot reassign a const variable after it is declared.
• Modifying the contents of an array or object declared with const is allowed.

4. Summary: When to Use var, let, or const #

Example: Combining let and const in a React Component #

In React, it is common to use const for constants and let for values that might change.

const Button = () => {
  let count = 0;

  const handleClick = () => {
    count++;
    console.log(`Button clicked ${count} times`);
  };

  return <button onClick={handleClick}>Click Me</button>;
};

Here, const is used for the button component, and let is used for the count variable since it changes with each click.

Conclusion #

In ES6, let and const improve variable management by providing block scope and constant references. While var can still be used, it is generally recommended to avoid it in favor of let and const for more predictable behavior.

• Use const for values that won’t change.
• Use let for values that may change.
• Avoid var unless you specifically need function scope.

By mastering variable declarations in ES6, you can write cleaner, more efficient code in your React applications.

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!