DEV Community

tuckersteil
tuckersteil

Posted on

Difference between: Var, Let, & Const

Table of Contents:

  • Introduction
  • What is Scope?
  • Variable Value Reassignment
  • The Var Keyword
  • The Let Keyword
  • The Const Keyword
  • Summary
  • Phase-1 Project

Introduction
Var, Let, and Const are all ways to declare variables.

JavaScript now has three different keywords available to declare a variable. It is important to use these declarations the right way because they were made with the developer in mind and make code easier to understand. In this blog, I will be explaining and main differences between the three, and how they can be used.

In my opinion, the biggest difference's between Var, Let, and Const are in regards to Scope and Value Reassignment. First, let's discuss Scope!

What is Scope?

Scope determines the accessibility of variables in JavaScript. There are three different types of scope in JavaScript.

  1. Global Scope Variables declared outside a function are in the global scope. This means that global variables can be accessed or changed anywhere (or Globally).
  2. Functional Scope If a variable is declared within a function, then it is functional scope. Meaning it can only be accessed with in that function.
  3. Block Scope A block Scoped variable means that the variable defined within a block({}), are only accessible within that block. Using Var in a block scope doesn’t prevent the variable from being accessible outside of it. Using const or let in a block scope does however prevent the variables from being accessible outside it.

Variable Value Reassignment

Variable value reassignment is an extremely crucial component when deciding which keyword to use for declaration. If you know the value of your variable will need to or be changed at some point its smartest to use Let, or Var if you must. Where as the benefit of using Const is that you know that variable will always have the value that you initially assigned it with, when it was declared.

The Var Keyword

Using Var to declare your variables in JavaScript isn’t advised, and should be avoided as a general rule. That being said, variables declared using the Var keyword are either globally or functionally scoped.

var test = "Var Declaration"
console.log(test) //=> Var Declaration

function varTest(){
var fruit = "Apple"
console.log(test) _
_console.log(fruit)
}
varTest(); //=> Var Declaration, Apple

console.log(fruit) //=> Error

Here you can see that "test" was globally scoped, so it was able to be accessed both globally and inside the function. However, "fruit" was declared in a functional scope, so we were not able to access it outside the function.

The Let Keyword

The Let Keyword is pretty similar to the Var keyword as they both allow you to reassign the value later on.

let name = "Jim"
console.log(name) //=> "Jim"

name = "Bill"
console.log(name) //=> "Bill"

var name1 = "Scott"
console.log(name1) //=> "Scott"

name1 = "Tucker"
console.log(name1) //=> "Tucker"

However, the main difference between the Var and Let is that Var can be redeclared, but Let cannot due to it dealing with a block scope.

var name = "Jim" //=> "Jim"
var name = "Billy" //=> "Billy"

let name1 = "Sally" //=> "Sally"
let name1 = "Pedro" //=> "SyntaxError: Identifier 'name1' has already been declared"

The Const Keyword

Const is similar to the Let keyword as it is also blocked scoped. Const is different from Let in that it cannot be reassigned or redeclared. Thus, to use the Const keyword, you must assign it a value at the time of declaration.

const word = "Hi" //=> "Hi"
word = "Hello" //=> TypeError: Assignment to constant variable.

const name //=> SyntaxError: Missing initializer in const declaration
const name = "Mary" //=> undefined

Summary

Now that you have a better understanding of the differences between Var, Let, and Const. You can now decide which one is right for you and your code. However, its a good practice to always declare your variables with Const or Let.

  • Use Let anytime you know the value of the variable will changed.
  • Use Const when you know the value of the variable will be set and not changed.
  • Let and Var don’t have to be initialized when declared. Const has to to initialized when declared.
  • Var can be redefined and redeclared, let can be redefined but not redeclared, const cant be redefined or redeclared.

My Phase-1 Project
link: https://tuckersteil.github.io/Phase-1-Project/

For my Phase-1 project I decided to built a simple Black Jack game. The project first pulls cards from an API, to which I was able to utilize the Let keyword to save that data globally for future uses in other functions. I created a variable called "count" that i declared using Let. Which became extremely pivotal for my code, as it was used in a good majority of my functions. I also never once used Var, but did use const many times to create variables for almost all of the elements in my index.html which made it much simpler to to "deal" cards and assign images to the cards. But long story short, Im a huge fan of using Let as it just gives a superior ability to manipulate variables and makes the most sense to me.

Top comments (0)