Var, Let and Const

Before understanding var, let and const we have to understand something known as scope.

What is scope ?

Scope is a certain region of program where a defined variable can be recognised and beyond that it can’t be recognised.

There are various scopes

1. Global scope: Variables defined globally so that it can be accessible any where in the program.

2. Block scope: Variables defined inside a block (with let or const), accessible only within that block.

3. Function Scope: Variables defined within a function, accessible only inside that function.

4. Lexical scope: Inner functions can access variables from their parent functions due to where they are defined in the code. (We will discuss this in detail later )

As of now we have read variable are defined in different scopes but the question is how to define variables ?

In javascript we can define the variables using var, let and const keyword

When we define the variable using var keyword then that is accesible thought the program.

var name = "Alex"
console.log(name) // it will print "Alex"

{
  console.log(name) // it will also print "Alex" this means we can access the variable declared with var inside the block as well
}
// what if we first declare the variable inside the block 
// using var keyword and access it outside the block

{
 var age = 14
}
age = 14
console.log(age) // it will print the age 14 

{
var rollNo=  27
}

rollNo=21

console.log(rollNo) //it will print 21

As you have seen in the code how the variable is decalred using var keyword and how can we change the value of it

Now let’s see how we can define the variable using let keyword

{
let name = "Kunal"
console.log(name) // it will print "Kunal"
}

console.log(name) // ReferenceError: name is not define

so now what can you do to access the name variable outside the block ?

let name = "Kunal"

{
let name = "Raj"
console.log(name) // This will print "Raj"
}

console.log(name) // This will print "Kunal" because kunal is defined globally now

What if you want to re-assign the variable ? let’s look into it with the help of an example.

let name = "Kunal"

{
name = "raj"
console.log(name) // it will print "raj"
}

console.log(name) // it will print "raj"

I have taken a variable name assigned with value “Kunal“ and inside the block “{}” I have re-assigned it with new value “raj“

we are able to re-assign this because we have decalerd it globally and thats why it accessible inside the block too.

Now let’s try yourself and determine the output

let name = "Kunal"
{
name = "raj"
console.log(name)
}
console.log(name)

Now let’s into how we can declare the variable using const keyword
When declare the variable using const keyword it can’t be re-assigned

const name = "Kunal"

{
name = "raj"
console.log(name)
}

console.log(name)
// This will through the error 
// TypeError: Assignment to constant variable.

But there is a catch what if I assign array / object with const keyword

const arr = []
arr.push(1)
console.log(arr) // this will print [1]

but how is it possible why it is not showing any error ?

Using const with arrays in JavaScript means you cannot reassign the variable to a different array (e.g., arr = [4, 5] would cause an error), but you can still modify the array's content (e.g., adding, removing, or changing elements).

Same is case with objects you can assign the object with const keyword but you will be able to modify the value of that object but can’t re-assign that to another thing

for example

const obj = {}
obj=1
console.log(obj)

// this will through the error 
//TypeError: Assignment to constant variable.

but you can modify the value of “obj“ try it out on your own

This was all about var, let and const

Prior to ES6 in javascript there was var keyword available to decalre variables but the with the ES6 let and const are introduced.