javascript
Categories:

JavaScript variables: a look at let, const, and var

With the old JavaScript, we had only one way to declare a variable, and that was with var, like var x = 10. It will create a variable called x and assign a value 10 to it. Now with modern ES6 JavaScript, we have 3 different ways to declare a variable: letconst and var. In this article we learn about multiple ways of declaring JavaScript variables and the differences among them. We will talk about let & const later. For now, let’s focus on var.

var

We already know how to declare a variable with var and it’s the oldest method of declaring JavaScript variables. Let us now refer to some code to understand var properly.

var x = 20;
function foo() {
    var y = 10;
    console.log(x);
    console.log(y);
}
foo(); // will print 20 and 10
console.log(x); // will print 20
console.log(y); // will throw a reference error

Those who are familiar with C or C++ might understand why the output is like so. This is because x is in global scope and y is in the function foo’s scope. As function foo has access to the global scope, from the inside of the function we can access both x and y. Printing x also goes fine because as x is in global scope, we can access it from everywhere. Things go wrong when we try to access y from the global scope because y is limited to the function scope only.

Similar to C or C++ right? No. Let’s see why not.

var x = 20;
function foo() {
    var y = 10;
    {
        var z = 30;
    }
    console.log(x);
    console.log(y);
    console.log(z);
}
foo();

What do you think the output of the code will be? If you think that there will be a reference error at the line console.log(z), then you are correct from a C or C++ point of view. But with JavaScript, that’s not the case. The above code will print 20 10 30.

This is because in JavaScript with var, unlike in C and C++, we don’t have any block level scope. We have only global and function level scope. So z falls under function foo’s scope.

Now we have one more example:

var x = 20;
var x = 30;
console.log(x); // this will print 30

In C or C++ if we declare a variable more than once in the same scope we get an error. But that’s not the case with var in JavaScript. In the above example, it just redefines x and assigns a value of 30.

Let’s consider the below code snippets:

function foo() {
    x = 20;
    console.log(x);
}
foo();
console.log(x);

The above code will print 20 20. So what happens here? If you declare a variable anywhere without the var keyword it becomes a part of the global scope. It is accessible from both inside and outside of foo.

'use strict'
function foo() {
    x = 20;
    console.log(x);
}
foo();
console.log(x);

In the above code, we are using strict mode. In strict mode, an x = 20 kind of declaration is not allowed. It will throw a reference error. You have to declare a variable using varlet or const.

let

Now it’s time to have a look at let which is a new way of declaring JavaScript variables. let is basically the new var in ES6 but with some differences.

let x = 20;
function foo() {
    let y = 10;
    {
        let z = 30;
    }
    console.log(x);
    console.log(y);
    console.log(z);
}
foo();

Remember that in JavaScript, var doesn’t have any block-level scope? Now block level scopes are back with let. If you execute the above code you will get a reference error at the line console.log(z). The variable z declared with let is now in a different block-level scope and is not accessible outside of this scope.

let x = 10;
let x = 20; // will throw an error

Re-declaration of variables with let is not allowed.

var x = 10;
let y = 20;
console.log(window.x); // 10
console.log(window.y); // undefined

Global variables declared globally with var are added to the global object, the window in case of browsers. Variables declared globally with let are not added to window (global object). Though they are accessible globally, it’s like it’s there but you can’t see it.

console.log(x); //undefined
console.log(y); //reference error
var x;
let y;

Unlike varlet variables are not initialized with undefined before their definitions are evaluated. If you try to access the variable before that you will encounter a reference error. This is also known as the temporal dead zone. In simple words, hoisting is only available with var, not with let & const.

const

const stands for constant, it is very similar to let. Both let and const were introduced in ES6 as a new way of declaring JavaScript variables. The only differences between let and const is it’s value cannot be changed and it needs to be initialized where you are declaring it.

const x = 20;
console.log(x); // will print 20
x = 30 // will throw an error

It’s not that in the case of const objects you can change the property of that object — it’s just that you can’t reassign a const variable.

const obj = {firstName: "James", lastName: "Bond"}
console.log(obj); // will print the obj object
obj.firstName = "Ruskin";
console.log(obj); // will print the obj object, it has new firstName
obj = {firstName: "James", lastName: "Bond"}; // will throw an error

Also as mentioned earlier you have to initialize a const variable, you can’t keep it uninitialized.

const x; // will throw an error
some other code;

That’s all for this article — see you later!

You can also connect with me over LinkedIn.

This was originally published in my Medium freeCodeCamp publication

Thank you for reading 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *