Write JavaScript Variables Like a Pro

Write JavaScript Variables Like a Pro

A brief discussion about JS variables & their scope

Jan 9, 2023·

4 min read

Play this article

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, or const 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).

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


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

Did you find this article valuable?

Support ZordCoder by becoming a sponsor. Any amount is appreciated!