Variable Declaration: var vs let vs const

In JavaScript and after the release of ES6 we have three ways to declare variables in JavaScript. These are var, let and const. Each of them have different scopes and different properties. It is worth the time and effort to understand the differences between these keywords.

1. Var

Using var has been the traditional approach of declaring a variable. Before ES6 var was the only way to declare variable. Variables declared with var are function scoped. That means, we can access the variable only inside the function. If a variable is created inside a block scope which is inside a function, then also we can access the variable outside the block scope, but only inside the function. Variable declared with var are attached to the global namespace and are part of the window object. Consider the below code

function counter(i){
    if(true){
        var innerVariable = 6;
    }
    console.log(innerVariable) // logs 6
    return i++;
}
counter();
console.log(innerVariable) // Error

Here we have a function called counter. Inside this counter we create a block scoped variable called inner. Inside the function the code has access to the inner variable both inside and outside of the block. But outside of the function, the variable is not accessible. Hence var is a function scoped variable.

2. Let

Let is an new edition to the ES6 syntax. With let we can create block scoped variable. Any variable declared with let can only be accessible only within the current block. See the code below.

function counter(i){
    let result = i++;
    if(true){
        let innerResult= result + 10;
        console.log(innerResult) // prints innerResult
    }
    console.log(result) // prints the result
    console.log(innerResult) // Error.
}

counter(8)
console.log(result); // Error
console.log(innerResult);

We have created a function called counter. Inside it we created a let variable called result. This result is accessible throughout the function. Inside this we have created a block scope using the if condition. Inside the block we have created another let variable called innerResult. This inner result is accessible only inside the block and not outside the block, When we try to console log the result and inner Result we get error for the inner result outside the block. Hence, let is a block scoped variable. Also the variable created with let are not attached to the window object, unlike variables with var. This keeps the global scope clean and pollution free.

3. Const

Const shares similar properties with let. Just like let, const was also introduced with ES6 and provides one more tool to the JavaScript tool armory. With const we can create values that cannot be changed though out the run-time of the JavaScript code. The const values must be initialized when declared, other wise it will throw error. See the code below.

const PI = 3.14
let radius = 7;
let area = PI * radius * radius;

PI = 3.10 // Error -> Mathematics does not allow that neither does javascript 🙂

const COUNTER;
COUNTER = 10; // Error -> Missing initialization in const declaration.

We have created a constant called PI with const keyword and initialize it with 3.14 and we can use it in out code. However we cannot assign another value to it. Similarly when creating a const we must initialize the value other wise it will throw error.

However be aware that when storing objects or arrays in constants, you are just storing the reference to that object. So with const you cannot change the reference to the object but you can change the object as such. See the code below.

const EMPLOYEE_SALARY_IN_THOUSANDS = [30, 60, 80, 56];
EMPLOYEE_SALARY_IN_THOUSANDS.push(77); // valid
EMPLOYEE_SALARY_IN_THOUSANDS = [ 30, 60, 80, 56 , 77] // Error

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: