Let's Talk About Var, Let and Const

Javascript, originally known as Mocha, was famously created in only 10 days by Brandon Eich while working for Mosaic in 1995. In the beginning, there was var. It was the only way you could declare a variable. This was the case all the way up until 2015 when let and const were introduced with ES6. This is a post highlighting some of their differences!

VAR

Var is scoped to the current execution context. Which means they're scoped to their enclosing function if they're inside a function. If they're not, then they're part of the global scope.

Here's an example:

  const echo = (num) => {
    for (var i = 0; i < num; i++) {
      console.log("Around the world.")
    }
  console.log(i)
  }

echo(3)

// Around the world.
// Around the world.
// Around the world.
// 3

The variable i is not scoped to the for loop but to the entire function. We know this is true because console.log(i) has access to that variable and returns the integer 3.

Now let's replace the vars with lets:

  const echo = (num) => {
    for (let i = 0; i < num; i++) {
      console.log("Around the world.")
    }
  console.log(i)
  }

echo(3)

// Around the world.
// Around the world.
// Around the world.
// Uncaught ReferenceError: i is not defined

In this situation, using let, we get an error when running console.log(i) this time. This is because let is scoped to only the for loop and not the entire function.

let and const are block-scoped. Var is scoped to the current execution context.

CONST

const stands for constant. The main idea behind it is that its value isn't supposed to change. This doesn't mean it's immutable and it cannot change at all. It means that the reference that the variable is pointing to cannot change.

Here are two examples:

const dog = "Finn"
dog = "Tuck"

// Uncaught TypeError: Assignment to constant variable.

const groceries = ["apples", "carrots", "phenylephrine"]
groceries = "nothing"

// Uncaught TypeError: Assignment to constant variable.

Pretty simple, right? You can, however, update the values inside of groceries even though it is a constant.

const groceries = ["apples", "carrots", "phenylephrine"]

groceries.push("bananas")
// 4

groceries
// [ 'apples', 'carrots', 'phenylephrine', 'bananas' ]

You are still changing the groceries but you're not changing the reference. It's still pointing to the exact same array — the same object in memory.

Part 2 coming next week!