Variables in Javascript

Hello, fellow members of the dev community! I hope you’re all doing well. After reading this fantastic blog, I trust you’re feeling inspired and excited. Let’s delve into one of the fundamental concepts: “Variables.” Even if you’re already familiar with this from your studies in the 11th or 12th standards, diving into programming makes it a whole new ball game. However, fear not, as there’s not much difference. Let’s begin by understanding the definition before we explore its depths in detail. Please note that I’ll strive for grammatical correctness throughout this discussion.

Definition:- Variables, it just like a container where we store values, so how easy is it right? but really this is easy here I attached one picture that clears all your doubts.

Certainly! In JavaScript, `var` used to be the only variable declaration keyword. However, after 2015, two more variable declarations, `let` and `const`, were introduced. The reason for this addition was that `var` variables tended to create global pollution issues, which these newer declarations aimed to mitigate. so now let us see it in the depth of,

but before reading I am just saying something about global scope or block scope otherwise you all be confused,

let a=10; //global scope
{
let b=12;
//in block scope
}

Var:- There is no special definition I can share with you but some coding logics define this well, like scoping or hosting let’s see,

var a;
console.log(a);
// output will be `undefined`

//and we can initialize value after value, after the declaration

a="10";
console.log(a)
// output will be after the initialized value is 10 

so this is easy, I know but now I give you another example,

var a="10";
var a=5;
console.log(a)

//Output will be 5

In JavaScript, when you use var to declare a variable multiple times within the same scope, it doesn't create a new variable; instead, it reassigns the existing variable with the new value. This behavior is known as variable hoisting and redeclaration.

So, when you declare var a = 10; and then var a = "5"; in the same scope, it doesn't create a new variable. The second declaration of a reassigns the value of the existing variable a from 10 to "5". The previous value 10 is effectively overwritten or changed to "5".

As a result, the variable a no longer holds the value 10; it now holds the value "5". The first value (10) is not accessible or stored anywhere as the variable a is now referencing the new value ("5").

Here I take another example that really clears your all doubts. now someone says if we do this with a block scoping so is it able to change the global declaration value?

var a=5;
{
    var a="10";
    console.log(a)
}
 console.log(a)

// output will be "10" or "10" how cool it is 

Here’s what happens:

1. Initially, a global variable `a` is declared and assigned the value `5`.

2. Within a block (enclosed in curly braces), another `var a` declaration is made and assigned the string value `”10"`.

3. Inside the block, `console.log(a);` outputs `”10"`, which is the value of `a` within that block scope.

4. Outside the block, `console.log(a);` still outputs `”10"` because the block-scoped `a` is actually referring to the same global `a`, due to the way `var` handles variable declarations. The redeclaration of `a` within the block affects the global scope as well.

This behavior occurs because in JavaScript, variables declared with `var` are not block-scoped, unlike `let` or `const`. So, the redeclaration of `var a` inside the block affects the global scope, changing the value of the global `a` from `5` to `”10"`. As a result, both `console.log(a);` statements output `”10"`.

so this is one problem, that is faced by the dev community in using var variable, and that’s why they introduced ‘let’ and const so let’s see,

let a;
console.log(a)
a=10;
console.log(a)
//output will be `undefined' and 10 

so this is the same as var, now I just try to declare the same name of the variable two times in let, let’s see what happens,

let a=10;
let a=12;
console.log(a)
//It's through syntax error,

Attempting to run this code will throw an error like SyntaxError: Identifier 'a' has already been declared.

Get Palak Gupta’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

This happens because with let, redeclaring the same variable in the same scope is not allowed. Each variable name declared with let must be unique within the same block, function, or global scope.

so let’s see another example, can we block scope value to affect the global value,i know you all are so excited about it,

let a=10;
console.log(a,"call in global scope");
{
a=12;
console.log(a,"Bloack scope")
}
console.log(a,"in final call");
// output will be 

//10 call in global scope
//12 Bloack scope
//12 in final call

1. `let a = 10;` declares a variable `a` in the global scope and initializes it with the value `10`.
2. `console.log(a, “call in global scope”);` prints the value of `a` (which is `10`) along with the string “call in global scope”.
3. Inside the block `{}`, `a = 12;` attempts to assign the value `12` to the variable `a`. However, note that there’s no `let`, so it tries to modify the existing `a` from the outer scope, as there’s no new declaration of `a` in the block.
4. `console.log(a, “Block scope”);` prints the value of `a` (which is `12` at this point) along with the string “Block scope”.
5. After the block, `console.log(a, “in final call”);` prints the value of `a` in the global scope (which is also `12` now) along with the string “in final call”.

Keep in mind that when you don’t use `let`, `const`, or `var` to declare a new variable (`a` in this case) inside a block, it attempts to modify the existing variable from the outer scope instead of creating a new one, affecting its value globally as well as within the block scope.

so how can we avoid this problem we can do this

let a=10;
console.log(a,"call in gloabal scope")
{
let a=12;
console.log(a,"call in bloack scope")
}
console.log(a,"final call")

//output 
//10 call in gloabal scope
//12 call in bloack scope
//10 final call

because when we declare the same name variable in block scope it creates another `a` in memory that’s why it is not affecting our global ‘a’.

so now the question is why what is need of const because I give you one example of why we use it,

let a=10;
{
a=12;
console.log(a,"in bloack scope call")
}
console.log(a,"Final call");
// output will be
//12 in block scope
//12 in final call

this is a problem because a declaration with let it is affects our global declared value, and sometimes in programming, we don’t want to change it so that’s why we are using const,

const:- after declaring a one-time variable in const we can’t change it in block scope as well as global scope, so how is cool it, let’s see can we do this what am I trying to do here,

const a;
console.log(a)

This code will throw an error because const requires an initial value upon declaration. If you attempt to declare a variable using const without assigning it a value, it will result in a syntax error: SyntaxError: Missing initializer in const declaration.

how can we fix it,

const a=10;
console.log(a);
//output 10

because it requires an initial assign value, now do some different can we change the value like let or var,

const a=10;
a=12;
console.log(a);
//output will be

The line a = 12; will throw an error because you're trying to reassign a new value to a constant variable a, which is not allowed.

The error message you might encounter will be something like: TypeError: Assignment to constant variable.

so let’s see another one can we change it in the block scope,

const a=10;
{
a=12;
console.log(a,"bloack scope call");
}
console.log(a,"global scope call");

it’s through the same error guys we can’t change it with block scope as well as global scope,

so guys this is from my side what’s from your side, don’t be stressed here I am to help you but I also need some motivation so pls like the post and follow me you can also follow me on my different social media accounts, i give you link,

Linkedin Profile:-https://www.linkedin.com/in/palak-gupta-40214a21b/

Github Profile:- https://github.com/Palakgupta2002

codepen Profile :- https://codepen.io/Shanvi-Gupta