Angular 8

Once phenomenal person said "Choose Technology Wisely"

A class stores information about the entity which can be manipulate as per data based on requirements, and significant improve the performance by implementing oops and methods. Class can send data from one class to another class by creating the instance of a class.

Angular 8 is very trendy and highly on demand in today's web development industries.

Why we choose Angular 8:-

1. High in performance in terms of Page rendering
2. Component based web development
3. Angular works on DOM 
4. Easy to use oops such as Interface, Class, Constructor, Dependency Injection.
5. Support ECMAScript

Don't be confuse between ECMA-262 and ECMAScript

ECMA-262 is a standard where Core JavaScript feature are defined where as the Language defined in this standard is called ECMAScript.

Javascript in browsers and Node.js environment is actually a Superset of ECMAScript. Browsers  and Node.js add more functionality through additional objects and methods, but the core of the language remains as defined in ECMAScript.

In 2007, JavaScript Ajax was highly in demand for the new age of dynamic pages. Still block binding and variable binding was same unnecessary stuff of code from developer ends. Now, We are in era where less code and max performance and code should looks neat and clean and easy to be maintain.

Block Binding

    

Earlier if we want to bind data using one way or two way binding it was a tricky but now these problems are solved with highly maintained and tested environment using Angular development environment.

1.0 Var Declarations and Hoisting

Lets take an Example:-

<script>

function test(condition)

{

    if(condition)

        {

            var Value = "test";

        }

     else

        {

            return null;

        }

}

</script>

At run time above code JavaScript Engine will change the code at Run Time and define a var Value at globally in function level, In another word var keyword define a variable in function level.

now, at Run time JavaScript Engine will change the code and looks like below:-

<script>

function test(condition)

{

    var Value

    if(condition)

        {

            Value = "test";

        }

     else

        {

            return null;

        }

}

</script>

The declaration of value is hoisted to the top, while the initialization remains in the same spot. That means the variable value is actually still accessible from within the else clause. If accessed from there, the variable would just have a value of undefined because it hasn’t been initialized.

Think and Solve

<script>

function test() {

   

    if(5===5)

    {

        var a="5";

    }

    alert(a)

   document.write("Hello, Coding Ground!");

}

test();

</script>

Correct Output will be 5.

As we saw 1.o (Var Declarations and Hoisting)

Think and Solve: 2

<script>

function test() {

      alert(a)

    if(5===5)

    {

        var a="5";

    }

    

   document.write("Hello, Coding Ground!");

}

test();

</script>

Answer - Output will be Undefined because var a hosted into the top inside the function without initialization of a value.

Block-Level Declaration

Above 1.0 we saw that how var declaration hosting is working, now we move to Block Level Declaration

Block level variable declaration scope is available only into the current block.

<script>

function test() {

      alert(a)

    if(5===5)

    {

        var a="5";

    }

    

   document.write("Hello, Coding Ground!");

}

test();

</script>

Java Script will not allow re-declaration of a variable let's understand in the below example

<script>

function test() {

// Syntax error (Variable already defined)

      let a;

    if(5===5)

    {

        var a="5";

    }

    

   document.write("Hello, Coding Ground!");

}

test();

</script>

Console : JavaScript error: Uncaught SyntaxError: Identifier 'a' has already been declared on line 6  

We are getting above error because of declarations of same name variable using let and var as we know let is declare as a top of the function and again JS run variable hosted top of the function, So the Run time its looks like:-

<script>

function test() {

// Syntax error (Variable already defined)

      let a; //already declared

     var a; //Hosted on function level

    if(5===5)

    {

        a="5";

    }

    

   document.write("Hello, Coding Ground!");

}

test();

</script>

Constant Declarations

Constant declarations almost same as let  declarations, scope of constant declaration within the current scope.

At the time constant declarations value initialization is mandatory.

Constant declarations prevent modification of its variables and its objects with the block level.

Let's see in example

<script>

function test() {

       //initialization is required

      const a="Test"; 

    if(5===5)

    {

        a="5";

    }

    

   document.write("Hello, Coding Ground!");

}

test();

</script>

Declaring objects with const

A const declaration prevents modification of the binding and not of the value itself. That means const declarations for objects do not prevent modification of those objects.

Let's look into an examples-

<script>

const person = {

name:"Rajeev"

}

person = {   //It means we are trying to modify the class property

name:"Jha"

}

</script> 

Console : Uncaught TypeError: Assignment to constant variable. on line 5

<script>

const person = {

name:"Rajeev"

}

person.name = "Jha"; //It means we are trying to modify the value of a property

</script>

Console : No error

The Temporal Dead Zone

A variable declared using either let,var and const can not be accessible before declaration. Suppose if we want access these variables before the declaration we get an error because  JavaScript community dubbed such kind of declaration into the TDZ (Temporal Dead Zone), So, Any attempts to access the variables from TDZ throw run time exception.

Let's see in example

<script>

alert(typeof value);  //RunTime error

        var value = "blue";

</script>

Console - JavaScript error: Uncaught ReferenceError: Cannot access 'value' before   initialization on line 2

Block Binding in Loops

Lets see in Example -

a) In below example loop is implemented and inside the loop we have declared variable i using var, So it will host top of the script as we know scope of the var is function level.

<script>

for(var i=0; i<=10; i++)

{

}

alert(i)

</script>

b) Same way in below example loop is implemented and inside the loop we have declared variable j using let, as we know scope of the let declaration is block level, So variable j scope only inside for loop. If we want to access out of block it will throw run time uncaught reference error.

<script>

for(let j=0; j<=10; j++)

{

}

alert(j)

//Throw exception (Uncaught ReferenceError: j is not defined on line 12)

</script>

JavaScript Uncaught V Undefined error

1. Generally browser complain about uncaught error when  JavaScript looking for a variable which are not declared where as undefined error when JavaScript trying to access a variable value which are declared but value is not initialized.

2. Uncaught error will block next execution of line where as Undefined error will allow to execute next line.

<script>

alert(i) //Undefined

for(var i=0; i<2; i++)

 {

     //tasks

 }

for(let j=0; j<2; j++)

 {

   //tasks

 }

alert(j) //Uncaught ReferenceError: j is not defined on line 9

alert("This line can not be executed.")

</script>

Exercises:

<script>

function abc()

{

 function xyz(){var a=12; return a;}

 return xyz;

}

x= abc();

alert(x())

</script>

Const

<script>

function abc()

{

const a=20;

alert(a)

}

abc()

</script>

Let and const almost behaves same the only difference is const initialization at same time of the declaration.