Write JavaScript Variables Like a Pro

What is a Variable?

A variable is simply the name of a storage location. Picture your computer's memory as your storeroom, where each item is carefully placed in a specific spot. When you need something, you go to that spot and retrieve what you need.

In the same way, your computer's memory operates, with numerous storage locations to store a user's data. When a user inputs data into memory, they need a placeholder or container to hold that data. Variables serve as those containers.

Variable in JavaScript

• In JavaScript, a variable acts as a container for storing user data.

• JavaScript provides three keywords for variable declaration and initialization: var, let, and const.

• 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.

• Multiple variables can be declared 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 MyObj = { key: 'value' };        //Variable with an object.
let x = 10, y = 'str', z = [1, 2, 3];  //Three variables in a statement.

JavaScript Variable Nomenclature

When declaring a JavaScript variable (also known as an identifier), certain rules must be followed:

1. The name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.

2. After the first letter, we can use digits (0 to 9), for example, value1.

3. 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 whereas var has global scope.

• Variables with a var keyword can be redeclared anywhere in the program while redeclaring a variable inside the same scope is restricted with let & 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, while let & 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.