This article we are going to learn about what is Variables, how to use them and what is the difference between var, let and const in javascript.
What is Variables
Before learning about variables, you need to understand what data is and how we use data in programming languages. Data is basically a piece of information we use in our computer program. For example your Twitter profile name is a data.
Mostly programming is for manipulating and displaying data. For handling data, programmers need a way to temporarily store data in runtime. Let’s understand this with an example.
First we need a tool to run the program. We can use the google chrome dev tool. Shortcut for Windows Ctrl + Shift + J, for Mac Cmd + Option + J.
Now let’s think of a number or any piece of data to the console. When you click Enter you will get the same number returned. Now what if we need to refer to this number again in this program?
That’s where Variables come in. We can store this piece of data into a variable and when we need this data, we can simply call the Variables name to access the data.
Variables in JavaScript
For understanding easily, think about variables as labels for our values. It’s like having a container full of oranges and there is a label on the container named orange. In this example Variable name orange which is pointed to the value oranges init.
Let’s declare a Variable dog and assign my dog name jimmy. For this we are using var keywords. For assigning the value to a variable we will use assignment operator (the equal sign).
var dog = ‘jimmy’;
Variables are how programmers use to store some piece of data in their project, so they can reuse or modify it. We can store any data type of JavaScript in Variables.
Now that we have assigned the value jimmy into the dog variable. We can access The value throughout the programme. When you type variable name dog in the console, you will get the value jimmy as return value.
Use Var Keyword in JavaScript
Keywords in JavaScript are some reserved words, which already have some meaning defined by JavaScript. Var is a keyword which is for declaring Variables.
By using the Var keyword, it’s not required to assign the value when declaring a variable. We can reassign the value later. Let’s see how to do this.
var dog;
dog = ‘jimmy’
//Or
var dog = ‘jimmy’;
//We can replace like this
dog = ‘Tommy’;
Now when you try to console the variable dog, now you will get the value ‘Tommy’ in return. The value of the variable will change in the order you write.
When you use var keyword you can declare the same variable again in your programme.
var dog = ‘jenny’;
Now you will get the value ‘jenny’.
When JavaScript was created the only way to declare a variable is using var keyword. In the recent updates of JavaScript (ECMAScript2015) introduced const and let. Before learning about const and let, you should understand what scope is.
What is Scope?
Scope is simply what it says. When you declare a variable, there are some restrictions on where you can access these variables from. If you declare the variable inside a function, then you can not access the variable from outside of the function.
var age = 20;
function myAge () {
console.log(age);
}
myAge();
In this code first we declared a variable called age and assigned a number 20. After that, we declared a function myAge and inside it we console the variable age. Then we call myAge function. When you run this, you will get 20 In your console.
When we declare a variable with var keyword outside of a function, this variable is globally scoped. So we can use this anywhere in your code, even inside a function.
Now let’s create a function-scoped variable, which means we will declare a variable inside a function and we can access that variable only from inside the function.
function myAge () {
var age = 20;
console.log(age)
}
myAge()
console.log(age);
//Result:
//20
//age is not defined
Let’s understand why we get 20 and ‘age is not defined’. When we run the above code, first will execute the function myAge, it will print 20 in the console. After calling the function, we are trying to print the age variable which is declared inside the function. Because the scope of the variable age is only inside the function, we get the error ‘age is not Defined’.
Now that you understand what is scope, now let’s discuss what is the problem with using var keyword in JavaScript.
Var Keyword Problem in JavaScript
Let’s learn this with another example. Now we will create a variable age and we will double the age if age exists.
var age = 20;
if (age) {
var doubleAge = age + age;
console.log(doubleAge);
}
Now you will get 40 in the console.
The variable doubleAge is a global variable, you can access it by entering in console
doubleAge
40
As we discussed before the var keyword declared a globally scoped variable, if we declared the doubleAge variable inside a function then it will be function scoped. Since we declared this variable not in a function, it’s available everywhere in our code. The issue we will face here is the variable doubleAge will be used only inside the if condition and we don’t need it outside the block. Since it’s available everywhere causing a ‘Leak’ in our programme.
Let’s understand what is blocked.
var age = 20;
if (age) {
// inside the block means, inside this opening and closing braces
var doubleAge = age + age;
console.log(doubleAge);
}
console.log(doubleAge);
// we are able access the doubleAge variable outside the block.
In the recent update of JavaScript introduced const and let as a solution for this problem.
Const Keyword in JavaScript
The keyword const is similar to var but with few big differences.
const is a block scoped But var is function scoped. Now lets try the same code with const keyword.
const age = 20;
if (age) {
const doubleAge = age + age;
}
console.log(doubleAge);
Now when you try to execute this you will get the error ‘doubleAge is not defined’. It’s because we declared the doubleAge using const keyword and also inside the if condition block. We can not access it from outside of the block.
Now our previous problem is solved. The variable doubleAge “leaking” to global scope is now fixed. Now let’s check how the const work inside a function.
function printX () {
const a = 5;
return a;
}
printX();
When we run this code we will get the value of ‘a’. But while accessing it from outside of the function, you will get the error “x is not defined”. It’s because the function is also considered as a block, so you can not access the ‘x’ variable.
We can not declare the variable two times using const. Once it’s declared you can’t change the value, because the variables which are declared using const will be constant and cannot be changed.
const b = 10;
const b = 20;
When you run this code you will get an error, “Identifier ‘x’ has already been declared”.
Also you cannot change the value of it.
const c = 10;
c = 20;
In this you will see “Error: Assignment to constant variable”.
Let Keyword in JavaScript
Let keyword is almost similar to const but there is one difference. You can change the value of the variables which are declared with let. Let’s understand with an example.
let isPass = false;
const mark = 60;
if (mark > 50) {
IsPass = true
}
Here we are able to change the value of isPass variable to true.
Thank you for reading!
In this article we have covered what is variable, var keyword, variable scope, what is block, const and let keywords. Hope you enjoyed reading this article.
