In JavaScript there are two ways in which data is copied, namely:

pass by value

The actual value is passed

pass by reference

The memory location where the data is stored is passed

Also, there are two types of data types in Javascript, namely:

primitive data type

This includes Boolean, NULL, undefined, String and Number

reference/ non-primitive data type

This includes Array, Objects and Functions.

Copy by equating "="

The primitive data type values are copied by value, whereas the non-primitive data type values are copied by reference (i.e., the memory location of the data type is copied instead of the value)

Equating in case of primitive data type:

const fruit = "apple"
const copiedFruit = fruit
console.log(fruit, copiedFruit)

Output:

apple
apple
// Nothing to consider in case of primitive data type

Let's check in case of reference data types,

Equating in case of reference data type:

const fruit = ["apple", "mango", "banana"];
const copiedFruit = fruit    // just reference to the memory location is copied

copiedFruit[0] = "orange"

console.log(fruit, copiedFruit)

Output:

Output: 
[ 'orange', 'mango', 'banana' ]  // source array got changed aswell
[ 'orange', 'mango', 'banana' ]

Since this is copied by reference, changing the value of copiedFruit changes the value of fruit (source array) as well. This is true for the objects and the functions as well as shown in the above code snippet.

The image depicts that actually the object (array) reference is copied, i.e., the object (array) points to the same memory location.

But, we don’t want to mutate the source array or objects. This can be achieved by the following in-built javascript methods:

Copy by using Javascript Methods

Using array methods

By using slice()

const fruit = ["apple", "mango", "banana"];
const copiedFruit = fruit.slice(0)    // creates an actual copy of array 

copiedFruit[0] = "orange"

console.log(fruit, copiedFruit)

Output

// Output: 
[ 'apple', 'mango', 'banana' ]         // didn't affected the source array
[ 'orange', 'mango', 'banana' ]

By using ES6 Spread operator:

const fruit = ["apple", "mango", "banana"];
// Only change in below line
const copiedFruit = [...fruit]   // creates an actual copy of array 

copiedFruit[0] = "orange"

console.log(fruit, copiedFruit)

Output

// Output: 
[ 'apple', 'mango', 'banana' ]         // didn't affected the source array
[ 'orange', 'mango', 'banana' ]

By using concat()

const fruit = ["apple", "mango", "banana"];
// Only change in below line
const copiedFruit = fruit.concat([])   // creates an actual copy of array 

copiedFruit[0] = "orange"

console.log(fruit, copiedFruit)

Output

// Output: 
[ 'apple', 'mango', 'banana' ]         // didn't affected the source array
[ 'orange', 'mango', 'banana' ]

By using Array.from()

const fruit = ["apple", "mango", "banana"];
// Only change in below line
const copiedFruit = Array.from(fruit)   // creates an actual copy of array 

copiedFruit[0] = "orange"

console.log(fruit, copiedFruit)

Output

// Output: 
[ 'apple', 'mango', 'banana' ]         // didn't affected the source array
[ 'orange', 'mango', 'banana' ]

Using Object Method

by using Object.assign

const fruitObj = {name: "apple", color: "red"};
const copiedFruitObj= Object.assign({}, fruitObj) // creates an actual copy of array 

copiedFruitObj.color = "yellow"

console.log(fruitObj, copiedFruitObj)

Output

// Output: 
{ name: 'apple', color: 'red' }  //fruitObj: didn't affected the source object
{ name: 'apple', color: 'yellow' }   //copiedFruitObj

As shown in the image above, memory locations for fruit and copiedFruit are different and thus all the source reference data types are not mutated.

So far so good, but the problem arises when any of the reference data types have a nested array, object or function. Before discussing the problem let's talk about shallow copy.

All the ways of copying arrays or objects discussed so far are performing the shallow copy.

What is SHALLOW COPY?

According to the mdn docs,

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object from which the copy was made.

Let’s understand shallow copy:

let’s take the same fruit array example from above:

const fruit = [{name: "cherry"},"apple", "mango", "banana"];
// In the fruit array the first element of the array is a reference data type (object)
// Now, replacing the first element
const copiedFruit = [...fruit]
copiedFruit[0] = "orange";
console.log(fruit, copiedFruit)

Output:

 // Output: 
[ { name: 'cherry' }, 'apple', 'mango', 'banana' ]   //fruit 
[ 'orange', 'apple', 'mango', 'banana' ]             //copiedFruit: independent copy

In the above snippet, still both the array are completely independent (the source array is not mutated due to the copied array), but the problem arises when the properties of the nested reference data type (array or object) are changed as shown in below code snippet.

const fruit = [{name: "cherry"},"apple", "mango", "banana"];
// In the fruit array the first element of the array is a reference data type (object)
const copiedFruit = [...fruit]
// Now, changing the property of the nested reference data type
copiedFruit[0].name = "orange";      
console.log(fruit, copiedFruit)

Output:

 // Output: 
[ { name: 'cherry' }, 'apple', 'mango', 'banana' ]   //fruit: source mutated
[ 'orange', 'apple', 'mango', 'banana' ]             //copiedFruit

Let's break down how this is happening: In Shallow Copy, as shown in image below,

1. if the array elements or object keys value are of primitive data type, they are copied by values, and,
2. if the properties of the array elements or object keys values are of reference data type (array or object) they are copied by reference.

So, now how can we create a completely independent copy of objects/arrays which don’t mutate the source object. Here comes the deep copy,

What is DEEP COPY?

According to the mdn docs,

A deep copy of an object is a copy whose properties do not share the same references (point to the same underlying values) as those of the source object from which the copy was made.

In simpler terms, copying the data stored from the source memory location to a new memory location by creating a completely independent object.

how to perform deep copy?

Following are the ways to perform the deep copy:

METHOD 1: JSON.parse(JSON.stringify(object)))

• JSON.stringify() converts a JavaScript object into a JSON string and then returns it.
• JSON.parse() converts a JSON literal string into a JavaScript object and then returns it.

Now, using the previous example and applying JSON.parse(JSON.stringify(object))

const fruit = [{name: "cherry"},"apple", "mango", "banana"];
// In the fruit array the first element of the array is a reference data type (object)
const copiedFruit = JSON.parse(JSON.stringify(fruit))
// Now, changing the property of the nested reference data type
copiedFruit[0].name = "orange";      
console.log(fruit, copiedFruit)

Output:

 // Output: 
[ { name: 'cherry' }, 'apple', 'mango', 'banana' ]  //fruit 
[ { name: 'orange' }, 'apple', 'mango', 'banana' ]  //copiedFruit: independent copy

This is fine, provides a deep copy and creates a new copy of data in a different memory location.

But when Date, functions, undefined, Infinity, RegExps, Maps, Sets, Blobs, FileLists, ImageDatas, sparse Arrays, Typed Arrays or other complex types are used within your object, this method of cloning doesn't work as expected. As shown in following code snippet:

const fruit = [{name: "cherry"},"apple", "mango", "banana", function () {console.log("performs some task")}];
// In the fruit array the first element of the array is a reference data type (object)
const copiedFruit = JSON.parse(JSON.stringify(fruit))
// Now, changing the property of the nested reference data type
copiedFruit[0].name = "orange";      
console.log(fruit, copiedFruit)

Output:

 // Output: 
[ { name: 'cherry' }, 'apple', 'mango', 'banana', [Function] ]  //fruit 
[ { name: 'orange' }, 'apple', 'mango', 'banana', null ]  //copiedFruit: missing function

Here as you can see in the above code snippet, the function is replaced by null, this method of the deep clone is not full proof!

What is the full proof method of the deep clone?

METHOD 2: Using external libraries:

• Lodash: It is a library that has a method called cloneDeep, which does exactly what it states: Creates a deep clone of the reference data type passed and It also takes care of nested reference data types.

Reference for clone deep: cloneDeep Method

Summary:

1. primitive data types are passed by value & non-primitive data types are passed by reference.
2. In shallow cloning, the nested reference data types share the same memory location as their copied counterparts. JavaScript Methods like slice(), spread operator, concat(), Array.from() and Object.assign() performs shallow cloning.
3. JSON.parse(JSON.stringify)) can perform deep cloning with exceptions of functions, date objects and so on, which when included doesn't give expected results.
4. To get full proof deep cloned object, an external library such as Lodash should be used which provides a deepClone method.

"this" keyword

this refers to the object that is executing the current piece of code.

The above image depicts the Global execution context, it consists of the following:

• The global object: - In the browser, this is a window object.
• "this" keyword: - this is referring to the global object
• The variable environment: - a place in memory where variables live.
• The outer environment: -When we execute code within a function the outer environment is the code outside that function — at the global level, it is null.

"this" refers to different objects depending on how it is used:

• In an object method, this refers to the object.
• Directly, this refers to the global object.
• In an event, this refers to the element that received the event.
• In a function, this refers to the global object.
• In a function, in strict mode, this is undefined.

For more details, check out mdn docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Call, Apply and Bind

Call, Apply and Bind are the method in Javascript and basically used to control what this in a function points to. Also called function borrowing methods.

Function borrowing allows us to use the methods defined in one object on a different object without making a copy of the method.

Implicit Binding

In JavaScript, implicit binding is already declared by the language. As shown in the code snippet below.

const fruit = {
  name: "mango",
  printFruit: function () {
    console.log(this.name)  // mango
  }
}
fruit.printFruit()

Explicit Binding

In Explicit Binding, we explicitly point this of function to the object, both defined in the same level of scope.

const fruit = {
  name: "mango",
}

function printFruit() {
    console.log(this.name)  // mango
  }

printFruit.call(fruit)

In the above code snippet, object and function are defined in the global environment, by using the call() method we explicitly point this of the function (printFruit) to the object (fruit).

call() method

In the call() method, the context with which the function has to be called is passed as a parameter to the call.

As shown In the fruit example above.

How to pass multiple parameters in the call() method?

In the same example of fruit, we can pass the arguments to the call method as shown in the snippet below:

Code snippet of the call() method:

const fruit = {
  name: "mango",
}

function printFruit(fruit2, fruit3) {
    console.log(this.name, fruit2, fruit3)  // mango apple banana
  }

printFruit.call(fruit, "apple", "banana")

In the call() method, the first argument is the object with whose context the function is to be called and the following arguments are the values with are to be used in the function.

apply() method

apply() method is the same as the call(), except the second argument is passed as an array of values.

Code snippet of the apply() method:

const fruit = {
  name: "mango",
}

function printFruit(...args) {
    console.log(this.name, args[0], args[1])  // mango apple banana
  }

printFruit.apply(fruit, ["apple", "banana"])

This makes it easier as we need to pass an array as an argument.

bind() method

bind() method is similar to call(), with one difference. Unlike the call() method invoking a function directly, the bind method returns the brand new function which can be stored and invoked as and when required.

Code snippet of the bind() method:

const fruit = {
  name: "mango",
}

function printFruit() {
    console.log(this.name)  // mango 
  }

const storedFunction = printFruit.bind(fruit)

storedFunction()

Here, the printFruit.bind(fruit) return a brand new function, which is stored in storedFunction and invoked on the next line when required.

Summary

• This keyword refers to different objects depending on how it is used.
• In the case of implicit binding, this binds to the object adjacent to the dot(.) operator while invoking the method.
• In the case of explicit binding, we can call a function with an object when the function is outside of the execution context of the object. This can be done using call(), apply() and bind().

Event Propagation

Event Propagation is a mechanism in which the event propagates or travels through the DOM (Document Object Model) tree of a webpage.

Event propagation occurs in three phases, this is called as Event Propagation Life Cycle:

1. Capture Phase: The event travels starting from the document object (window), through the HTML element towards the target element.
2. Target Phase: The event element reaches the target element which generated the event.
3. Bubble Phase: The event travels from the target element, through its parent towards the window object.

Now, as we have understood how an event flows in the DOM tree. Let's understand Event Bubbling and Capturing.

Event Bubbling and Capturing

Event bubbling and capturing describes the order in which event propagation occurs when a nested child element receives an event trigger and both the child and the parent element have event handlers registered to it.

Setup

let us understand this with an example:

  <body id="ancestor">
    ANCESTOR
    <ul id="parent">
      PARENT
      <li id="child">a</li>
      <li id="child">b</li>
      <li id="child">c</li>
    </ul>
    <script src="src/index.js"></script>
  </body>

This is the HTML code having elements in this order of nesting body > ul > li having corresponding id as ancestor > parent > child

document.querySelector("#ancestor").addEventListener("click", () => {
  console.log("ancestor");
});

document.querySelector("#parent").addEventListener("click", () => {
  console.log("parent");
});

document.querySelector("#child").addEventListener("click", () => {
  console.log("child");
});

Now, each element is attached to an event listener which just logs its element id upon event trigger. for example, clicking on ancestor will log ancestor in the console.

This is the UI of the program, container a, b and c are the child elements.

We can check how the event propagates upon clicking on the child element.

As clear in the above animation, the event propagates from the child element to the ancestor element. ( child >> parent >> ancestor )

Event Bubbling

When the event propagates from the child or target element to the window object such a mode of event propagation is called Event Bubbling.

Event bubbling is the default mode of event propagation. And thus in the example above for event bubbling, the order of propagation was:

On clicking child element:

1. first event listener of the child element receives the event.
2. second, the parent and
3. third, the ancestor.

Thus, logs in the console for clicking on child element would be:

child
parent
ancestor

On clicking parent element:

1. first event listener of the parent element receives the event and
2. second, the ancestor.

Thus, logs in the console for clicking on the parent element would be:

parent
ancestor

Note: event bubble doesn't occur on every element, there are exceptions like focus, blur and scroll events where an event bubble is not observed.

Syntax for Event handling (addEventListener)

Syntax: target.addEventListener(type, listener , useCapture);

• type: A case-sensitive string representing an event type to listen for. In this example 'click'
• listener: An object that implements the Event interface when an event of the specified type occurs.
• useCapture (Optional): A Boolean denoting whether events of this type will be delivered to the registered listener before being delivered to any EventTarget beneath it in the DOM tree.

  If boolean not specified, useCapture defaults to false. i.e. Event Bubbling is enabled.

Event Capturing

When the event propagates from the document object to the target element such a mode of event propagation is called Event Capturing.

For observing event capturing, we need to specify the third argument of the addEventListener as a true. so, the syntax would become: Syntax: target.addEventListener(type, listener , true);

On clicking the child element:

1. first event listener of the ancestor element receives the event.
2. second, the parent and
3. third, the child.

Thus, logs in the console for clicking on child element would be:

ancestor 
parent
child

On clicking parent element:

1. first event listener of the ancestor element receives the event and
2. second, the parent.

Thus, logs in the console for clicking on the parent element would be:

ancestor
parent

Stop Propagation

The stopPropagation() method of the event interface prevents further propagation of the current event during the event propagation.

for example: If we don't want the event to propagate to the ancestor in our example, we can call the stopPropagation method on the event we get in the callback() function of the addEventListener.

Code snippet for this case:

  document.querySelector("#ancestor").addEventListener("click", () => {
  console.log("ancestor");
});

document.querySelector("#parent").addEventListener("click", (parentEvent) => {
  console.log("parent");
  parentEvent.stopPropagation();
});

document.querySelector("#child").addEventListener("click", () => {
  console.log("child");
});

In the parent element's event listener, we get an event interface, it is named as parentEvent here, upon which we called the stopPropagation method this will prohibit event propagation from the parent element implicating that the event has been completed successfully and no further propagation of event is required.

As you noticed in the above example, when we click on the child element, first the event is received by the child element, and output is logged in the console but as soon as it encounters e.stopPropagation() in the parent event listener, it stops further propagation and does not bubble up in the DOM tree.

Event Handling using Bubbling, Capturing and Stop Event Propagation

let's assume an example case, Consider we want to only trigger the parent element's event listener on click of the child element.

we can achieve this by using useCapture and stopPropagation() method.

Since the default case is the bubbling, on click of the child the first event received would be by a child element, but we don't want that. So let's change the useCapture to true for each event listener to use Event Capturing. Now, on clicking the child element the event received would be by the ancestor element, but we don't want this too.

So how can we get the event to be received by the parent element first? The answer is to make the ancestor element listener to bubble, i.e., useCapture to false

Let's implement this in the code, our code snippet would look like this:

document.querySelector("#ancestor").addEventListener(
  "click",
  () => {
    console.log("ancestor");
  },
  false
);

document.querySelector("#parent").addEventListener(
  "click",
  () => {
    console.log("parent");
  },
  true
);

document.querySelector("#child").addEventListener(
  "click",
  () => {
    console.log("child");
  },
  true
);

Now let's check the output:

As seen above, we are making the parent listener receive the event first but we don't want the event to propagate from the parent element. This can be achieved by calling the stopPropagation method on the event received by the parent element's event listener.

So, our code snippet would look as follows:

document.querySelector("#ancestor").addEventListener(
  "click",
  () => {
    console.log("ancestor");
  },
  false
);

document.querySelector("#parent").addEventListener(
  "click",
  (parentEvent) => {
    console.log("parent");
    parentEvent.stopPropagation();
  },
  true
);

document.querySelector("#child").addEventListener(
  "click",
  () => {
    console.log("child");
  },
  true
);

Final Output:

Thus, the desired output has been obtained.

This was just a basic example of how we can handle events using the event bubbling, the event capturing and the stop propagation method.

Here's the code sandbox link to try on your own: CodeSandbox Link

TLDR

• Event Propagation is the flow of events on the event trigger in the DOM tree. It has three phases:- Capture phase, Target phase and Bubble phase.
• In event bubbling the event bubbles up the DOM tree and in capturing the event trickles down the DOM tree.
• few events like focus and blur don't bubble up.
• event propagation could be changed from bubbling to capturing by setting the useCapture to true in the addEventListener.
  • Syntax: target.addEventListener(type, listener , true);
• event propagation could be controlled by using useCapture and stopPropagation() method on event interface.