JavaScript Variable: Should you choose let, var or const?
Tags: webdev, javascript, beginners, programming
Published: 2023-11-02 13:56:18


## Introduction

In JavaScript, variables play a fundamental role in storing and managing data. There are three main ways to declare and initialize variables: `var`, `let`, and `const`. Each has its own characteristics and use cases. Let's explore each of them in depth, along with examples:

## `var`:
   - `var` was the original way to declare variables in JavaScript, and it has some unique behaviors and quirks.
   - Variables declared with `var` are function-scoped, meaning their scope is limited to the function in which they are declared.
   - Variables declared with `var` are hoisted, which means that they are moved to the top of their containing function or global scope during the compilation phase. However, their assignments remain in place.

   ```javascript
   function varExample() {
     if (true) {
       var x = 10;
     }
     console.log(x); // 10
   }

   console.log(x); // undefined (hoisted but not initialized)
   ```

## `let`:
   - `let` was introduced in ECMAScript 2015 (ES6) and offers block-level scoping.
   - Variables declared with `let` are not hoisted to the top of their scope, and they are only accessible within the block they are defined in.

   ```javascript
   function letExample() {
     if (true) {
       let y = 20;
     }
     console.log(y); // ReferenceError: y is not defined
   }
   ```

## `const`:
   - `const` is also introduced in ES6 and has similar block-level scoping as `let`.
   - However, variables declared with `const` cannot be reassigned after their initial value is assigned. They must be initialized upon declaration.

   ```javascript
   function constExample() {
     const z = 30;
     // z = 40; // Error: Assignment to constant variable
     console.log(z); // 30
   }
   ```

## When to use each type:

- Don't use `var`, as it has some unexpected behavior and can lead to subtle bugs. It's best to use `let` or `const` instead.

- Use `let` when you need to reassign the variable's value within the same block.

- Use `const` when the value should never change after initialization. It's a good practice to use `const` for variables that represent constants or values that should not be reassigned.

### Practical Example: 

Here's a more practical example showing the differences between `let` and `const`:

```javascript
function variableExamples() {
  // Using let for reassignable variables
  let counter = 0;
  counter = 1;
  console.log(counter); // 1

  // Using const for constants
  const pi = 3.14159;
  // pi = 3.14; // Error: Assignment to constant variable
  console.log(pi);

  // Using var (not recommended)
  if (true) {
    var age = 25;
  }
  console.log(age); // 25 (function-scoped)
}

variableExamples();
// console.log(counter); // ReferenceError: counter is not defined
// console.log(pi); // ReferenceError: pi is not defined
// console.log(age); // 25 (still accessible, not block-scoped)
```


## My Advice?

My personal advice is to always start with `const`. When you feel the need that it should be changed then make it `let`. Never go for `var`. 

Happy coding! 🚀👨‍💻🌐

Follow me for more such content:
LinkedIn: https://www.linkedin.com/in/shameeluddin/
Github: https://github.com/Shameel123