Forem: Abhishek Jain

Introduction to Promises in JavaScript.

Abhishek Jain — Fri, 28 May 2021 13:46:15 +0000

I promise that you will have a good understanding of promises by the end of the article 😁.

What is a Promise

A promise in javascript is just like a promise we make in our lives. It refers to an event that will occur in the future.
Promises in javascript are used to handle asynchronous operations. Promises have three possible states -

Pending (Initial State)
Fulfilled (Successful)
Rejected (Failed)

When we make a promise, its state will be pending till either it is fulfilled or rejected. If fulfilled, its value will be the value it resolves with, and if it encounters any error, its value will be the value it rejects with (the error object).

For example, when we make API requests to the server, it immediately returns a promise with pending state. If the API call is successful, the state of promise changes from pending to fulfilled, and if the API request fails, then its state changes from pending to rejected.

Creating a Promise in Javascript

const promiseExample = new Promise((resolve, reject) => {
  const condition = true;
  if (condition) {
    resolve("Resolve with Any type of data (objects, arrays, strings, etc...");
  } else {
    reject("Error description.");
  }
});

So, we can create a promise by using the new Promise() constructor. It takes a function as an argument. This function takes two callback functions, resolve and reject. Whenever you want to fulfill the promise, you can call the resolve callback function and pass the value to it. To reject a promise, call the reject callback, providing some error message.

Using the Promise

We can use the above promise creation example.

.then()

const promiseExample = new Promise((resolve, reject) => {
  const condition = true;
  if (condition) {
    resolve("Promise Fulfilled.");
  } else {
    reject("Promise Rejected.");
  }
});

promiseExample.then((result) => {
  console.log(result); // Promise Fulfilled.
});

So, the .then() method takes a callback function that executes whenever the promise resolves (or is fulfilled). The callback itself takes a parameter to store the actual result returned from the promise.

Note: The .then also takes a second parameter, a callback function, to handle errors, but there's a better way.

.catch()

promiseExample.catch((err) => {
  console.log(err); // Promise Rejected.
});

The .catch() method also takes a callback that executes whenever the promise rejects (or fails). This callback takes an error parameter to catch the error information.

Chaining of Promises

Suppose we have to perform multiple asynchronous tasks. In that case, we use promise chaining.

// Resolve promise after 1 sec
const promiseExample = new Promise((resolve, reject) => {
  setTimeout(() => { 
    resolve("data of 1st Promise");
  }, 1000);
});

promiseExample
  // 1st .then()
  .then((dataOfFirstPromise) => { 
    console.log(dataOfFirstPromise); // data of 1st Promise

    // simulating API call which resolves after 1 sec.
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("data of 2nd Promise");
      }, 1000);
    });

  })
  // 2nd .then()
  .then((dataOfSecondPromise) => { 
    console.log(dataOfSecondPromise); // data of 2nd Promise
  })

  .catch((err) => console.log(err));

Few things to note here -

The .then() and .catch() methods always returns a promise so that we can again use .then() and .catch() on them and chain the promises.
In the above example, we use two .then() methods. So, to consume the result of the first .then() method, we always need to return that value from it. In this case, we return a promise from the first .then() method.
We use .catch() to catch the error if it occurs in any of the promises. This is the main reason we use .catch() instead of the second parameter of .then(). The .catch() method always catches the error either if it occurs in promise or the .then() method.

In the above example, we first create a promise which resolves after 1 second. After that, we call .then on the promise and get the result of the first promise in parameter dataOfFirstPromise. Now, if we want to fire another API request only after the 1st promise resolves, we can do that here. So we simulate API request with 2nd promise that resolves after 1 second, and we can get the result of 2nd promise in the 2nd .then() method. You can chain as many .then() 's and.catch() 's as you want.

That is all about Promise chaining.

Well, this was a brief introduction to promises. Thanks for reading.

Closures in Javascript.

Abhishek Jain — Fri, 26 Mar 2021 13:19:59 +0000

Closures in javascript is one of the many questions normally asked in javascript interviews.

What is a closure?

whenever a function is created, it forms a closure with the outer functions' scope. Think of that closure as a pack of All the variables of the outer function scope.

Let's understand this with an example.

  function createAdder(firstNum) {

    return function (secondNum) {   //The closure function
      return firstNum + secondNum;
    };

  }

  let addOne = createAdder(1);

  console.log(addOne(10)); // 11
  console.log(addOne(2)); // 3

let's understand what's happening in the above code.

First we define a function createAdder that takes firstNum as a parameter.
Then, we return an anonymous function that takes a secondNum as a parameter.
Now, we declare addOne variable, with a call to createAdder function, with firstNum parameter value being 1.

      // so now the value of addOne should be -

      addOne = function (secondNum) {   //The closure function
                 return firstNum + secondNum;
               };

so now, when we call addOne(10). how does this addOne get the value of firstNum? It's because of closure.
so when the anonymous function (returned function) is created. It looks for parent variables. It finds firstNum variable with value 1 and forms a closure with it (saves the variable) so that it can access the firstNum variable later.
so the addOne(10) function returns 11. Because it already has the firstNum's value as 1.

Now, I think you understand closure, Let's look at a practical example of where we can use closure.

In the above example, the updateClickCount variable is assigned to a IIFE (immediately invoked function expression). So, the IIFE calls itself and returns an anonymous function which is finally assigned to updateClickCount.

Now, this anonymous function forms a closure with the parent function so that it has access to the parent function's variables i.e. counter and p.

When we click, it calls the updateClickCount which references to the anonymous function, increments the counter and updates the textContent of p.

Well, this is it from my side. See you soon 😁

Debouncing in Javascript.

Abhishek Jain — Tue, 16 Feb 2021 15:05:49 +0000

Debouncing is a pattern that allows delaying execution of some piece of code until a specified time to avoid unnecessary CPU cycles, API calls and improve performance.

Why debouncing?

One word "Performance".

Suppose, you are building an e-commerce application. There you have to implement a search bar for searching products And when the user types in a character, an API call is made.

Look at the example below.

In the above example, we're having a simple searchBar and a count of API calls made. As we type in the searchBar, the count of API called increases with each character. But that's not what we want to happen. What we want is to wait for the user to stop typing. As soon as the user stops typing then we want to make the API call.

so, how can we fix this? - here comes debouncing into play.

Final version with debouncing.

Pretty cool huh?

The debouncing function

Take a look at this debounce function we implemented above.


function debounce(fn, delay) {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(), delay);
  };
}

What we are doing here is, initialize a timer then return a function. As soon as the user starts typing the function executes -:

First it clears the timer if it's initialized.
then it assigns the timer setTimeout function, which will run after 1 second if it is not cleared.
if the user types any character within 1 second the function will be called again. But in the above step, we already assigned the setTimeout function to the timer variable. So the clearTimeout will clear the function from the timer variable and also assign a new setTimeout function to the timer variable.
if the user didn't type and 1 second has passed, the function in setTimeout will execute and make the API call.

That's it.

The full version of the debounce function with this and argument binding is -:

function debounce(fn, delay) {
  let timer;

  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(context, args), delay);
  };
}

Well, this is it from my side. See you soon 😁

Introduction to Event delegation in JavaScript.

Abhishek Jain — Sat, 19 Dec 2020 11:14:12 +0000

Hello devs, let's understand event delegation.😁

To understand event delegation, firstly, we'll need to get a hold of how the event listeners work.

Look at the code below.

const sampleDiv = document.getElementById("sampleDiv");
sampleDiv.addEventListener("click", function (event) {
  alert("Sample Div clicked");
});

Woohooo, We've added an event listener.
Things to note in the above code -

Browser always provides the event object as a parameter for the callback function.
The Event object provides many properties, But we're going to focus on the event.target and event.currentTarget properties.

Let's assume a situation

Suppose a simple todo app.

//HTML
<div id="sampleDiv"></div>
<button id="AddBtn">Add todo</button>
//NOTE: some basic CSS is applied on these elements.

//JavaScript
<script>
  const sampleDiv = document.getElementById("sampleDiv");
  const AddButton = document.getElementById("AddBtn")
  AddButton.addEventListener("click", function (e) {
        let todo = document.createElement("p");
        todo.className = "todoToRemove";
        todo.textContent = "Click me to remove";
        sampleDiv.appendChild(todo);
  });
</script>

And the code above does this -

We want to click on the todo(the paragraph) to remove the todo. so, I think that we can attach event listeners to each todo and remove todo when it is clicked like this-

const Todos = document.getElementsByClassName("todoToRemove");
for (let i = 0; i < notes.length; i++) {
  const element = notes[i];
  element.addEventListener("click", function (e) {
    element.remove()
  });
}

But, It doesn't work.
Since we are adding the todo dynamically through our javascript, the above code runs firstly, but there are no todos so that listeners are attached to any of them.

So, How can we fix this?

Here comes the concept of event delegation. Theoretically, what happens in event delegation is we attach the event listener to a parent element. We check for the event.target property, which results in the actual element on which the event has triggered.

So, the key takeaway is event.currentTarget is the actual element on which the event listener is attached. And, event.target is the element on which the actual event happened.

Fixing the problem with event delegation

We can fix the todo removing problem with this simple code -

sampleDiv.addEventListener("click", (event) => {
   if (event.target.matches("p")) {
      event.target.remove();
   }
});

//NOTE: the remove function have less support on legacy browsers. so, you can also use this line inside if statement - 
event.currentTarget.removeChild(event.target);

And this works perfectly.

We added an event listener to the parent and checked if event.target is a p tag. If true, then we call the remove function on it to remove it from the dom tree.

This whole concept of adding an event listener to a parent is called event delegation.

That's it from my side. Till then 👋👋

Features you may not know about Chrome Dev-Tools

Abhishek Jain — Sun, 20 Sep 2020 16:52:51 +0000

We all use chrome dev tools pretty much daily. But here are a few features I wish I knew earlier that could save me time.

1: Change colors with color picker

Did you know? Chrome has an inbuilt color picker

To get this, open dev tools and click on the color you want to change - you will see the pen icon, click on it and move it then click on the color you want it to be changed with. You can also copy the color by clicking on it(right side of the pen icon).

2: Simulate Slow internet

You may or may not already know about it. So let me tell you. It can be very useful for testing purposes.

You can also add custom network speeds according to your needs in the custom tab.

3: Get Material colors

Searching for material color palettes? Don't! It's already available in the dev tools.

You can also long-press right click to view more available shades.

4: Check CPU usage by a website

This feature is available in the performance monitor tab of dev tools. Open dev tools press esc and follow this -

As you can see it tells real-time CPU usage. You can also check other features like js heap size etc.

5: Pretty print API data.

When working with lots of data with API, we have to log and view the data. That will yield JavaScript Object (JSON), which in the case of 2D arrays is going to be hard read and hard to find useful information in. But there's a simple fix for that:

console.table()
All it takes is to replace console.log with console.table. This function can easily display 1D and 2D arrays, but what makes this function extra useful is that it can also correctly displays column names and on top of that it also allows you to sort by each of these columns.

Bonus:

document.designMode = "on"

This is a fun one. You can do almost anything with this feature. Just type document.designMode = "on"
and see the magic.

Change dev tools theme:

We developers love dark themes, dev tools also got it. Just click on the settings icon in dev tools and the first option you'll see is the theme.

This was it for today. See you soon.

List Comprehension and Creating lists from range function in Python🤙🤙

Abhishek Jain — Sat, 04 Jan 2020 18:52:40 +0000

The list is the most versatile python data structure and stores an ordered sequence of elements, just like the to-do-list.In Python, Lists are mutable, meaning that the details can be altered, unlike tuples or even strings. These elements of a list are called items and can be any data type.

Now for understanding this article, we need to understand the range() function.

    my_list = list(range(0,10,2))  #my_list becomes [0, 2, 4, 6, 8]

So, the range() function creates a sequence of numbers. First parameter of range() function is the starting number, the second parameter is number to stop before it and the third parameter is steps between these numbers(By default it is 1).

Now, we are going to look at some awesome tricks we can do on the lists in python ...

So, let's create a list first.

    my_list = list(range(1,10,2))  #creates my_list with the values of [1, 3, 5, 7, 9]
    print(my_list[2])  #prints the value at given index i.e. 5

Now, we know that we can get the desired value by index. Here comes the cool part, we can give a range in the [] brackets And get the values within that range. For example-

    print(my_list[0:4])  #Prints [1, 3, 5, 7]

The first parameter 0 means the starting point. The second parameter means how many numbers you want to get. We can give the 3rd parameter to get the interval also.

Now, coming back to list comprehension in python. First, let me tell you the problem list comprehension is trying to solve.

Suppose we have given a list of string.

names = ["react", "angular", "ember"]

and we need to use upper case on every string

   upper_case_names = []

   for name in names:
       upper_case_word = name.upper()
       upper_case_names.append(upper_case_word)  #["REACT","ANGULAR","EMBER"]

What if we could do the above code in one line only! So, here comes the list comprehension.

upper_case_names = [name.upper() for name in names]  #["REACT","ANGULAR","EMBER"]

And Done!

Explanation: We start with the empty list []. Then on the right-hand side, we put the iterator or conditional, and on the left side, we put statements that we need to execute. That's it.

You can do so many cool stuff with the list comprehension.

And that's it for this article.

Data Structure and Algorithms: Palindrome String.

Abhishek Jain — Tue, 10 Dec 2019 09:58:11 +0000

Hey there, today we are gonna check if a string is Palindrome or not. Now, before doing that we need to understand what a palindrome is...

Basically a palindrome is defined as a string that is written the same forward and backwards. For example -: abcdbca, if you read this from backwards it will the same.

So, how can we implement this algorithm in python?
Well, it's just a few lines of code in python...

def isPalindrome(string):
    reversed_string = ""
    for i in reversed(range(len(string))):
        reversed_string += string[i]
    return string == reversed_string

In the above code, we defined a function and it takes a parameter of string. In the second line, we define a variable reversed_string and assign it to an empty string. In the third line of code, we start a for loop with a range of length of the string in the reversed order, Because we want the reversed string of the input string. In the fourth line of code, we assign the input order of string in reversed order to the reversed_string variable. In the fifth line of code, we check if input string is equal to the reversed_string if it then returns True, else returns False.

Hey, it's my first article. I hope you liked this article. I will be back with more amazing content until then enjoy.