JavaScript Variable: Should you choose let, var or const?

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.

   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.

   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.

   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:

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

Comments

[artydev]

Nice advises thank you.
Beware when using const on non primitive types, like arrays.

const a = [1,2,3]
a[0] = 90

Indeed, 'a' is not reassignabled, but it can be modified.

If you want an immutable array, you have to 'freeze' it

const a = [1,2,3]
a[0] = 90  // 90 
console.log(a) //[ 90, 2, 3 ]


const aa = Object.freeze(a)
aa[0] = 100
console.log(aa) //[ 90, 2, 3 ]

[Shameel Uddin]

Indeed, I was thinking about mentioning freeze but thought it would be a bit too much for a beginner level blog.

[artydev]

I understand :-)

[Chukwuma Anyadike]

Good stuff. When I was learning JavaScript we were taught never to use var and this article does a good job of illustrating why.