create variables in JavaScript

The blog describes the creation of JavaScript variables . The variables in JavaScript are like containers which helps in sorting the data values. 

How to define a JavaScript Variable ?

The below points need to be considered when creating JavaScript variables

  • A variable name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign
  • Digits can be used after the first letter of the variable name
  • A variable name is case sensitive

JavaScript Variable Types

The JavaScript variables can be broadly classified into 2 types

  • Local Variables : The local variables are defined within a specific block or function and their scope also remains within the block or function defined.
  • Global Variables: The global variables are those variables which are defined outside the block or function so that they can be accessible in any block or function to execute the value at run-time
<script>  
var length=10;       // global variable for length                     
var height=20;       // global variable for height
function area(){ 
var area= length * height  // local variable to calculate area
document.writeln(area);  
}  
</script> 

ES2015 Keyword let in JavaScript

The JavaScript provides the Function Scope and Global Scope but in 2015 ES2015 introduced 2 new JavaScript keywords – let and const.

The keyword let and keyword const allows to create the Block Scope variables and constants in JavaScript. The below given example clarifies how Block Scope is different from Function Scope and Global Scope.

Global Scope: The variables which are defined outside the function provides global scope due to its accessibility

Function Scope: The local variables which are defined within a function provides Function scope within the function only .

Variable Re-declaration: If the variables defined in the Function Scope are redeclared outside the function with different value, then it allows to update/ override the value for that variable. In the below given example , the local variable and global variables are defined currently and are within their scope but redeclaration of carColor changes the color to “grey”

<script>  
var carModel ="Toyota" ;  // Global Variable declaration 
var carColor = "Grey";    // local variable value ovrrides
function carFeatures(){ 
var carCylinder = "4";    // local variable / function scope
var carAirBags =  "2";    // local variable / function scope
var carColor = "Red";     // local variable / function scope
 }  
// Redeclaring same variable outside function scope, changes carColor values to "Red"


</script> 

Block Scope provides the solution to the variable redeclaration problem as this might lead to issues if not properly handled. ES2015 provides the keyword let which helps in creating local variables who access remains within the scope of the function.  

<script>  
var carModel ="Toyota" ;  // Global Variable declaration 
var carColor = "Grey";    // consider 

function carFeatures(){ 
var carCylinder = "4";    // local variable / function scope
var carAirBags =  "2";    // local variable / function scope
let carColor = "Red";     // local variable / function scope
 }  
// carColor remains as  "grey" //access global variable

</script> 

Thus when used var, the variable declared in the Function Scope redeclares the variable value outside the function.

When used keyword let, the variable declared in the Function Scope does not redeclare the variable outside the function

ES2015 Keyword Const in JavaScript

ES2015 Keyword Const does not provide the constant value rather it provides the constant reference to the value which means we cannot change the constant primitive values but it allows to change the constant properties for it. 

The below given example is NOT ALLOED as it changes the constant TV Array elements

const tv = {brand:"Samsung", model:"Plasma", color:"Black"};
 / Redefinifn the Car elements for the Const Car Object is not allowed
tv = {brand:"Samsung", model:"QLED", color:"Grey"};

The below example IS ALLOWED as it adds New element without changing the constant TV array elements

 const tv = {"Samsung", "Sony", "TCL"};
 car[2] = "Panasonic" // allowed, as it adds the New element wihtout changing the exisitng TV Array elements

The keyword Const can be used to declare the variable or redeclare the variables. The below points need to be considered when using const for declaring variables

Variable DeclarationScope
 Redeclaration or reassignment for var or
let variable to const within the same scope
( local or global)
NOT ALLOWED 
 Redeclaration or reassignment for const
variable within the same scope ( local or
global)
 NOT ALLOWED
Redeclaration or reassignment for const
variable in another scope
 ALLOWED