Variables In JavaScript
● There is No need to mensioned Datatype on variable declaration, JS auto detect it.
● The thing we have to focus on is the keyword to define variable.
● There are Three Keywords used to define Variable.
Var, Let, Const
● var used for defining Reassignable and Redeclare variable.
● Let used for Reassignable variable but Not allow to Redeclare.
● Const used for constant variable also Not allow to Redeclare.
Let's Declare and Assign Variable.
var name = "Urvish";
let age = 20;
const country = "India";
Here is example of Let, Var and Const.
// var => Reassignable✅, Redeclare✅, Undefined✅
var name ; // Declaration
console.log("After Declaration: "+name);
name = "Urvish"; // Assigning value
console.log("After Assigning value: "+name);
name = "IronMan"; // Reassign value
console.log("After Reassign value: "+name);
var name = "Deadpool"; // Re-Declaration
console.log("After Redeclaration: "+name);
// Check Console by F12 or Right Click and check Inspect and then Console
After Declaration: // Empty on first load, and take latest value on reload : Deadpool
After Assigning value: Urvish
After Reassign value: IronMan
After Redeclaration: Deadpool
Assigned Value is Changed. This is not so good Approch to define variable.
// Let => Reassignable✅, Redeclare❌, Undefined✅
let age ; // Declaration
console.log("After Declaration: "+age);
age = 20; // Assigning value
console.log("After Assigning value: "+age);
age = 25; // Reassign value
console.log("After Reassign value: "+age);
let age = 27; // Redeclaration
console.log("After Redeclaration: "+age);
// Check Console by F12 or Right Click and check Inspect and then Console
After Declaration: undefined // No value assigned
After Assigning value: 20
After Reassign: 25
/* Error while Redeclaration of existing variable */
⊗ Uncaught SyntaxError: Identifier 'age' has already been declared
Assigned Value is Changed. But can Not Redeclared. Best Approch to define variable.
// Const => Reassignable❌, Redeclare❌, Undefined❌
const city ; // Can't declare without assigning value
const country = "India"; // Declaration + Assigning value
console.log("After Assigning value: "+country);
country = "America"; // Reassign value
console.log("After Reassign value: "+country);
const country = "Canada"; // Redeclaration
console.log("After Redeclaration: "+country);
// Check Console by F12 or Right Click and check Inspect and then Console
/* Const can not be undefined */
⊗ Uncaught SyntaxError: Missing initializer in const declaration
After Assigning value: India
/* Error while Reassigning and Redeclaration of existing variable */
⊗ Uncaught TypeError: Assignment to constant variable.
⊗ Uncaught SyntaxError: Identifier 'age' has already been declared
Assigned Value is Not Changed. Also Not Redeclarable. Good Approch to define Constant variable.
In JS, We can Assign almost anything.
let num = 42; // number
let str = "Hello"; // string
let bool = true; // boolean
let nothing = null; // null
let undef = undefined; // undefined
let big = 12345678901234567890n; // BigInt
let unique = Symbol("id"); // Symbol
let obj = { name: "Alice", age: 30 }; // Object
let arr = [1, 2, 3]; // Array
let func = function() { return "Hi"; }; // Function
let arrow = () => "Hello"; // Arrow Function
let date = new Date(); // Date object
let regex = /abc/i; // RegExp
let sum = 5 + 3; // Store 7
let result = anotherVar || "default"; // if anotherVar not true or available consider default
let x = y; // Assign value of Y to X
let output = calculateResult();
JavaScript Var and Let Keyword Allow to Assign any type of value to existing variable.
let x = 5;
x = "Now I’m a string"; // totally allowed
x = true; // Now its Boolean
x = null; // its not empty, Assigned as Null
x = undefined; // Now its Empty, nothing stored
There is Predefined scopes for accessing variable Its kind of Range.
● var is function-scoped
● let and const are block-scoped
In simple word, Var allow to access variable anywhere globally except few block of function.
and Let and Const are secured which only accesible in block of code.
{
var a = 10;
let b = 20;
}
console.log("accessing var a : " + a); // 10
console.log("accessing let b : " + b); // ❌ Error
// Check Console by F12 or Right Click and check Inspect and then Console
/* Var allow to access defined variable globally. */
accessing var a : 10
⊗ Uncaught ReferenceError: b is not defined
/* Error while accessing let, its not allow to access outside of block */
Hoisting is JavaScript's behavior of moving declarations to the top of the current scope.
In simple word,
JavaScript registers variable and function declarations during the compilation phase.
It assigned values during the execution phase (not at compile time).
var name ; // only Declared -> Register as name to assign value latter
let age ; // only Declared -> Register as age to assign value latter
var country ; // only Declared -> Register as country to assign value latter
When we calls functions or variables first in execution before Assigning values to it.
It allow to access it. This whole senario called hoisting.
/* Calling variable and Function before declaring it.
but it already Registered in memory without value in compilation phase. */
console.log("petName: " + petName); // calling var petName;
sayHello(); // calling sayhello() function
var petName = "Vodaphone" ;
function sayHello(){
console.log("hehe, Hello!!");
}
petName: undefined // console.log(petName); no value assigned in compilation phase
hehe, Hello!! // sayHello();
Variables and functions can be used before they are declared.
but it Depends on keyword: var, let, const, or function.
In case of let and const
console.log(whoAmI); // calling let whoAmI;
console.log(whoIsShe); // calling const whoAmShe;
let whoAmI = "Vision";
const whoIsShe = "Wonda";
⊗ Uncaught ReferenceError: Cannot access 'whoAmI' before initialization
⊗ Uncaught ReferenceError: Cannot access 'whoIsShe' before initialization
Bad luck, Its gonna be happen because Let and const are secure to use.
Where var can cause hoisting confusion, leads to hard for debugging and finding error.