JavaScript const vs var

In JavaScript, const and var are both used for variable declarations, but they have different behaviors and usage. Let’s Understand the differences between the ‘const’ and ‘var’ keywords in JavaScript.

const:

• Variables declared with const are block-scoped and cannot be reassigned once they are defined. They are meant to hold constant values.
• The value assigned to a const variable cannot be changed or reassigned. If you try to reassign a const variable, it will result in an error.
• It is important to note that while the variable itself is immutable, the object it references can still be mutated. For example, if a const variable holds an object, the properties of the object can be modified, but the variable cannot be assigned a new object.

Here’s an example of using const:

const pi = 3.14159;
pi = 3.14; // Error: Assignment to constant variable.

var:

• Variables declared with var are function-scoped or globally-scoped, depending on where they are defined.
• var variables can be reassigned and updated within their scope. They have no restrictions on reassignment.
• var variables are hoisted to the top of their scope, which means you can access them before they are declared. However, their value will be undefined until they are assigned a value.

Here’s an example of using var:

function example() {
  var x = 10;
  if (true) {
    var x = 20;
    console.log(x); // Output: 20
  }
  console.log(x); // Output: 20
}

example();

It’s worth noting that since the introduction of ES6 in 2015, the preferred way to declare variables is to use const and let instead of var. const provides immutability, and let provides block-scoping, which helps avoid common pitfalls and makes code easier to reason about.

Here’s a tabular format comparing the characteristics of const and var in JavaScript:

JavaScript const vs var example

Simple example code.

function example() {
  const x = 10;
  var y = 20;

  if (true) {
    const x = 30; // Block-scoped constant
    var y = 40; // Reassignment of variable

    console.log(x); // Output: 30
    console.log(y); // Output: 40
  }

  console.log(x); // Output: 10 (outer scope constant is unaffected)
  console.log(y); // Output: 40 (variable is reassigned in the outer scope)
}

example();

Output:

This example showcases the differences in scoping and reassignment behavior between const and var in JavaScript.

In this example, we have a function called example that declares a constant x using const and a variable y using var. Inside an if statement block, we again declare a constant x and reassign the variable y.

When we log the values of x and y inside the if block, we get 30 and 40, respectively. This is because the inner const x declaration creates a new block-scoped constant that shadows the outer const x. The variable y is redeclared using var, which changes its value in both the inner and outer scopes.

Outside the if block, when we log the values of x and y, we get 10 and 40, respectively. This demonstrates that the outer const x remains unaffected by the inner declaration, but the variable y retains its reassigned value from the inner scope.

Comment if you have any doubts or suggestions on this Js difference topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version