Promises
We understand the concept of callback but what will happen if your code will have callbacks within callbacks within callbacks and it goes on? Well, this recursive structure of callback is called ‘callback hell’ and promises to help to solve this kind of issue. Promises are useful in asynchronous JavaScript operations when we need to execute two or more back-to-back operations (or chaining callback), where each subsequent function starts when the previous one is completed. A promise is an object that may produce a single value some time in the future, either a resolved value or a reason that it’s not resolved (rejected). According to the developer.Mozilla “A Promise is an object representing the eventual completion or failure of an asynchronous operation. Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.”. Promises resolve the issue of ‘callback hell’ which is nothing but a recursive structure of callbacks (callbacks within callbacks within callbacks and so forth).
A promise may be in three possible states…
- Fulfilled: When the operation is completed successfully.
- Rejected: When the operation is failed.
- Pending: initial state, neither fulfilled nor rejected.
Example: Let’s discuss how to create a promise in JavaScript with an example.
const promise = new Promise((resolve, reject) => {
isNameExist = true;
if (isNameExist) {
resolve("User name exist")
} else {
reject("error")
}
})
promise.then(result => console.log(result)).catch(() => {
console.log(‘error!')
})
Output:
User name exist
Promise {<resolved>: undefined}
Consider the above code for a sample promise assumed like doing the ‘isNameExist’ operation asynchronously, In that promise Object arguments as two functions resolve and reject. If the operation is successful which means ‘isNameExist’ is ‘true’ then it will be resolved and display the output “User name exist” else the operation will be failed or be rejected and it will display the result ‘error !’. You can easily perform chaining operations in promises where the first operation will be executed and the result of the first operation will be passed to the second operation and this will be continued further.
7 JavaScript Concepts That Every Web Developer Should Know
JavaScript is Everywhere. Millions of web pages are built on JavaScript and it’s not going anywhere at least for now. On one side HTML and CSS give styling to the web pages but on the other side, it’s the magic of JavaScript that makes your web page alive. Today this language is not just limited to your web browser. You can also use it for server-side applications. Isn’t it cool to use a single language for both client-side and server-side applications? A single language fulfills both of the purposes and this is the main reason TONs of job postings are there for JavaScript developers in the tech industry.
According to the Stack Overflow Developer Survey 2019, JavaScript is the #1 programming language. The language is widely used by 95% of all websites Whether it’s a small startup or a big company, most of them are working on some kind of website or an app that requires a good knowledge of this language. A lot of frameworks and libraries are there for JavaScript. These frameworks and libraries can be easily learned if your JavaScript fundamentals are clear. A lot of concepts are confusing and overwhelming for developers but a good knowledge of these concepts will help you in the long run. Frameworks and libraries come and go but the fundamentals always remain the same. It’s easy to build any kind of application and learn any framework and libraries if the fundamentals are clear. Also, it will help you in interviews as well. Let’s discuss some of the basic concepts of JavaScript which are important to learn for any JavaScript developer. Become a good front-end developer with w3wiki JavaScript Foundation – Self-Paced and learn all the aspects of web development with ease.
These are the 7 concepts:
Table of Content
- Scope
- IIFE (Immediately Invoked Function Expression)
- Hoisting
- Closures
- Callbacks
- Promises
- Async & Await