var, let, and const
Tags: javascript, variables, scope, jses6
Published: 2023-01-06 09:07:35

**var:**

Prior to 2015, the only way to declare a variable in JavaScript was by using the _var_ keyword.  One would declare a variable such as:

`var someNumber = 1;`

The _var_ way of declaring variables sufficed for all use cases but it proved to be a bit confusing at times.

For instance, the _var_ keyword allowed you to declare a variable with the same name, multiple times like:

```var num;
num = 8;
num = 10;
console.log(num); // output : 10```

This behavior led to unintended bugs and lots of unnecessary bug hunting.

Secondly, _var_ is not blocked scoped.  What this means is that the same variable name can be unintentionally (or intentionally) used inside and outside a code block.  For instance:

`var x = 5;`

```if (x === 5) {
  var x = 7;
  console.log(x); // expected output : 7
}```

`console.log(x); //expected output : 7`

Notice here that JavaScript allowed us to create a two variables with the same identifier _x_ but in actuality two separate variables with different values were not created, it simply reassigned the variable pointer to the new value since _var_ does not acknowledge block scoping.

**let & const:**

So now that we see the pitfalls of using _var_ we can now appreciate the introduction of the _let_ and _const_ variable identifiers introduced in JSES6 (ECMAScript 2015).  These new keywords addressed the pitfalls associated with _var_ and provide developers with more flexibility in terms of scoping and value assignment.

_Scoping:_

One of the biggest differences between `let / const` and `var` is scoping.  Variables declared with _let_ & _const_ are block scoped.  This means the following would occur:

```var a = 20;
 console.log(a); // Expected output: 20
{
  let exe = 30;
  const num = 10;
  var a = 40;
  console.log(exe); // Expected output: 30
  console.log(num); // Expected output: 10
}
console.log(a) // Expected output: 40
console.log(exe); // Uncaught ReferenceError: exe is not defined
console.log(num); // Uncaught ReferenceError: num is not defined```

As you can see here, variables declared by _var_ can be accessed (and re-declared) inside code blocks.  However, variables declared with _let_ and _const_ are scoped to the code block in which they were defined and cannot be accessed outside of that block.  Therefore variable scoping is one of the most noticeable changes with the introduction of _let_ and _const_.

**const:**

The second biggest difference in the new variables declared in ES6 is with how _const_ handles value assignment.  A variable declared by _const_ MUST be initially declared and cannot be redeclared.  

This means that the following would occur:

```const num = 3;
num = 5; // Uncaught TypeError: Assignment to constant variable.```

Besides this, variables declared with the _const_ keyword behave the same as _let_ variables in that they are both block (and function scoped).  

These are the main differences introduced by the _let_ and _const_ variable declaration keywords introduced in JSES6 (ECMAScript 2015).  And now with additional options you can choose your variable declarations with more strategy and thought as to their intended functionality.