var vs let & const

ES6 has been around for a while now, and brought with it a lot of cool changes for JavaScript. One of those changes is how we
declare variables. We now have three options: var, let and const. This post is going to attempt to explain them in a simple and hopefully helpful way. Let’s start.

var

Before ES6 we used the var keyword. A variable declared with var can be initialized immediately but doesn’t need to be. Lets take a look at an example:

var superhero = 'Batman'; // we initialized the variable immediately
var villain;
if(superhero === 'Batman'){
villain = 'The Joker'; // we initialized the variable later
}

With var the variable is declared on either the global scope or within function scope. For example:

var name = 'Bob';
function getName(){
var name = 'Bill';
return name;
}
console.log(getName()); //logs Bill
console.log(name); //logs Bob

In the example above ‘Bob’ is declared on the global scope but even though we are using the same variable name, ‘Bill’ is declared on the function scope
and so logging name will result in ‘Bob’ while logging getName() will result in ‘Bill’.

let

ES6 gave us the let keyword. let works similarly to var, variables can be either immediately initialized or not. With let we get block level declaration scope. Let’s take a look at an example:

function varScoped(){
var num = 1;
if(num === 1){
var num = 2;
console.log('I am within function scope',num); //logs 2
}
console.log('I am within function scope too',num); //logs 2
}
function letScoped(){
let num = 1;
if(num === 1){
let num = 2;
console.log('I am within block scope',num); //logs 2
}
console.log('I am within function scope',num); //logs 1
}

In the first function above we are declaring our variable with var, so as discussed earlier variables will be at function scope. Even though it might seem like we are re-declaring num in the if block, we are overriding our previous declaration and so num logs as 2 both inside and outside the if block.

In the second function we are declaring with let, because let gives us block level scope our num variable within the if block is on a different scope to the num variable outside it, they don’t interfere with each other and so num logs as 2 inside the if block and retains it’s value of 1 outside the if block.

const

Last but not least we have const. Unlike var or let a const needs a value assigned to it on declaration.

So we cannot do this:

const num;
num = 5;

We need to do this:

const num = 5;
Declaring a variable with const means this value will not change and cannot be reassigned within that block scope. Let’s look at an example:

function constScopedA(){
const num = 5;
if(num === 5){
num += 1; // this will throw an error: Uncaught TypeError: Assignment to constant variable.
}
}

In the above example an error is thrown when we try to reassign the variable num. The variable identifier cannot be reassigned.

However as const, like let, is also block scoped, we can do this:

function constScopedB(){
const num = 5;
if(num === 5){
const num = 6;
console.log(num); //log 6
}
console.log(num); //log 5
}

The num variable within the if block is on a different scope to the num variable within the function and so we get no error here. We have two different num constants on two different scopes.

An important note about const is that you can change a const value but not the reference. So for instance if you declare an object as a const you can change the objects contents. So for example:

function constObject(){
const person = {name: 'Bob'};
person.name = 'Bill';
console.log(person.name); //logs Bill
}

In the above example we can update the name property of person even though person is a constant, const variables are not immutable. However we cannot create a new reference to person.

function constObject(){
const person = {name: 'Bob'};
const person = {name: 'Bill'};
console.log(person.name); //throws error Identifier 'person' has already been declared
}

The function above will throw a syntax error because we already declared a constant called person.

So that’s it, a basic summary of variable declaration with JavaScript and ES6. I hope you found it helpful :)

This post was migrated from my medium account: https://medium.com/@sarbot/declaring-variables-with-javascript-es6-ab71c0a60768