DEV Community: Sushanta Gupta

Closure, A Confused topic

Sushanta Gupta — Wed, 01 Jun 2022 15:42:38 +0000

The closure was really a scary topic for me. Fortunately, I found the video of Namste Javascript [(https://www.youtube.com/watch?v=qikxEIxsXco)]of the closure concept and I believe I understand closure.

First let's observe the following code block
`
function outer () {
let a = 5;
function inner (){
console.log("From Inner",a)
}
return inner;
}

const myFunc = outer();
`

Here, the outer function is returning the inner function. We are assigning the returned result of the outer function to the myFunc variable. There is nothing new till this point.

However, what happens when we assign the returned result of the outer function. If we console.log myFunc we will see the following result.
ƒ inner (){ console.log("From Inner",a) }
But if we call the myFunc() then, we get the result 5. How is it possible?

The question is how inner function gets the value of a, which is declared in its parent scope?

The answer is when the inner function is returned, then not only the function is returned but also the variable is returned. This is called closure.
Imagine this way,

So a closure is like an envelope/box that contains a function and the variables required for the function.

Simply, closure is a function along with lexical scope bundled together.
Hope you have understood the closure concept.
Thanks for reading. To make me inspired, please write your feedback in the comment section.

How to send and receive data in Socket IO?

Sushanta Gupta — Mon, 25 Apr 2022 00:55:30 +0000

Socket.io is a library to abstract the WebSocket connections. According to the official website of socket io, Socket.IO is a library that enables low-latency, bidirectional and event-based communication between a client and a server.

What does it mean by event-based? We can send and receive data in Socket by using the following code block. We can send an event from the server and receive it in the client and vice-versa.

To Receive Data
socket.on("message", (hello) => {
console.log(hello); // world
});

To send Data
socket.emit("message", "hello");

In general, the code for sending and receiving data is
Receiving Data: socket.on(eventName, listenerFn)
Sending Data : socket.emit(eventName, Data)

We have to use same eventName for sending and catching data. There are some pre-defined events in Socket Io but we can also make our own custom events provided that the same event name is to be used in both client and server.

Simple Overview of testing

Sushanta Gupta — Wed, 13 Apr 2022 20:31:44 +0000

In the application development cycle, Testing is an integral part. It is a process of checking whether our code works expectedly or not. Although we can do manual checking of our code, it is not a recommended way. We need a pre-built system to test our code appropriately. In addition, testing saves our time and also improves our code.

The steps for testing an application are as follows:

Code > Outcome > Test > If (Success) ? “Go for production”: If(failure)? Make a change in the code

There are different kinds of tests available for us. They are unit tests, Integration tests, and E2E tests. Generally, we have to write thousand of unit testing codes. Compare to unit testing, the number of integration tests is smaller. Among the three, we should write a few e2e testing.

Easy Explanation of Reduce Function

Sushanta Gupta — Wed, 23 Feb 2022 09:32:37 +0000

Suppose we have an array of numbers, which is denoted by let A= [1,2,3]. We want to find the total of all array elements. In this case, we can use for loop.But we we may also use reduce function. We may also use the array.prototype.reduce function to do this task.

array.reduce function takes two arguments. One is a callBack function and other is initial value.

myArray.reduce(callBack,initialvalue)

This callback function takes four arguments-previousvalue, current value,currentIndex, Array. The first two arguments are required, and the last two are optional.

const callBack = (
previousvalue, //required
currentvalue, //required
currentIndex, //optional
Array //optional
)=>{
}

Example:

const myArray = [1,2,3]
const myFunc = (previous,current)=>{
return previous+current
}

const result = myArray.reduce(myFunc,0)

The final result will be 6, but this result is dependent on the initial value.

We will try to understand why this result is dependent on the initial value. As there are three elements, reduce method will iterate three times.
In the first iteration, the previous-value and current-value is zero and one respectively. Finally, its sum is be stored in the total value. In the next iteration, the total value becomes the previous value, and the current value is the next array element, and its total is stored at the total variable. Thus the loop continues until the last array element.

Absolute Position vs Relative Position in CSS

Sushanta Gupta — Mon, 21 Feb 2022 01:59:16 +0000

When I started learning web development, some topics confused me. Among them, CSS positioning was one of them. I invested a certain amount of time for a clear idea about this topic. What I have understood, I will write in the following paras. I will not use any technical jargon and try to avoid complexity.

We find two kinds of positions in CSS-absolute and relative.
Relative Position:

Supposer, there are four divs, and these divs are denoted by 1, 2,3, and 4. The first, second, and third div is smaller, and the fourth is larger. Larger div surround the smaller div.
HTML markup is given below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            padding:2rem;
            width:300px;
            height:120px;
            border:1px solid red;
            display:inline-block;
        }     
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div id="" class="innerDiv"> Button 1 </div> <!--Number 1-->
        <div class="innerDiv"> Button 2 </div> <!--Number 2-->
        <div class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>
</html>

We will get the following figure if we look at the browser.

Now we add id (#relative) to Number three div and add CSS inside the style tag.
Relative Position

<style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            padding:2rem;
            width:300px;
            height:120px;
            border:1px solid red;
            display:inline-block;
        }   
        #relative{
            position:relative;
            top:60px;   
        }  
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div id="" class="innerDiv"> Button 1 </div> <!--Number 1-->
        <div class="innerDiv"> Button 2 </div> <!--Number 2-->
        <div id="relative "class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>

In this case, the third div moves downward from its place. But the third div does not leave any space in the current position. Hence, other component does not change their location.

Absolute Position
Now we add id (#absolute) to the third div and add CSS inside the style tag.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            width:300px;
            height:119px;
            display:inline-block;
            box-sizing: border-box;
        }
        #absolute{
            position:absolute;
            top:60px;   
        }
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div  class="innerDiv"> Button 1 </div>
        <div class="innerDiv"> Button 2 </div>
        <div id="absolute" class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>
</html>

As the outerDiv has no position then, the third div uses the document body and moves along with the body.

If the outerDiv has a relative position, then the third div uses this div and moves in reference with this div.

You can see a subtle difference between the above two images.

According to w3school, An element with position: absolute; is positioned relative to the nearest positioned ancestor.
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.