One of the funniest and most difficult topics for beginners I've come across in JavaScript is JavaScript Promise. Sometimes, you might come across Developers who think Promises can't be understood without prior knowledge about callbacks but I do not hold that opinion. They're very different, yet very much related. It would have been a lot weirder if it were only me but I've observed that very many other newbies have a problem or two with it too. In this article, I will be breaking JavaScript Promises to the most simplest detail you'd be coming across.

In essence, Promises in English simply are things we might expect to happen. A promise may be "fulfilled" or "broken" and the same goes for JavaScript Promises. Now, if you're reading this article, you most likely have learnt about variables in JavaScript. If you haven't, take the approach of variable storage in other programming languages as an example if you know those. It's pretty straightforward, isn't it?

In JavaScript, we save a variable with any of keywords var, let or const. Something like, let name = Elijah. With normal variables, we already have a data - what we essentially want to store in them. We want numberOfStudents to be 12 or we want name to be "Elijah". Just data storing, you know? And that's it. We already know what we want, we have it and we have stored it in the variable name of our choice; numberOfStudents and name in our respective cases. But imagine we know what we want but we just don't have it at hand that immediately. We know it but we can't immediately provide it. There you are, JavaScript Promises!

Basically, the easiest way to create a promise is to use the fetch method. At least, for me. You can use the constructor method too but that's coming later. Let's say we want to get a particular data about something from a website and use it in our project, how do we do that? The fetch method is your go-to.

Now, since it's a data, you would want to store it in a variable, thereby creating a promise. Why? Because you simply don't have the data at hand! Can you relate that to how I defined promise in the previous paragraph? There it is; something that is supposedly coming. In fact, you might not even get the data if for instance, the network fails or the link gets broken among many other possibilities. In essence, using the fetch method in JavaScript language immediately creates a Promise. Take a look at this example:

Typical Promise with JavaScript fetch methodFor each of the above variable examples - when you log them both to the console - they'd return whole lot of data packed in an almost discreet variable called Promise rather than an explicitly expected value like maybe banana or 15. Now, you might be wondering what the logged "Gotten" is doing there. I put it there to show you the distinct part of Promises: asynchronicity - the state of being asynchronous.

Basically, JavaScript runs line by line but when it encounters a promise like our fetch method that will be saved in our address variable or function, it will skip and rather do it underground action while also continuing with other synchronous actions - actions that are not Promises.

Also, I mentioned about another way of creating JavaScript Promises where I said we do that with Promise Constructors. That's easy since you now understand what the fetch method does and how it works. Here's how a Promise constructor does the exact same thing with basically the new and Promise keywords.

If you run this program in your console, it will return a similar result as to the one you saw the other time up there - just as discreet. It will be classified a Promise and to test that out, you can either try putting the console.log("Game starts") at the end of the end of the setInterval function but in the end, it'd run first. Get that now? Or just check the result of your logged game. That's it! It's that simple, really.

A promise constructor has access to two variables, resolve and reject, that get called based on the results of our expected data. If data is successfully gotten, we specify what we want to do with our resolve variable like in the code above. Otherwise, let's say we spelt random wrong or just make an unexpected error, the reject variable comes just in handy with whatever we specify for it. Either ways, a promise only gets fulfilled or not.

Now, you usually can't access data in a Promise that easily or sometimes, you need to perform certain actions before gaining access to them especially when you use the fetch method which I can promise you you will be using a lot of times if you're going to keep on writing JavaScript code. Either ways, worry less. We'd get the simplification of that across soon too. For now, good luck with your JavaScript Study! Oh, I'm very much open to questions too. Thank you.