Table Of Content

Variables in ECMAScript

View more Tutorials:

1- What is Variable?

a variable means a "Memory location" which a program uses to store values. Variable name is called an identifier.
Variable name has to be given by a principle. Below are principles to give a name for a variable:
  1. Variable names are not allowed to be the same as keywords
  2. Variable names may contain alphabets or figures but not start with a figure.
  3. Variable names may not contain white spaces or special characters except for underscore (_) and dolar character ($).

2- Declare variable

Declaring variable is necessary because you have to do so before using it. The ES5 syntax uses the var keyword to declare a variable. The  ES6 adds two new keywords such as  let & const, to declare a variable.
// Declare variables:
var a1;
console.log(a1); // undefined

var a2 = 100;
console.log(a2); // 100


var a3, a4;
var a5, a6 = 200;

console.log(a5); // undefined
console.log(a6); // 200

var a7= 100, a8 = 300;


let b1;
console.log(b1); // undefined

let b2 = "Hello";
console.log(b2); // Hello



const c = 100;
console.log(c); // 100

 

block

A block means a set of commands located in a "curly brackets" {}.

let

The let keyword is used to declare a block scope variable, which means that this variable will be realized by the program in such block or inside the sub-block, but is not realized by the program outside the block defining it.
if(true) {

   let a = 200;

   console.log(a); // 200
}    

// Program will ignore this statement:
console.log(a);
If you use the let keyword to define two variables with the same name, one variable declared in the parent block, one variable declared in the sub-block, the program will treat it as two different variables.
let i = 1000;
let j = 2000;

if(true)  {

   i = 100; // Assign new value to 'i'
   let j = 200; // A new variable (***)
   console.log("Test1: " + i + " : " + j); // Test1: 100 : 200

}

console.log("Test2: "+ i + " : " + j); // Test2: 100 : 2000

var

The var keyword is used to declare a variable, which has a broader scope than the let variable. It is realized by the program inside the block defining it, in sub-blocks, even realized outside the block having declared it.
if(true) {

   var a = 200;

   console.log(a); // 200
}    

console.log(a); // 200
If you declare two variables with the same name with the var keyword, a variable declared in the parent block, a variable in the sub-block, the program considers the two variables to be the same (Same position in memory).
var i = 1000;
var j = 2000;

if(true)  {

   i = 100; // Assign new value
   var j = 200; // Assign new value
   console.log("Test1: " + i + " : " + j); // Test1: 100 : 200

}

console.log("Test2: "+ i + " : " + j); // Test2: 100 : 200
The variables declared with the var keyword in a function will only be recognized by the program in such function. It is not recognized outside the function.
// A function
var test = function()  {
    var a = 200;

    console.log(a); // 200
}

// Call function.
test();

console.log(a); // Not work!!

const

The const keyword is used to declare a constant. When declaring a constant, you have to always assign a value to it. But you can not assign a new value to this variable. Note: Like the let variable, the const variable has a block scope.
// Declare a constant with a value

const greeting = "Hello";

// Assign new value to 'greeting'
greeting = "Hi"; // ==> Error!!


// Declare a constant without a value
const i  ; // ==> Error!!
A variable declared with the const keyword, it will be a constant in the sense that you can not assign a new value to it, but it is not immutable, you can still change its properties.
Let's look at the following example. A variable declared with the const keyword, whose value is an object with multiple properties. You can assign new values to the properties of this object.
// Declaring a constant is an object
const person = {
    name: "Clinton",
    gender : "Female"  
};

console.log(person.name); // Clinton

// Can assign new values to properties of const object.
person.name = "Trump";
person.gender = "Male";

console.log(person.name); // Trump


// ** Error! (Cannot assign new value to const variable).
person =  {
   name : "Trump";
}

+ const: Object.freeze()

The  Object.freeze() method helps freeze an object. You can not change or assign a new value to its properties.
Object.freeze()
// Declaring a constant is an object
const person = {
    name: "Clinton",
    gender : "Female"   
};

console.log(person.name); // Clinton

Object.freeze(person); // Freeze object 'person'.

person.name = "Trump";

console.log(person.name); // Clinton

View more Tutorials: