Three Sisters [var, let, const]

When I first got introduced to JavaScript, one of my many challenges was deciding what to use when declaring a variable. Initially, I’d use var a lot, and then I started using const almost as much; let and I weren’t so close then. So today, I’ll be showing how I decide what key to use when declaring a variable. On your mark, get ready, let’s go.

What are variables, and why do we need to declare them?

Variables are little boxes where you keep information. Let's say you are moving houses, so you get a little box to keep your glass wears and label it fine china. Giving that variable a name is called declaring a variable. We do this to know what it contains without constraint. In javaScript, we use the assignment operator = to put the glass wears in fine china.

Example:

var fineChina = [plates, cups, bowls, forks, spoons, knives]  
// an array with a variable fineChina

The Magic Keys

In JavaScript, there are three keys used to declare a variable. They are:

var
let
const

Quick commercial break

Before we talk about keys, it's important to note three types of scope in JavaScript. They are:

Global Scope: a variable declared outside a function is known as a global scope. Also, we can use a variable declared as a global scope within a function.
Function Scope: a variable declared within a function is known as a functional scope. These variables cannot be accessed outside of their function.
Block Scope: Any variable declared inside a block can only be accessed within that block.

Back to regular programming

var

We used var solely when declaring variables in JavaScript from 1995 to 2015. Variables declared using var can be reassigned and re-declared.

var car = "honda"
var car = "ferrari" // car is redeclared here 

console.log(car) // displays ferrari

var team = "manchester united"
    team = "arsenal" // team is reassigned a value of arsenal 

console.log(team) // arsenal is displayed here

We can also use var as a global scope and as a functional scope.

As a global scope:

var me = "caleb" // declared globally 

function displayMe(){
    console.log(me); // using global declaration in a function
}

displayMe() // displays caleb

As a function scope:

function champions (){

    var champion = "manchester city";
    console.log(champion); // retruns manchester city
}

champions() 
console.log(champion); // returns champion is undefined

Note: You should avoid using var. let and const has all you need.

let

let is the new kid in town. Let was introduced in ES6 (2015). We were introduced to block scoping with let. With let you cannot re-declare a variable

let awesome = "manchester united"
let awesome = "Arsenal"

console.log(awesome) // displays awesome has already been declared

but we can update it

let awesome = "manchester united"
     awesome = "Rashford"

console.log(awesome) // displays Rashford

As a block scope


function match (){
    let player = "Saka"
    let goal = 0
    {
        let player = "rashford";
        let goal = 6
        console.log(`${player} scored ${goal}`) // block scope displays rashford scored six   
    }

    console.log(`${player} scored ${goal}`) // displays saka scored 0 as no access to variables declared within a block
}

match();

note: You cannot redeclare a variable within the same block when using let.

const

I refer to const as a constant as values are immutable. This means we cannot reassign values with the assignment operator (=). We should use const when we know the value of our variable would not change. If it is an object, then properties can be updated.


const bank = "chase";
bank = "monzo";

console.log(bank) // displays a typeerror "assignment to constant variable"

updating a value within an object

const pancake = {
    texture: "fluffy",
    flavor: "blueberries",
    sugar: true, 
    honey: false,
    eggs: 6
}

pancake.honey = true;

console.log(pancake.honey); // returns honey as true

updating within an array

const ages = [20,45,65,72]

ages[1]=33

console.log(ages[1]) // displays 33

const shares some similarities with let in the sense that declarations can only be accessed within the block they are declared in. You should use const when dealing mostly with Arrays, Objects, and Functions.

I found this picture on Pinterest and it should aid with remembering when next you're unsure.

Annndddddd Sceneeee. I hope this article helps you when you're confused about what keys to use when next you're declaring your variables.

Thank you for staying with me, see you next time.

Three Sisters [var, let, const]

Table of contents

What are variables, and why do we need to declare them?

The Magic Keys

var

let

const