DEV Community

Cover image for Let's Talk About Var, Let and Const
Mark Harless
Mark Harless

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode
const groceries = ["apples", "carrots", "phenylephrine"]
groceries = "nothing"

// Uncaught TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

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' ]
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (12)

Collapse
 
sebbdk profile image
Sebastian Vargr • Edited

Var'iables are const'antly on my mind, time to let' go. :)

Collapse
 
lautarolobo profile image
Lautaro Lobo

I can't wait for part 2! :D

Collapse
 
thejoezack profile image
Joe Zack

/googles phenylephrine

:)

Collapse
 
wheatup profile image
Hao

*Laughs in hay fever

Some comments may only be visible to logged-in visitors. Sign in to view all comments.