JavaScript const variable value change

Note : If you declare constant object or array value with const keyword, You can change or add the properties of const variables.

Let's see the examples:

# Let see how to change the value of const variable

JavaScript has 3-escape types, one which was introduced in ECMAScript 2015 :

1. Unicode escape sequence.

2. Hexadecimal escape sequence.

3. Codepoint escape sequence.

Let’s see them escape sequences in more detail :

1.) Unicode escape sequence :

• The unicode escape sequence is \u<hex>, where \u is a prefix followed by a hexadecimal number <hex> with a fixed length of 4 digits.

• If you want to escape code points from the entire BMP, then you can use an unicode escape sequence.

For example '\u000B1' (Plus OR Minus symbol '±') or '\u0222B' (Integral symbol '∫')

Let’s see the use of unicode escape sequences:

2.) Hexadecimal escape sequence :

• The shortest form is named hexadecimal escape sequence: \x<hex>, where \x is a prefix followed by a hexadecimal number <hex> with a fixed length of 2 digits.

For example : '\x40' (symbol '@') or '\x3F' (symbol '?').

Let’s see the use of hexadecimal escape sequences :

3.) Codepoint escape sequence :

• ECMAScript 2015 provides escape sequences that represent code points from the entire Unicode space: U+0000 to U+10FFFF, i.e. BMP and astral planes.

• The new format is called code point escape sequence: \u{<hex>}, where <hex> is a hexadecimal number with a variable length of 1 to 6 digits.

For example : '\u{4B}' (symbol 'K') or '\u{1F620}' (Angry face symbol 😡).

Let’s see the use of Codepoint escape sequence :

The following characters are reserved in JavaScript strings :

Seven other escape sequences are valid in JavaScript :

Note : Boolean values are very commonly are used when testing conditions, like condition and looping statements.

let's see an example of Boolean datatype :

<script>
    var a =10, b =25, c = 15;
    document.write(b > a);  // Output: true
    document.write(b < c);  // Output: false
</script>

Basically data types are used to classify one particular type of value(data), that can be represented and manipulated data in a programming language.

Note : Datatypes in javascript means the type of data stored in variable.

Why data-type is used in programming language ?

The conscept of data-types is often difficult for beginning programmers to grasp because in real life you don't often distinguish among different types of information. If someone asks you for your name, your age or the current time, you dont't usually stop to consider that your name is a text string and that your age and current times are numbers.

• However, a variables specific data-type is very important in programming because the data-type helps determine how much memory the computer allocates for the data stored in the variable.

JavaScript classifies data-type into 3-section :

1.) Primitive Datatype : Following are the primitive data-type that JavaScript supports.

• Numbers(Numerical Data).

• String(Text Data).

• Boolean.

• Symbol.

2.) Special Datatype : Following are the Special data-type that JavaScript supports.

• Undefined

• Null

3.) Non-Primitive Datatype : Following are the non-primitive data-type that JavaScript supports.

• Array

• Function, Object and Properties.

1.) Primitive Datatypes :

• Datatype's that can be assigned only a single value with no additional properties and methods are called primitive types.

• Primitive defines immutable values and was introduced recently by ECMAScript standard, It can be stored in the fixed amount of memory available.

Let's see an example of primitive data-type :

<script>
    var a = 20;  // assign `20` to `a`
    var b = a;   //copy the value of `a` to `b`
    b = 25;      //assign `25` to `b`
    console.log(a)  // =>20
</script>

Note : Primitive types are also known as simple types or scalar types.

JavaScript supports 4-types of primitive data types described in table :

2.) Special Datatype :

• Special data-type are also known as Primitive types.

• Javascript has 2-more literals, null and undefined, that is considered to be objects.

Following are the Special data-type that JavaScript supports, described in table:

3.) Non-Primitive Datatypes :

• Datatype's that Objects can contain multiple values are called non-primitive types. It is same as object in the class. We can define attributes and methods to composite data-types.

• A Non-Primitive datatypes can contain other values. Since the contents of a reference type can't fit in the fixed amount of memory available for a variable, the in memory value of a reference type is the reference itself (a memory address).

For instance :

• Array

• RegExp

• Function, Object and Properties.

Let's see an example of non-primitive data-type :

<script>
    var data = {number: 22 };  //assign the reference of a new object to `data`.
    var b = data;   //copy the reference of the object inside `data` to new variable `b`.
    b.number = 75;  //modify the contents of the object `b` refers to.
    console.log(data);  //=> { number : 37 }
</script>

Note : Non-Primitive type are also known as : Reference types or Composite data-type or Complex types or container types.

JavaScript contain following non-primitive data types, described in table:

Let's see an example of Dynamic Typing in JavaScript :

<script>
  let myName = 'Ankaj Gupta';  //Ankaj Gupta
  myName = 100;  //100 
  myName = true;  //true
</script>

Example explained :

• In this example, the variable myName, defined as a variable by the let keyword, can be assigned to hold different data types, or can be initialized.

• Each of the variables myName above can be set to any data type available in JavaScript. They do not need to be explicitly declared with a data type before they are used.

Let’s see the difference between var vs let vs const:

Let’s see the difference between var and let

Let’s see the var vs let in details with examples :

1.) Global scope :

• var and let variables work the same way when used in a global scope.

<script>
    var varVariable = “I am global variable.”;
    let letVariable = “I am also global variable.”;
</script>

2.) Global window object :

• Global variables defined with let variable will not be added to the global window object like those defined with var.

3.) Function scope :

• var and let variables work the same way when used in a function scope.

<script>
    function display(){
       var varVariable = "I am var variable.";
       let letVariable = "I am let variable.";
    
       console.log(varVariable); //I am var variable.
       console.log(letVariable); //I am let variable.
    }  
    display();     
</script>

4.) Block scope :

• Variable defined with var keyword is not block scoped.

<script>
    for(var i=0; i<=5; i++){
       console.log(i); //i is visible here  
    }  
    console.log(i); //i is visible here    
</script>

• Variable defined with let keyword is block scoped.

<script>
    for(let i=0; i<=5; i++){
       console.log(i); //i is visible here  
    }  
    console.log(i); //Error     
</script>

5.) Variable hoisting :

• Variables declared with var are hoisted to the top.

<script>
    console.log(name); //undefined
    var name = "I am var variable";
</script>

• Variables declared with let are not hoisted to the top.

<script>
    console.log(name); //ReferenceError
    let name = "I am let variable";
</script>

6.) Re-declaration :

• let variables cannot be re-declared while var variable can be re-declared in the same scope.

<script>
    var a = 10; 
    var a = 20; //20
</script>

<script>
    let a = 10; 
    let a = 20; //SyntaxError: Identifier 'a' has already been declared
</script>

const is one of 3-keywords you can use to declare variables. There are 2-other keywords – let and var. All 3-keywords declare variables, but they’re slightly different from each other.

# Declaring JavaScript Const Variables:

Syntax :

Let’s see the syntax of const keyword :

<script>
    const variable_name = value;
</script>

Parameter :

• const : JavaScript reserved keyword.

• var_name : Name of constant variable

• value : Required, Initializing constant value.

Note : A variable declared with const must be initialized.

# immutable and mutable variable in const

It does't define a constant value. It defines a constant reference to a value. Because of this, we can't change constant primitive values, but we can change the properties of constant objects or array.

Let's see an example of immutable variable in const :

<script>
    const x=25; 
    x++; //ERROR, not allowed
    x= 20;//ERROR, not allowed
    x= x+5; //ERROR, not allowed
</script>

Let's see an example of mutable variable in const :

<script>
    //You can create a const object
    const student = {name:"Ankaj", branch:"CS"};

    //You can change a property
    student.name = "Ankaj Gupta";  //Allow

    //You can add a property
    student.rollno = "45"; //Allow
</script>

# Scope of const keyword :

1.) Global scope :

• Using const keyword to define variable globally. Once you define globally, and access anywhere inside your code.

<script type="application/javascript; version=1.7">
    const x=1; //'x' is gloabal variable;
     console.log("Start program :",x);
    function display()
     {
        if(true)
         {
          console.log("Inside block :",x); //x visible 
         }
         console.log("Inside function :",x); //x visible
     }
     display(); //calling JavaScript function
     console.log("End program :",x); //x visible
</script>

2.) Local scope :

• Using const keyword to define variable locally (local scope). It can't be accessed outside the function declaration.

<script type="application/javascript; version=1.7">
   function display()
     {
       const a =10;
       console.log("Inside function : "+a); //Inside function :10
     }
     display();
    //ReferenceError: a is not defined
     console.log("outside function : "+a);
</script>

3.) Block scope :

• Variables declared with const keyword inside a block { } , can't be accessed from outside the block. When you try to access from outside of block, It will get a ReferenceError.

<script type="application/javascript; version=1.7">
  const age = 22;
  if (age > 21)
    {
      const message ="Hello";
      console.log("Inside block, message : ",message); //Hello!
    }
    //ReferenceError: message is not defined
    console.log("Outside block : ",message);
</script>

# Variable Hoisting :

Variable defined with ‘const’ keyword are not hoisted to the top. So if you try to accessed the variable before declaration it, javascript throw a Reference Error.

Note : Because you can not re-assign a const, you know it is not possible to hoist them.

Let's try to create an exaple :

<script>
    console.log(name); //ReferenceError
    const name = "Ankaj";
</script>

Important point's of const keyword in JavaScript :

• Assigned when Declared : The const variable must be both declared and initialised. If you don't assign variables value at declaration time, It will give the SyntaxError.

<script>
    const constant_name = value;
</script>

<script>
    const name;  //SyntaxError: Missing initializer in const declaration
</script>

<script>
    const name= "Ankaj";
</script>

• Block-scope : Variables declared with const keyword inside a block { } , can't be accessed from outside the block. When you try to access from outside of block, It will get a ReferenceError.

<script>
    if(true)
    {
      const a=10;
      document.write(a); //Outpt : 10
    }
    document.write(a); //ReferenceError: a is not defined
</script>

• Variable Re-declaration : Unlike var, Constant variable can't declare the same variable more than one time using ‘const’ keyword within the same scope. When we try to redefine, It will get a SyntaxError.

<script>
    const a = 10; 
    const a = 20; //SyntaxError: Identifier 'a' has already been declared
</script>

<script>
    const a = 10; //Global scope
    function display()
    {
      const a= 20; //Local scope
    }
    if(true)
    {
      const a= 25; //Block scope
      display();
    }
</script>

• Variable value re-assigned : Variables declared with var or let can be changed later in the program. Once a const variable is initialized, its value can never be changed again, and it can’t be reassigned to a different value.

<script>
    // Assign value to x variable
    const x=10;
    //Reassign variable with a new value
    x = 20; //TypeError: Assignment to constant variable.
</script>

• Dynamic type : As you known, const variables can not be re-assign, that's why variables declared with const keyword are not dynamic type.

<script>
    consr myName = 'Ankaj Gupta';  //Ankaj Gupta
    myName= 100; //Error
    myName= true; //Error
</script>

# How to change const values in javascript ?

• As you known, Variable declare with const keyword you can not change later in program, but this condition is apply only for constant primitive values not for constant object or array.

• If you declare constant object or array value with const keyword, You can change or add the properties of const variables.

Let's see the examples :

<script>
    const x=25; 
    x++; //ERROR, not allowed
    x= 20;//ERROR, not allowed
    x= x+5; //ERROR, not allowed
</script>

<script>
    //You can create a const object
    const student = {name:"Ankaj", branch:"CS"};

    //You can change a property
    student.name = "Ankaj Gupta";  //Allow

    //You can add a property
    student.rollno = "45"; //Allow

    //Note : But you can't re-assign a constant object.
    student = {name:"Anmol", branch:"ECE"};  //ERROR, not allowed
</script>

<script>
    //You can create a constant array.
    const student = ["Name", "Branch", "Rollno"];

    //You can change an element.
    student[2] = "Enroll_No"; //Allow

    //You can add an element.
    student.push("Gender"); //Allow

    //Note : But you can't reassign a constant array.
    student = ["Name", "Branch", "Enroll_No", "Gender"];  //ERROR, not allowed
</script>

# Declaring JavaScript let Variables:

Syntax :

Let’s see the syntax of let keyword :

<script>
    let variable_name = value;
</script>

Parameter :

• let : JavaScript reserved keyword.

• var_name : Name of constant variable

• value : ptional, Initial value assign at the time of declaration.

Let’s see an example of let keyword in JavaScript :

<script>
    function display() {
       let a =10;
       console.log(a);   //Output : 10
       if(true) {
          let a=20;
          console.log(a); //Output : 20
        }
        console.log(a);  //Output : 10
     }  
    display();     
</script>

# Scope of let keyword :

1.) Global scope :

• Using let keyword to define variable globally. Once you define globally, and access anywhere inside your code.

<script type="application/javascript; version=1.7">
    let x=1; //'x' is gloabal variable;
     console.log("Start program :",x);
    function display()
     {
        for(x= 1; x< 5; x++) {
          console.log("Looping time :",x); //x visible 
         }
         console.log("Inside function :",x); //x visible
     }
     display(); //calling JavaScript function
     console.log("End program :",x); //x visible
</script>

2.) Local scope :

• Using let keyword to define variable locally (local scope). It can't be accessed or modified outside the function declaration.

<script type="application/javascript; version=1.7">
   function display()
     {
       let a =10;
       console.log("Inside function : "+a); //Inside function :10
     }
     display();
    //ReferenceError: a is not defined
     console.log("outside function : "+a);
</script>

3.) Block scope :

• Variables declared with let keyword inside a block { } , can't be accessed from outside the block. When you try to access from outside of block, It will get a ReferenceError.

<script type="application/javascript; version=1.7">
  let age = 22;
  if (age > 21)
    {
      let message ="Hello";
      console.log("Inside block, message : ",message); //Hello!
    }
    //ReferenceError: message is not defined
    console.log("Outside block : ",message);
</script>

# Variable Hoisting :

Unlike var keyword, The variable declared using ‘let’ keyword is not hoisted. So if you try to use the variable before declaring it, javascript throw a Reference Error.

Let's try to create an exaple :

<script>
    console.log(name); //ReferenceError
    let name = "Ankaj";
</script>

Important point's of let keyword in JavaScript :

• Variable access befor declaration : let variables are registered at the top of the block, But when the variable is accessed before declaration, JavaScript throws a ReferenceError.

<script>
    document.write(x); //ReferenceError: x is not defined
</script>

• Variable use without initialization : The let statement creates and initializes variables inside the block scope. If you don't assign variables value at declaration time, By default JavaScript automatically a declared assigns the undefined value.

<script>
    let name;
    document.write(name); //undefined
</script>

• Block-scope : Variables declared with let keyword inside a block { } , can't be accessed from outside the block. When you try to access from outside of block, It will get a ReferenceError.

<script>
    for(let i=0; i<=5; i++ )
    {
      //write something
    }
    document.write(i); //ReferenceError: i is not defined
</script>

• Variable Re-declaration : Unlike var, You can't declare the same variable more than one time using ‘let’ keyword within the same scope. When we try to redefine, It will get a SyntaxError.

<script>
    let a = 10; 
    let a = 20; //SyntaxError: Identifier 'a' has already been declared
</script>

<script>
    let a = 10; //Global scope
    function display()
    {
      let a= 20; //Local scope
    }
    if(true)
    {
      let a= 25; //Block scope
      display();
    }
</script>

• Variable value re-assigned : Variable data store in memory, which can later be accessed and modified (reassigned a new value).

<script>
    // Assign value to x variable
    let x=10;
    //Reassign variable with a new value
    x = 20;
    console.log(x); //Output : 20
</script>

• Dynamic type : Variables declared with let keyword are dynamic typing mean that, they can change from one data type to another data type.

<script>
    let myName = 'Ankaj Gupta';  //Ankaj Gupta
    myName= 100; //100
    myName= true; //true
</script>

# Declare variable

Let’s see the syntax of var keyword :

<script>
    var variable_name = value;
</script>

Parameter :

• var: JavaScript reserved keyword.

• var_name : Name of variable.

• value : Optional, Initial value assign at the time of declaration.

Note : let and const are block scoped variables. Block scope does not apply to var.

Let’s see the example of var keyword in JavaScript :

<script>
    var apple = 8;
    var mango = 9;
          
    var totalFruits = apple + mango;
    document.write(totalFruits);
</script>

Output :

Scope of var keyword ?

1.) Global scope :

• Using var keyword to define variable globally. Once you define globally, you can access anywhere inside your code.

<script>
    var x=1; //'x' is gloabal variable
     console.log("Start program :",x);
    function display()
     {
        for(x= 1; x< 5; x++ )
         {
          console.log("Looping time :",x); // x visible on here
         }
         console.log("Inside function :",x); // x visible
     }
     display(); //calling JavaScript function
     console.log("End program :",x); // x visible
</script>

2.) Local scope :

• Using var keyword to define variable locally (local scope). It can't be accessed or modified outside the function declaration, Function parameters are always local to that function

<script>
   function display()
     {
       var a =10;
       console.log("Inside function : "+a);
     }
     display();
    // Uncaught ReferenceError: a is not defined
     console.log("outside function : "+a);
</script>

3.) Block scope :

• Using var keyword, If you declare variable inside the block{ } statement, the variable can be accessed from outside the block.

<script>
  var age = 22;
  if (age > 21)
    {
      var name ="Ankaj Gupta";
      console.log("Inside block, name : ",name);
    }
    console.log("Outside block : ",name);   //name visible on here
</script>

# Variable Hoisting :

Variables declared with var are hoisted to the top of the enclosing function scope. If the variable is accessed before variable declaration, it evaluates to undefined.

Let's try to create an exaple :

<script>
    console.log(name); //undefined
    var name = "Ankaj";
</script>

Important point's of var keyword in JavaScript :

• Variable use without initialization : The var statement creates and initializes variables inside the scope. If you don't assign variables value at the declaration time, By default JavaScript automatically a assigns the undefined value.

<script>
    var name;
    document.write(name); //undefined
</script>

• Block-scope : Variables declared with the var keyword are not Block Scope.

<script>
    for(var i=0; i<=5; i++ )
    {
      //write something
    }
    document.write(i); //Output :6
</script>

• Variable Re-declaration : You can declare the same variable more than one time and also can be updated/modified.

<script>
    var fruitsName = 'Apple';
    var fruitsName = 'Mango';
    console.log(fruitsName); //Output : Mango
</script>

• Variable value Re-assigned : Variable data store in memory, which can later be accessed and modified (reassigned a new value).

<script>
    // Assign value to x variable
    var x=10;
    //Reassign variable with a new value
    x = 20;
    console.log(x); //Output : 20
</script>

• Dynamic type : Variables declared with var keyword are dynamic typing mean that, they can change from one data type to another data type.

<script>
    var myName = 'Ankaj Gupta';  //Ankaj Gupta
    myName= 100; //100
    myName= true; //true
</script>

• When using var local scope is within a function, means that a variable with the same name can be used in two separate functions, because each is recognized only by the function in which it is declared.

<script>
    function myFunction()
     {
       var data = "I am local scope";
       document.write(data); //Output: I am local scope
     }
    function display()
     {
       var data = "I am  also local scope";
       document.write(data); //Output: I am also local scope
     }
    myFunction();
    display();
</script>