Var, const, & let are keywords used to declare variables in javascript, variables are a fundamental concept in the programming language, variables are what programmers use to name a value so as to reuse, update and simply keep track of the value. they can be used to store any javascript type,
Example:
//To refer to the value 10//
var age = 10
Now if you run
console.log(age) you’ll get the output of 10.
The var keyword in javascript
Keywords are reserved words In javascript when you use the var keyword, you are telling javascript you'll be declaring a variable. when you use the var keyword, variables can be reassigned.
Example:
var name = "Ridwan"
Now, we'll reassign this variable to a different name
var name = "Fawas"
Now if you run
console.log(age) you’ll get the output of Fawas.
When JavaScript was first created, the only way to declare a variable was with the var keyword.
In recent updates to JavaScript (ECMAScript2015), const and let were created as other keywords to declare variables.
To explain why they were needed, we’ll look at problems with the var keyword. In order to look at these problems, we’ll learn about what scope is.
What is scope?
Scope refers to where in our code variables are available for use. When a variable is globally scoped, that means it is available anywhere in your program. Example:
var name = ‘Ridwan’
function printName() {
console.log(name)
}
printName()
Here we’ve created and called a function, printName, that will print the value of the name var, Fawas. You’ll see this printed in your console.
it is globally scoped because our var was created outside of the function, this means that it is available anywhere in the code, including outside any function.
function printYear() {
var year = 2020
}
console.log(year)
Now in our console, we’ll get an error: year is not defined. This is because the var year is function-scoped. That is, it only exists inside of the function it was created in. We don’t have access to it outside of the function, which is where we’re trying to access it when we run our console.log.
Function-scoped variables are helpful to programmers because we often want to create variables that are only useful or needed inside a certain function. Creating global variables can also lead to errors or mistakes.
Now that we have a basic understanding of scope, we can return to our discussion of problems with the var keyword.
Problems with the var keyword in JavaScript
This is a simplified example, but we’ll first check if age has a value because we want to make sure we are adding to a valid value.
var age = 27
If (age) {
var doubleAge = age + age
console.log("Double your current age is ${yearPlusTwenty}")
}
Now in our console, you’ll see Double your current age is 47.
Our variable, doubleAge, is now a global variable. If you enter doubleAge into your console, you’ll see that you have access to it.
doubleAge
47
As previously discussed, variables created with the var keyword are function-scoped. Function-scoped variables only exist inside of the function they were created in.
But since the doubleAge variable is not inside a function, that means it has been scoped globally. That is, the doubleAge variable is now available anywhere in our code.
The problem is, doubleAge is just a variable we used once inside of our if statement, and we don’t necessarily need it available everywhere in our code. It has “leaked” outside of the if statement it was created in, even though we didn’t need it to.
CONST & LET were introduced in javascript to help fix this issue with the var keyword.
const keyword
const is a bit similar to var but has some differences. const is block-scoped, whereas var is function-scoped. Block simply means any space between an opening & closing bracket, this is a bit confusing, right? let's try out the previous example using const instead.
var age = 27
if (age) {
const doubleAge = age + age
console.log(`Double your current age is ${yearPlusTwenty}`)
}
The above code will result in an error if you type doubleAge into your console because doubleAge is not defined. this is because const is block-scoped, so it's only available in the block it was defined.
The doubleAge variable is 'trapped' inside the two curly brackets it was defined in. Code that is also inside those brackets can access doubleAge. but any code outside of the bracket can't.
Using the const instead of var, the previous problem is fixed. Our doubleAge var is no longer “leaking” into our global scope unnecessarily. Instead, it only exists inside of the block it was created in.
Block-scoped variable works within the context of the function. Example:
function returnX() {
const x = 1
return x
}
returnX()
if you call this function "returnX", it will return the value of x which is 1. If we next type in x, we'll get an error "x is not defined because functions are also considered blocks. so const x will exist only within the function, const can only be declared once.
const y = 1
const y = 2
An error would occur saying "y has already been declared", This is the difference between VAR & CONST. while const will give an error letting you know you have declared this variable var won't.
This is a strength of the const keyword that was introduced as an updated and better way of creating variables in javascript. however what if we need to update our variable?
Let's declare a variable, adult, and set it to false, we'll create an age variable and set it to 20.
const adult = false
const age = 20
If we want to check a user’s age and set our adult variable to false if age is over 18. We can write an if statement to do this.
if (age > 18) {
adult = true
}
an error will occur because, in accordance with the rules of const, we cannot this variable which has been pointing to the value of true, so it cant point to something else.
so if we print out adult again, we can see that it has stayed the same and still holds the value of false.
we cannot reassign the age variable. so const is working as expected, however, if we need to reassign this variable, that is where the LET keyword is needed and useful.
let keyword
Let, similar to const is block-scoped. if you replace const with let in the above doubleAge example, it would work the same but let differs from const in a fundamental way. variables declared with the let keyword can be redeclared. Example:
let adult = false
const age = 20
if (age > 18) {
adult = true
}
now if we type out "adult" instead of getting an error like when we used const, we will get an output of true.
By using the let keyword we have updated our variable to point to the value of true as we wanted to. so if we need to update our variable depending on certain data we receive. we can use LET to do this.
IN CONCLUSION: Variables can be declared using VAR, CONST or LET, VAR is function-scoped, while CONST & LET are block-scoped, CONST variables cannot be reassigned, while LET variables can be.