More about arrow function --

 The biggest advantages of using arrow function is that they share the surrounding 'this' keyword.

Arrow function do not have their own 'this' keyword. They simply uses the 'this' they written in .

Lets see an example,

var box ={

    color:"green",

    position:1,

    clickMe:function(){ 

       console.log('inside method of box object '+ this.color+' '+this.position);

        document.querySelector(".green").addEventListener('click',function(){

            console.log("inside regular function call of event listener");

            var str='this is a box with color'+this.color+' which position is'+this.position;

            alert(str);

        })

    }    

}

box.clickMe();

We already know that in regular function call 'this' will point to the global object which is window object. But in  method call  'this' will point to the object the method call from .

So, in the above example 'this' will point to the box object ,so the color and position of box property will give the proper output, but in the listener callback method is a regular function call so 'this' will point to the global object(window). so color and position will give undefined as output.

So, a simple solution is we can store 'this' to a variable and can use that. let see-

var box ={

    color:"green",

    position:1,

    clickMe:function(){ 

     var self=this; //this is the hack

       console.log('inside method of box object '+ this.color+' '+this.position);

        document.querySelector(".green").addEventListener('click',function(){

            console.log("inside regular function call of event listener");

            var str='this is a box with color'+self.color+' which position is'+self.position;

            alert(str);

        })

    }    

}

box.clickMe();

Here, we are storing the 'this' of the object so that now we can use it to regular function call to get our desired output.

But we can easily do this by using arrow function in javascript. Because we already know arrow function uses the lexical 'this' keyword.

const box ={

    color:"green",

    position:1,

    clickMe:function(){

       console.log('inside method of box object '+ this.color+' '+this.position);

        document.querySelector(".green").addEventListener('click',()=>{

            console.log("inside regular function call of event listener");

            var str='this is a box with color'+this.color+' which position is'+this.position;

            alert(str);

        })

    }    

}

box.clickMe();

What is Arrow function in javascript?

Arrow functions introduced in ES6. It  provides a concise way to write javascript function.

//ES5

const years=[1990,2000,2010,2020];

var ages= years.map(function(el){

   return 2021-el;

});

console.log(ages);

//ES6

const years = [1990,2000,2010,2020];

let ages = years.map(el=>2021-el);//This is called arrow function.

console.log(ages);

//Arrow function with multiple parameter

const years = [1990,2000,2010,2020];

let ages = years.map((el,index)=>`age element ${index+1}:${2021-el}`);

console.log(ages);

Data privacy in ES5 and ES6

 To make a variable private we have used IIFE in ES5.

//ES5

(function(){

    var c=10;

})();

console.log(c);// 'c' can't be accessible outside of the IIFE 

But in ES6 we can do this in easier way ,

{

       let a =10;

}

console.log(a);

//variable a cannot be accessed outside of the block .because they are blocked scoped.

Difference between var ,let and const?

 'var' is function scoped but 'let' and 'const' are blocked scoped .

example-

//ES5

function driverLisence(passedTest){

    if(passedTest){

        var name="lokman";

        var yearOfBirth=1990;

    }

      console.log(name+"  born in " +yearOfBirth+"have successfully passed the license test");

//name and yearOfBirth will accessible within the body of the function because var is function scoped.

}

driverLisence(true);

//ES6

function driverLisence(passedTest){

    if(passedTest){

        let name="muna";

        const yearOfBirth=1995;

       

    }

     console.log(name+"  born in " +yearOfBirth+"have successfully passed the license test");

//name and yearOfBirth will not accessible outside of the if block . because they are blocked scoped. 'const' will not changed once initialized.

 }

driverLisence(true);

Event delegation?

Event delegation is the process of not to add event to a target element , add the event to the parent element.

Use cases for event delegation-

1. When we have an element with lots of its child element that we are interested in .

2.When we want an event handler attached to an element but not exist in DOM when page is loaded .

what is Event bubbling?

 If any event fired on a DOM element it will also fired on all of its parent element which is called the event bubbling.

So, the element event first fired is called the target element.

Ex:

<main>

     <section>

         <p>

                <button>

                          target  element        //event first fired on button element so it is called the target                                                                        element.

              </button>

         </p>

     </section>

</main>

This target element will store in the event object as property .

Structure of project using module pattern in javascript