The Difference Between let, const, and var //Javascript.

we have three ways to declare variables in JavaScript: var, let, and const. Here, we will explore the what, why, and how of var, let, and const with examples.

var, let and const generally control the hoisting of variables. Another feature of const is that contrary to variables that can change, values declared here are CONSTANT - cannot change.

Scope in Javascript

Scope refers to the environment of a variable. It refers to how accessible a variable is — what parts of the program can access the variable.

In Javascript, there are three types of scope namely:

• Global Scope
• Local Scope
• Block Scope

Global scope

This is the default that defines variables globally. That is, can be referenced anywhere in the program.

var name = "Javascript"
function printName() {
  console.log(name)
}
printName()
// Javascript

name is global, hence the function can access it.

Local scope

This is created with functions. Variables declared here can only be accessed within the function it was created in. Example:

var name = "Javascript"
function printName() {
  console.log(name)
  var number = 18
}
console.log(number)
printName()

A ReferenceError is thrown because number is locally scoped and cannot be accessed outside the function.

Block Scope

This scope is generally created with curly brances ({ }). These braces exist in functions, loops, if statements and so on.

var name = "Javascript"
if (name === "Javascript") {
  var number = 17
}
console.log(number)
// 17

We’ve gotten the hang of scope,

Now to the keywords

The two main differences between var, let and const is that

1. var hoists its variables to the top of its local/global scope while let and const does not hoist its variables.
2. var cannot be used in block scopes. It still hoists it to the top of the local/global scope. While let and const can be used in block scopes.

Examine the following code:

console.log(name)
var name = "Javascript"
function printName() {
  console.log(number)
  var number = 16
  console.log(age)
  let age = 15
}
printName()

If you tried the above, you’ll get an error, which is ReferenceError: Cannot access age before initialization. This is contrary to undefined which var would have resulted. This is because let does not hoist variables

Examine the next code:

console.log(name)
var name = "Javascript"
function printName() {
  console.log(number)
  var number = 16
  console.log(name2)
  console.log(name3)
  if (number === 16) {
    var name2 = "keyword"
  }
  if (number === 15) {
    var name3 = "letconst"
  }
}
printName()

This prints undefined for name2 and name3 to the console. name2 and name3 is declared and hoisted to the top of the local scope even before the if statements are executed but the value isn't hoisted along with it. This proves the first difference.

Examine this code again:

console.log(name)
var name = "Javascript"
function printName() {
  console.log(number)
  var number = 16
  if (number === 16) {
    let name2 = "keyword"
  }
  console.log(name2)
}
printName()

This results in a Reference Error. name2 is not defined. This proves the second difference.

const works the same way with let in terms of scope and hoisting, but does not allow changing the values of its variables.