DEV Community: Shrushti Polekar

More About ‘this’ Keyword in JavaScript

Shrushti Polekar — Tue, 07 Jun 2022 17:44:33 +0000

Whenever any code is executed in JavaScript, it runs inside an Execution Context. The Global Execution Context is the very first Execution Context on the the call stack. The first thing JS Engine does is, it creates Global Execution Context and gives you two things:

Global Object
‘this’ keyword Suppose if we create a user object with some properties and methods, on calling the login function , we can see that the this keyword is nothing but user object! Now suppose we attach any new method on user, and call it , hen also the this keyword points to user object!

Thus , the ‘this’ keyword is nothing but the object that the function is a property of!
Now suppose we have a regular function ,

on calling the function we can see that the this keyword points to global object.

But that’s not the case with constructor function.

Lets see this constructor function f2,

Now if create an object of f2 and log it to the console we get,

Thus we can say that , when dealing with regular functions ,the ‘this’ keyword points to the global object. But in case of constructor function ,it will point to that respective object itself.
Now see the below object obj1,

since the ‘anotherfunction’ is not really associated with obj1(it behaves like a regular function)directly, the ‘this’ keyword inside it points to global object.

so in this case , how can we make that ‘this’ ,point to obj1?

Well this can be achieved by arrow functions.

Before arrow function, this was done by using bind function,

This was all about ‘this’ keyword!!!

Hope it helps!

Happy learning!

Understanding Event Bubbling and Capturing!

Shrushti Polekar — Tue, 07 Jun 2022 16:14:43 +0000

Event Bubbling and Capturing are very important concepts to know if you want to have control over the events fired in DOM!

Event propagation in JavaScript takes place in 3 phases:

Event Capturing
Target
Event Bubbling(default phase) Step by step, we will understand each of these phases in detail. Consider we have some nested DOM elements, for example, something like this,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event handling</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <div id="list_container">
        <ul>
          <li id="item1">item 1</li>
          <li id="item2">item 2</li>
          <li id="item3">item 3</li>
        </ul>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

We have attached click event listeners on all the DOM elements.

container = document.querySelector("#container");
list_container = document.querySelector("#list_container");
item1 = document.querySelector("#item1");
item2 = document.querySelector("#item2");
item3 = document.querySelector("#item3");

container.addEventListener("click", () => {
  console.log("container(red) clicked!");
});
list_container.addEventListener("click", () => {
  console.log("list container(green) clicked");
});
item1.addEventListener("click", () => {
  console.log("item 1 clicked!");
});
item2.addEventListener("click", () => {
  console.log("item 2 clicked!");
});
item3.addEventListener("click", () => {
  console.log("item  3 clicked!");
});

We have something like this.

Now whenever we click item 1 we can see all the event listeners attached to the elements above item 1 (list_container and container) are executed as well.
https://thumbs.gfycat.com/IllegalCavernousDromaeosaur-mobile.mp4
We can see in the console, along with the event attached to item1, events attached to other elements above it are also executed!

This is nothing but event bubbling!

Just as a bubble bubbles at the top of the glass from the bottom of the glass, in a similar way in a web page event execution takes place from the lowest element to the topmost element!

Event capturing
Event capturing is exactly the opposite of Event bubbling!

In event capturing, events are fired from top to bottom of the DOM tree.

Whenever we click on item1 the event listener attached to the container gets executed and then the event listener attached to the list_container and finally the target (that’s item1).

Capturing functionality can be implemented by simply passing a parameter called ‘true’ in the addEventListener.

container = document.querySelector("#container");
list_container = document.querySelector("#list_container");
item1 = document.querySelector("#item1");
item2 = document.querySelector("#item2");
item3 = document.querySelector("#item3");

container.addEventListener("click", () => {
  console.log("container(red) clicked!");
},true);
list_container.addEventListener("click", () => {
  console.log("list container(green) clicked");
},true);
item1.addEventListener("click", () => {
  console.log("item 1 clicked!");
},true);
item2.addEventListener("click", () => {
  console.log("item 2 clicked!");
},true);
item3.addEventListener("click", () => {
  console.log("item  3 clicked!");
},true);

stopPropagation
We can also control the propagation by using the stopPropagation() function.

stopPropagation() stops the propagation until the place where it is declared.

container = document.querySelector("#container");
list_container = document.querySelector("#list_container");
item1 = document.querySelector("#item1");
item2 = document.querySelector("#item2");
item3 = document.querySelector("#item3");

container.addEventListener("click", () => {
  console.log("container(red) clicked!");
});
list_container.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("list container(green) clicked");
});
item1.addEventListener("click", () => {
  console.log("item 1 clicked!");
});
item2.addEventListener("click", () => {
  console.log("item 2 clicked!");
});
item3.addEventListener("click", () => {
  console.log("item  3 clicked!");
});

After using stopPropagation() with list_container, we get the following output,

Thus as we can see, event execution stopped after list_container’s event listener.

This was all about event bubbling and capturing!
Hope this article helps!

Happy learning! 😃

Prototypes in JavaScript!

Shrushti Polekar — Tue, 07 Jun 2022 15:58:17 +0000

Prototypes is one of the most important pillars in JavaScript! In this article we will understand what are prototypes ,what are global objects , what is this proto property and how inheritance works in JavaScript underneath the hood.
So lets get started without further ado,
When we create a function in JavaScript, JavaScript Engine creates two objects :-
The Function Object itself
The Prototype Object

For eg consider this,
Let say we create a function f1() as follows,

Then what JS Engine does is , it creates two objects as mentioned above,
The f1 function object itself and f1 function's Prototype Object,

Now what's this prototype that you can see inside this f1 Object?
Well, JS Engine creates a property on function Object that points to the function's Prototype Object.
We can access the f1 object directly by doing this,

However if we want to access the f1's prototype Object we can access it by using that prototype property,

Now suppose we create a new object from that f1 function

and if we access it , we can see that there is something called as proto

This proto is property that JS Engine creates for every object ! Well ,this proto property points to the Prototype Object of the function(In this case it will point to f1's Prototype Object)

We can check whether f1's prototype property and myobj's prototype property point to the same Prototype Object or not, by doing this,

as we saw above , that we can access function's prototype Object , in the similar way we can access the f1 Object itself by using a property called constructor. Constructor is a property on the Prototype Object that helps us to access the function itself.

Suppose if we want to know who created this object 'myobj' , then we what we need to do is, simply use that constructor property to know this,

Thus we get the f1 function !
We can also create a new object by using this constructor property,

This simply implies , create an object myobj2 by using the same function/constructor who created the object myobj.
Up until now we saw what is this prototype property, what is this proto property and the constructor property , what all things do they point to and what are their uses!
However it is not recommended to use proto property very often!
The Global Object
In JRE ,just as you have a global window object , in the similar way you also have a global functions. And one of those global functions is called Object. Name of the function is Object but the type is function .But since functions are Objects in JavaScript, this is also considered as an Object . I know this sounds a bit confusing!😬

The Prototype Object!
Lets create a function person and a new p1 object from it,

Looking at the Person's prototype object, makes us wonder ,who created this Person's prototype object ?
Well it was automatically created by 'new Object'! Person's prototype Object itself has proto property that points to the Global Object's Prototype.

Suppose if we try to access any property on p1 object , JS Engine will first try to find it inside p1. If it does not find it there , it will go up the prototype chain by using the proto property of p1 .
p1.proto
If it even does not find it there also , it will again go one step up the prototype chain.
p1.proto.proto
And if it does not find it there as well, then it will return undefined!
Now there's one question , is this prototype chain never ending? Does base object's prototype have a proto property as well?
Well no, it does have proto property ,but it points to null. Lets check this,

Prototypal Inheritance
Inheritance in JS is totally different than other programming languages. Its unlike classical inheritance.
Suppose if we have a Person function (as discussed above) .And now we also have a Teacher function .Teacher will have all the properties of Person.
Initially Person's Prototype as well as Teacher's prototype(proto ) property both are pointing towards base Object's Prototype.

In this case , Teacher and person are not related. Teacher will not posses any property of Person. Well to overcome this, we can make the Teacher's prototype object(proto property) to point towards Person's prototype object.

Now teacher can access all properties of person .
This was all about Prototypes and Prototypal Inheritance!
Hope this article helps!
Happy learning!😀

More about JavaScript Functions!

Shrushti Polekar — Thu, 06 Jan 2022 07:14:30 +0000

We all know functions are group of statements that perform a specific task. Functions in JavaScript exhibit various forms .We have a variety of types in functions in JavaScript , like function expression, Anonymous functions, Arrow functions and IIFE.
Lets get started with some basic function pattern which we normally see in other programming languages as well i.e. normal/regular function definition.
Syntax:

function function_name(){
//statements
}

This was pretty easy! Now lets have a look at some other types.
Function Expressions
In JavaScript we can create functions and can assign them to variables as well!
Yes , you read it right! We can assign functions to variables.
Syntax:

var variable_name =function function_name(){
//statements
}

We cannot call sayhi() directly, it results into reference error.

Also remember , function expressions are never hoisted!
So we cannot do something like this.

This results into TypeError.
Anonymous Functions
Anonymous functions are functions with no specific name.

They can be stored in a variable.
Can be returned in a function .
Can be passed in a function.

function(){
 //body of function
};

Store an anonymous function in a variable.

var variable_name = function(){
    //body of function;
}

Passing anonymous functions as an argument in JavaScript.

Now if we call myfunc inside show we get,

Returning anonymous function

Arrow Functions!
Arrow functions were introduced from ES6.

This was all for this blog!
Hope it helps!
Happy learning!

Playing around with datatypes in JS

Shrushti Polekar — Sun, 02 Jan 2022 15:31:46 +0000

One of the most important component of a programming language is its datatypes. They can be looked upon as a building block of any programming language. In this article we will play around with datatypes in JS and explore more about it!
In JavaScript one of the most interesting feature about variables is that , they are not particularly assosiated with any specific value type and they can assigned and reassigned a value any time.That is why is said that JS is a loosely typed and dynamic language.

There are primarily two types in JavaScript:-
1.Primitives
2.Objects

Primitives
Primitives are immutable.There are 7 different Primitives
1.Boolean
2.Null
3.Undefined
4.Number
5.BigInt
6.String
7.Symbol

Objects
Objects are nothing but collection of data in form of key value pairs.

typeof operator
The typeof operator helps us to find the type of any unevaluated operand. For eg,

Function and arrays are also objects in JavaScript!

BigInt
BigInt is a datatype which deals with operations on huge value of integer numbers. BigInt allows to work with numbers beyond the limit of Number primitive.
BigInt is represented by suffix n.

Note: It is not possible to perform operations on number datatype and bigInt.

Often while writting programs we need to convert data from one form to another. Here are few conversion methods.
1. Number to String
There are 3 ways to convert a number to string
consider, const no=10;

String(no)
no.toString()
no+""

2.String to Number
There are 3 ways to convert a string to number
consider, const str='10';
1.Number(str);
2.+str
3.parseInt(str)

Common Methods on Number object

Number.isInteger(3.5);            //false
Number.parseInt('5.8');           //5
Number.parseFloat('5.86');        //5.86
Number.isNaN(NaN);                //true
Number.isNaN('text');             //false
10.567.toFixed(2)                 //10.57
10.567.toPrecision('3');          //10.6

NaN
NaN is a special type of number which results by invalid mathematical operations. For eg subtracting a string and number.

Number.isNaN('text'-10)        //true

Methods on Math object.

Math.abs(-5);                 //5
Math.floor(1.6)               //1
Math.ceil(3.5)                //4
Math.round(3.67)              //4
Math.max(-5,3,8)              //8
Math.min(-5,3,8)              //-5
Math.sqrt(64)                 //8
Math.pow(5,3)                 //125
Math.trunc(-6.3)              //-6

Symbol
Symbol represents a unique identifier.Symbols are used to identify object properties and to add unique property keys to an object.

let symbol1=Symbol();

Demystifying working of a JavaScript program!

Shrushti Polekar — Sat, 01 Jan 2022 14:21:47 +0000

Learning a new programming language can be fun if we know how things are going underneath the hood. In this article we will see how things work around when it comes to execution of a JavaScript Program!
Well you might have heard that everything in JavaScript happens or takes place inside an execution context. Now what exactly is this execution context?? Well, to put it in simple terms we can say execution context is like a container that mainly contains two components viz Memory Component and Code Execution Component.

Basically, execution of a program takes place in two phases,
1.Creation Phase
2.Code Execution Phase

We will try to understand these phases with an example.
Consider the below code ,

var firstName='Shrushti';
var surname='Polekar';
function getFullName(firstName,surname){
  const name=firstName+" "+surname;
  return name;
}
var candidateFullName=getFullName(firstName,surname);
console.log(candidateFullName);

Step 1: Creation Phase
First of all a global execution context is created.
In this phase memory will be allocated to variables firstName and surname with a placeholder of undefined. The function getFullName will also get memory allocated with the actual block of code as placeholder.

Step 2: Code execution phase
In this phase the compiler will start executing the code line by line. The variables firstName and surname will be assigned the actual values ie Shrushti and Polekar. Now as soon as the compiler encounters the function call getFullName, a new execution context will be created and the again the same procedure will be repeated of memory allocation.

The function will perform the operation written in its block and return the string value. Thus the variable candidateFullName will get assigned the value -Shrushti Polekar.
After this the execution context will get discarded and remaining code will continue to execute. Finally the global execution context will also get discarded.

Thus like this the execution contexts are created , executed and discarded untill the global execution context is not finally discarded.

This was all about working of a JavaScript Code!!!
Happy Coding!