DEV Community

loading...
Cover image for Let's Talk About Var, Let and Const

Let's Talk About Var, Let and Const

2spacemilk profile image Mark Harless ・2 min read

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!

Discussion

pic
Editor guide
Collapse
sebbdk profile image
Sebastian Vargr

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

Collapse
aleksandrhovhannisyan profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
Aleksandr Hovhannisyan

Please let's not talk about var, let, and const... Again.

I think this is like the 10th post on the topic that I've seen in 2020 :/

Collapse
thejoezack profile image
Joe Zack

Dev.To is all about providing an encouraging place for programmers to share their knowledge and help each other learn.

There are lots of reasons why someone might want to write an article. Here are a couple I just came up with:

  • There are new programmers coming into the field all the time that haven't seen those x other posts
  • One author's writing style might "click" better with another
  • It helps the authors learn about their subject more deeply
  • The author might be new to a community, trying to develop their voice/tribe
  • Sometimes the comments draw out interesting new insights and knowledge for the people involved

Dev.To is an amazing spot for all of those things. Conversely, if you are looking for deep cuts or novel programming information then you might want to check out papers-we-love or reddit instead.

Collapse
nombrekeff profile image
Manolo Edge

Totally agree with you here! This is one of the reasons I use dev.to and not stackoverflow or credit...

Collapse
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Right, but there are only so many unique insights and perspectives that someone can offer on a topic that's already been written about by millions of others.

Collapse
sebbdk profile image
Sebastian Vargr

I would tend to agree, but..

Writing these kind of articles is excellent for learning about the subject and developing writing skills.

But maybe we should have a tag or something.

Collapse
thejoezack profile image
Joe Zack

I think #beginners is a great tag for it, if we only allowed 1 post per subject then we'd be creating a wiki.

Thread Thread
sebbdk profile image
Sebastian Vargr

Yeah, that sounds appropriate. :)

Collapse
nombrekeff profile image
Manolo Edge

If you don't want to read it don't access the post man!