What is the Difference Between let, var, and const in JavaScript : Simple Explanation

Understanding the Difference Between let, var, and const in JavaScript

In JavaScript, you can declare variables using let, var, and const. These keywords may seem similar, but they have key differences that can significantly impact how your code behaves. In this article, we'll explain the differences between them and help you understand when to use each one.

Key Differences Between var, let, and const

var	let	const
Introduced in: Has been available since the beginning of JavaScript.	Introduced in: Added in ES6 (ECMAScript 2015).	Introduced in: Added in ES6 (ECMAScript 2015).
Scope: Function-scoped. A var variable is accessible throughout the function where it’s declared.	Scope: Block-scoped. A let variable is only accessible within the block {} where it’s declared.	Scope: Block-scoped, just like let.
Hoisting Behavior: var variables are hoisted and can be used before they are declared (though they will be undefined).	Hoisting Behavior: let variables are hoisted but not initialized, so you cannot use them before the declaration.	Hoisting Behavior: Similar to let, const variables are hoisted but not initialized, so they must be declared before use.
Re-declaration: You can re-declare a var variable in the same scope without any errors.	Re-declaration: You cannot re-declare a let variable in the same scope.	Re-declaration: You cannot re-declare a const variable, similar to let.
Reassignment: Variables declared with var can be reassigned.	Reassignment: Variables declared with let can also be reassigned.	Reassignment: Variables declared with const cannot be reassigned; they are constant.

Example to Illustrate the Difference

Here's an example that shows how var, let, and const behave differently:

function userDetails(username) {
  if (username) {
    console.log(salary); // Output: undefined (due to hoisting)
    console.log(age); // Error: ReferenceError: Cannot access 'age' before initialization
    console.log(country); // Error: ReferenceError: Cannot access 'country' before initialization

    let age = 30;
    var salary = 10000;
    const country = "USA";

    // Trying to reassign const
    // country = "Canada"; // Error: Assignment to constant variable.
  }

  console.log(salary); // Output: 10000 (accessible due to function scope)
  console.log(age); // Error: age is not defined (due to block scope)
  console.log(country); // Error: country is not defined (due to block scope)
}
userDetails("John");

Explanation of the Example:

1. Hoisting with var: The salary variable declared with var is hoisted to the top of the function. This is why you can access it before its declaration, although its value is undefined until the assignment happens.

2. Hoisting with let and const: Both age and country variables are also hoisted, but unlike var, they are not initialized. This means you cannot access them before their declaration, resulting in a ReferenceError.

3. Block Scope: After the if block, salary is still accessible due to var having function scope. However, both age (declared with let) and country (declared with const) are block-scoped, so they cannot be accessed outside the block.

4. Reassignment with const: Variables declared with const cannot be reassigned. In the example, trying to change the value of country would result in an error.

When to Use let, var, and const

• Use let when you need a variable that can be reassigned but should only be accessible within a specific block of code. This is useful for loop counters, conditionals, or any variable that will be modified but doesn’t need to exist outside its block.

• Use var in situations where you need a variable that should be accessible throughout a function, though this is less common in modern JavaScript due to the introduction of let and const.

• Use const when you want to declare a variable that should never be reassigned. This is ideal for constants, such as configuration values or fixed data, that should remain the same throughout your code.

Conclusion

Understanding the differences between var, let, and const is essential for writing modern, efficient JavaScript. let and const are generally preferred over var in modern code, with const being the go-to choice for variables that should not be reassigned. By choosing the right keyword, you can write clearer, more reliable code that is less prone to bugs.

By using const for values that shouldn't change, let for variables that may change within a block, and avoiding var in most cases, your JavaScript code will be safer and easier to manage.

Comments

[Andreas Patsalos]

Nice quick and straightforward explanation.

[Homayoun]

thanks 🙏