Introduction

Let us learn about some of the most curios and important concepts of java script such as async/await, closures, promises, error handling and more...

Promise

A promise is a powerful feature in java script which is like a holder for objects which are not known at the time of creation or immediately when a function is called. We can understand this with an example. The fetch function in java script always returns a promise. Consider I want to collect data from my previous blogs and find a specific blog called next js, the we can use a fetch and chaining results to get our output.

fetch("https://blogs")
.then((res)=>res.json())
.then((data)=>console.log(data.nextjs))
.catch((error)=>console.log("search for other articles")

Before we look into the code further let's look into the states of promise.

We can chain a number of actions to the result using the .then(). At first then command we are converting the result to json as many API store data as json, then we are printing our required article. The .catch() is used to do error handling if the requested object is rejected due to unavailability or any other reason. We can also create a new promise and can use it inside a function

let promise = new Promise(function(resolve, reject) {
try{
  setTimeout(() => resolve("Successful"), 1000);
}catch(e){
reject(new Error("An error occured")); 
}
});

We use setTimeout() here as it is the basic concept of promises, getting delayed results. But there may also be times when we can resolve without setTimeout such as in cached resources.

Async/Await

Async refers to asynchronous and is a keyword used to make functions asynchronous. Consider the following function.

async function f() {
    console.log('Async ');
}
f();
console.log("Normal");

This will have result as ,

Normal 
Async

The await keyword is used to wait for the promise to resolve and get the data instead of using chaining methods, example

async function f() {
    console.log('Async ');
}
await f();
console.log("Normal");

This will give the result as ,

Async
Normal

Closures

A closure is the combination of a function and references to a global or surrounding state called the lexical environment. The main use case of closure will be encapsulation, such as making part of code inaccessible by other components.

function closure() {
  var name = 'outer';
  function Inner() {
    console.log(name);
  }
  return inner;
}

var Func = makeFunc();
Func();

In this code we don't have direct access to the Inner function but we can call the inner function with the closure function. The variable name is an lexical environment variable to the inner function and therefore we call this function as closure.

Conclusion

I strongly encourage learning the ES6 syntax by doing hands on project.