var vs let vs const

Guri Bee

2 min read

·

19-10-2024

1

0

Share

Demystifying JavaScript Variables: var, let, and const

JavaScript, a dynamic and versatile language, offers a variety of ways to declare variables. Among these are var, let, and const, each with its own quirks and benefits. Choosing the right declaration method is crucial for writing clean, maintainable, and error-free code. Let's explore the differences between these three keywords and when to use each one.

1. The Granddaddy: var

Introduced in the early days of JavaScript, var was the only way to declare variables. Here's how it works:

var message = "Hello world!";
console.log(message); // Output: "Hello world!"

var has a few drawbacks:

• Hoisting: Variables declared with var are "hoisted" to the top of their scope. This means you can use them before they are declared, which can lead to unexpected behavior.

  console.log(myVar); // Output: undefined
  var myVar = "Hello!";
  

• Scope Issues: var has function scope. If declared inside a function, the variable is only accessible within that function. However, within a block (like an if statement), var retains function scope.

  function myFunction() {
      if (true) {
          var localVar = "Inside block";
      }
      console.log(localVar); // Output: "Inside block" 
  }
  

2. The Modern Revolution: let and const

To address the shortcomings of var, ES6 introduced let and const.

let:

• Block Scoping: let variables are scoped to the block in which they are declared. This ensures that variables are only accessible within their intended scope, improving code organization and reducing accidental modifications.

  if (true) {
      let localVar = "Inside block";
  }
  // console.log(localVar); // Error: localVar is not defined 
  

• No Hoisting: let variables are not hoisted. Trying to access them before their declaration will throw a ReferenceError.

const:

• Immutable Values: const variables are declared with the intention of holding constant values. They cannot be reassigned after their initial declaration.

  const myConstant = "Hello";
  // myConstant = "Goodbye"; // Error: Assignment to constant variable.
  

• Block Scoping: Like let, const variables are also block-scoped.

3. When to Use Which?

Here's a simple guideline for choosing the right declaration:

• Use const by default: Unless you need to reassign a value, const is the preferred choice. It enforces immutability and promotes cleaner code.

• Use let for reassignments: When you need to modify a variable's value throughout the code, use let.

• Avoid var: var is considered legacy and its behavior can lead to unpredictable results. It's best to avoid it altogether.

4. Practical Examples

• Storing User Input: let is perfect for storing user input as it may need to be updated throughout the program.

  let userName = prompt("Enter your name:");
  console.log("Hello, " + userName);
  

• Defining Math Constants: const is ideal for constants like Pi or the speed of light, which never change.

  const PI = 3.14159;
  let circleArea = PI * radius * radius;
  

5. Conclusion

Understanding the differences between var, let, and const is crucial for writing modern, reliable, and error-free JavaScript code. By embracing let and const, you'll benefit from cleaner code, reduced errors, and better code readability.

Attribution: This article was inspired by various resources, including https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let, and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const.