Write JavaScript Variables Like a Pro
A brief discussion about JS variables & their scope
What is a Variable?
A variable is simply the name of the storage location. Assume your computer memory as your storeroom, where you have placed each thing in a particular place. So when you require anything you go there and collect what you require.
So your computer memory also works in the same way, which has n numbers of storage to store user's data. When the user pushes some data into memory user requires a placeholder or container that can hold the data. Variables are that container.
Variable in JavaScript
In JavaScript, variables are the container for storing user data.
In JavaScript, variables can be declared and initialized using
var
,let
, orconst
keywords.JS is a loosely Typed language, so you are not required to mention the data type of the passed data, JavaScript will automatically type it.
In JavaScript, you can declare many variables in one statement.
var x = 10; //Variable with a number.
let y = "hello"; //Variable with a string.
const z = [1, 2, 3]; //Variable with an array.
const MY_OBJECT = { key: 'value' }; //Variable with an object.
let x = 10, y = 'str', z = [1, 2, 3]; //Three variables in a statement.
JavaScript Variable Nomenclature
There are some rules while declaring a JavaScript variable (also known as identifiers).
The name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
After the first letter, we can use digits (0 to 9), for example, value1.
JavaScript variables are case-sensitive, for example, x and X are different variables.
// Correct JavaScript variables
var x = 10;
var _value = "sonoo";
// Incorrect JavaScript variables
var 123=30; // JS Variable name can't be start with a digit
var *aa=320; // JS Variable name can't be start with a special-charecter.
// JS Variable name must start with a letter.
- Variable declared without any value will return
undefined
var
vs let
vs const
let
&const
are newly introduced in JavaScript in ES6.let
&const
have block scope whereasvar
has global scope.Variables with a
var
a keyword can be redeclared anywhere in the program while redeclaring a variable inside the same scope is restricted withlet
&const
.Variables with
let
keywords can be reassigned to a value inside the same block, which changes its original value.]
{
var x = 10;
var x = "Soumya" //✅✅✅ Redeclaration possible in case of var ✅✅✅
console.log(x) // print Soumya
}
--------------------------------------------------------------------------
{
let y = 5;
let y = 10; // ❌❌❌ Redeclaration not possible with var ❌❌❌
y = 10; // ✅✅✅ Reassignment Allowed in same block ✅✅✅
console.log(y) // print 10
}
- Variables with
let
keywords can be redeclared in another scope.
let y = 5;
{
let x = 24
let y = 100; // ✅✅✅ Redeclaration Allowed in different block ✅✅✅
console.log(y) // print 100
}
console.log(y) // print 5 (Global y)
console.log(x) // reference error (x is block scope here)
Reassignment of an existing
const
variable in the same scope is not allowed.Variables with keywords
var
are hoisted, whilelet
&const
go into the temporal dead zone.
Scopes in JavaScript
In JavaScript, scope refers to the accessibility or visibility of the variables. There are three types of scope, namely, global scope, function scope, and block scope.
Block Scope
Before ES6 JavaScript had only Global Scope & Local Scope. ES6 introduced two new keywords
let
&const
, which have Block Scope.A set of code inside curly braces
{}
is called a block. Block-scoped means variables declared inside a block, can't be accessed outside the scope, and the life of the variables exists inside that block only.
if(true){
let x = 10;
console.log(x); // print 10
}
console.log(x); // ReferenceError: x is not defined
// x cannot be accessed here as it is only accessible in that block only.
Function Scope
When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function. This is called Function Scope.
Global Scope
Variables that are not declared inside any function or scope belong to the global scope. In JavaScript, the whole document is the global scope and all the other functions and variables are contained in this global scope.
The variables declared inside the global scope can be accessed from anywhere inside that code.
Amazon Sale Links :
PARA TROOPER Men's Black Leather Tactical Combat Army Boot
Red Chief Casual Shoes for Men RC3508
Echo Dot (Black) Combo with Wipro 9W Smart Color Bulb - Smart Home Starter Kit