DEV Community: Panchami Thulupule

JavaScript Promises

Panchami Thulupule — Sat, 10 Jul 2021 03:06:47 +0000

What is a Promise?

A Promise is an object in JavaScript used to handle asynchronous operations. They can handle multiple asynchronous operation and provide better error handling.

A Promise is always in one of the three states.
pending - This is the initial state, we do not know if it is fulfilled or rejected.
fulfilled - This indicated that the operation has completed successfully
rejected - This indicates that the operation has failed

Why Promises ?

Promises help us deal with asynchronous code in a far more simpler way compared to callbacks.
Callback hell can be avoided with Promises.

Callback hell is resulted when a lot of code is written and executed from top to bottom without any asynchronous functions.

How to work with promises

Creating Promises

const promise = new Promise()

How to check if the promise is in pending, fulfilled or rejected state?

const promise = new Promise((resolve, reject) => {

})

Promise constructor takes only one argument. That is a callback function.
Callback function takes two arguments, resolve and reject
resolve and reject functions are typically called after an async operation

const promise = new Promise((resolve, reject) => {

    //when the promise got fulfilled
    resolve()
})

resolve is a function which is called when the state changes from pending to fulfilled.

const promise = new Promise((resolve, reject) => {
    //when the promise got rejected
    reject()
})

reject is a function which is called when the state changes from pending to rejected.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
)}

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject()
  }, 2000)
)}

promise.then()
promise.catch()

const onFulfillment = () => {
  console.log("Promise is fulfilled")
}
const onRejected = () => {
  console.log("Promise is not fulfilled")
}

The onFulfillment and onRejected are used as callback functions in promise.
Callback functions are functions that are passed in to another function as arguments

The Promise method gives us the access to two functions. They are then() and catch()

We call these functions as
promise.then()
promise.catch()

If the promise status is changed from pending to fulfilled, then() is invoked.
If the promise status is changed from pending to rejected, catch() is invoked.

promise.then(onFulfillment)
promise.catch(onRejected)

Promise Chaining

fetch(url)
.then(process)
.then(output)
.catch(handleErrors)
}

The process() function will wait for the fetch() to complete and the output() will wait untill the process() is completed.

If the fecth(), process() and output() promises are rejected, handleErrors() is called.

Conclusion

There is no guarantee of exactly when the operation will complete and the result will be returned, but there is a guarantee that when the result is available, or the promise fails, you can execute the code based on the result or handle the error if the promise is rejected.

The Magic of Event Loop

Panchami Thulupule — Fri, 09 Jul 2021 19:40:01 +0000

JavaScript is a single threaded language. This means it has one call stack and one memory heap. It executes code in the order and must finish executing a piece of code before moving onto the next.

JavaScript engine creates the global execution context before it starts to execute any code.
Global execution context holds information about the environment within which the current code is being executed.

Now let's see how stack works:

When the JavaScript engine first encounters your code, it creates a global execution context and pushes it to the stack. Whenever there is a function invocation, it creates a new execution context for that function and pushes it to the top of the stack.

The function's execution context which is at the top of the stack is executed first. When this function completes, its execution stack is popped off from the stack.

If you have a function that takes a long time to execute, it blocks all the interactions with web page such as mouse click. These functions are called blocking functions.

function task(message) {
   let n = 10000000000;
   while (n > 0){
      n--;
   }
console.log(message);
}
console.log('Start');
task('Run the task');
console.log('Done');

Output:

Start
Run the task
Done

In this example, we have a big while loop inside the task() function that runs a time-consuming task. The task() function is a blocking function.

The JavaScript engine first places the console.log() on top of the stack and executes it. Then, JavaScript places the task() function on top of the call stack and executes the function.

However, It take some time to complete the task() function. Therefore, you will see the message 'Run the task.' a little time later. After the task() function completes, the JavaScript engine pops it off the call stack.

Finally, the JavaScript engine places the console.log('Done') function on top of the stack and executes it.

This can we avoided with the help of Callback functions.

console.log('Start');
setTimeout(() => {
   task('Run the task');
}, 1000);

console.log('Done');

Output

Start
Done
Run the task

This asynchronous behavior is not part of the JavaScript language, But they are built on top of the JavaScript language in the browser and accessed through the Web APIs.

some examples of these async functions are setTimeout, setInterval, Event listeners etc.

The Magic of Event loop

The functions are pushed into the call stack in order. But the functions belonging to Web API's are sent to the browser to perform the task.
Meanwhile, the functions in callstack are executed without any delay. The functions which are executed by the browser are sent to Callback queue. The Event loop continuously check if the callstack is empty. If the callstack is empty, the functions in callback queue which are waiting to be executed are pushed into the callstack in order.

This is how the JavaScript runs asynchronous code without interrupting other activities.

Happy Learning!

Beginner's guide to GitHub

Panchami Thulupule — Mon, 07 Dec 2020 14:44:41 +0000

What is Git?

It is an open source version control software. Version control is a system that records changes to a file or set of files over time so that you can keep track of the activities you performed.

In Real life projects, multiple developers work in parallel. So they need a version control system like Git to make sure that there are no code conflicts between them.

Why do we need it?

Git makes it easy to contribute to open source projects:
If you want to contribute to other's projects, you just fork(get
a copy of) the project, make your changes, and then make a pull
request to the project owner using GitHub's web interface. This
way the project owner can look into your changes and include
these changes in their project.
To track changes in your code:
When multiple people work on a project, it’s hard to keep track
of the changes — who changed what, when, and where those files
are stored. GitHub takes care of this problem by keeping track
of all the changes that have pushed to the repository.
To showcase your work:
Are you someone who wants to attract recruiters? GitHub is the
best tool you can rely on for this. You will have a higher
chance of being recruited if you have maintained a good GitHub
account.

Set up your GitHub account

Create a GitHub account:

Download and Install GitHub Desktop.

Git Repositories

A repository is a project that contains multiple files. This repository tracks all the changes made to files in your project, building a history over time.
You can do following actions with a repository.

Create a new repository locally: Create a local repository by filling all the details.

Clone your repository: Cloning a GitHub repository creates a local copy of the remote repository. This allows you to make all of your changes locally rather than directly in the source files of the original repository.

Create an existing repository: If you have already created a repository, you can select this option and add the existing repository.

Publishing the Repository

After creating a Repository, you can publish this repository to the GitHub web interface.

Git commits

Commits are like a snapshot of your work and the changes you have made. It creates a history of every commit you make. This helps in keeping track of the changes you made to the project.

Push your changes to the main branch

After committing to the changes you have made to the project, you need to push the changes to the main branch.

Create a new branch

If you want to make a new feature but you are worried about making changes to the main project and spoiling it while implementing the feature. This is where git branches come in.
Click on the New Branch --> Give a name to the branch --> Create Branch.

Create a Pull Request

If you want to contribute or collaborate with other projects, you need to follow these steps:

Find a project you want to contribute to
Fork it

Clone it to your local system
Make a new branch
Make your changes
Push it back to your repository
Click on the Compare button After you push the changes you have made to the project, go to your repository on GitHub web interface, click on the Compare button.

Click on Create pull request to open a new pull request