Graduate Program KB

Var vs. Let vs. Const

Kyana Bowers

  • Content

  • Var, Let and Const Outlines
  • Declarations and Updates
  • Hoisting
  • Scope Types
  • Key Differences

  • Outline

  • Before the introduction of ES6 in 2015, the only way to define your variables in JavaScript was using the Var keyword. Since then, Const and Let have been introduced to allow for Block Scoping, which added to the existing scoping types, Function and Global.

  • Declarations and Updates

  • A variable declaration is when you tell the program to reserve a space in memory for a variable. It may not have a value yet, but the space in memory is there for when a variable needs to be assigned to.
  • Initialisation is when you assign a value to an initialised variable.
  • Updating a variable is when you reassign a different value to an existing variable.
//re declared
var colour = "blue";
var colour = "red";

//updated
var colour = "blue";
colour = "red";

  • Hoisting

  • A variable in Javascript can be used before it is declared. During the Creation phase, the variable is initialised, with a value of undefined. During the Execution phase, the variable declaration is essentially lifted up to the top of the execution context, available for the variable to be used or evaluated. Hoisting is only performed on the declaration of the variable, not the initialisation.
//what you see
colour = "blue";
console.log(colour);
var colour;

//what the compiler sees
var colour;
colour = "blue";
console.log(colour);

  • Scope Types

  • There are 3 types of scope since the introduction of let and const, and ES6:
    • Block Scope
    • Function Scope
    • Global Scope
  • Originally, there was only Global and Function Scope.
  • Variables declared outside of any functions have Global Scope. They can be accessed from anywhere in the program, but can lead to an Out of Memory exception, and can be easily modified by any part of your code. Assigning a value to a variable without declaring it first will automatically make it part of the Global Scope.
  • Variables declared inside a function have Function Scope. They can only be accessed from inside a function, and are not visible to the rest of the code outside the function.
  • Variables declared inside any curly brace block have Block Scope. They cannot be accessed outside of those curly braces, unless they use the Var keyword.
//Function Scope
function newFunction() {
    var colour = "blue";
}
console.log(colour); //will throw an error, colour is not defined

//Block Scope
function newFunction(){
    var a = 10;
    if(a === 10 ){
        let colour = "blue";
    }
    console.log(colour); //will return an error, colour is not accessed within the if statement block.
}

//Global Scope
var colour = blue;

function newFunction(){
    console.log(colour); //can be accessed anywhere within the script, will run successfully.
}

  • Key Differences

  • Var keyword

  • Declarations and Updates

  • Var can be redeclared and updated as many times as you need to.

  • Hoisting

  • Var is hoisted to the top of its scope and initialised with a value of undefined

  • Scope Types

  • Var is Function and Block Scoped.

  • Let keyword

  • Declarations and Updates

  • Let can be updated, but not redeclared within it's scope, but outside the scope it an be redeclared.

  • Hoisting

  • Let is hoisted to the top of it's scope, but is not initialised. If you try to use it before it is initialised, you will recieve a Null Reference Error.

  • Scope Types

  • Let is Block Scoped.

  • Const keyword

  • Declarations and Updates

  • Const variables cannot be updated or redeclared, so it must be initialised when you declare it.
  • Const objects however, cannot be updated but the properties of the object can be.

  • Hoisting

  • Cost is hoisted to the top of it's scope, but is not initialised. If you try to use it before it is initialised, you will recieve a Null Reference Error.

  • Scope Types

  • Const is Block Scoped.