This has been an issue since the beginning, especially when starting with JS. People tend to get confused when starting with something new but JS can be literally on another level.
Now I am assuming that you must have some experience or are now probably giving up or need a little hand with this.
F.Y.I. we will be discussing how JS works rather than giving a full-fledged tutorial.
If you have just begun and at least tried something THEN feel free to continue
So let’s get started
Let’s be clear about a few things
1. It’s a programming language
2. It has bracket syntax
3. It conforms to ECMAScript specification (will talk about this in some other post)
4. It’s single-threaded and synchronous (but with a twist, “LOL!”)
— (following are not of concern for now) —
5. has dynamic typing, prototype-based orientation & first-class-functions
Understanding how it works
Now let’s say you want to take a bath, firstly you will fill some water in your bucket and then will get started accordingly.
“What I am focusing over here is the chronology…!!
(one-step after another OR 1 thing completes then and only then the next thing happens),
that is you can’t take a bath before filling water”.
(This is the logic behind synchronous-systems)
NOTE: JS is like this literally but on a complicated level; “HAHA”.
So usually you write your code in something called index.js, app.js or like whatever you name it, and your JS engine(compiler for just understanding) goes from one line to the next. Yeah!!, its job is to follow the code line-by-line (like how an interpreter works).
[ But sometimes it doesn’t (will take about this in brief in a while) ]
All The Twists (what makes it challenging)
Suppose you are preparing snacks(synchronous) for everyone and then suddenly you want to listen to some songs, right?
You will halt for a sec, start your playlist and continue with your work.
(what you just did now is made things asynchronous)
In simple words, asynchronous means 1 thing doesn’t wait for another
You don’t have to wait till your till you prepare snacks before listening to some music.
And that’s it literally, this is JS
JS is designed as a synchronous programming language, but things don't happen sometimes as per our desires.
When your code is executing and in somewhere it’s taking its sweet time by waiting or something else (like a request (to a server) or something similar) it will continue executing the code even before it gets a response, and then a problem arises when this response is related to assigning some value to something and that something is empty when needed as per your logic.
The Solution… (PROMISES)
You need to learn to handle synchronous and asynchronous aspects of your logic/code.
This is where PROMISES come. Something that's devised in JS in order to handle these things.
Now I won’t start giving a tutorial on promises, but will give you a glimpse of it…
( group of instruction set 1 );
( group of instruction set 2 );
( group of instruction set 3 );
you can write it like
Promise( group of instruction set 1 )
.then( group of instruction set 2 )
.then( group of instruction set 3 );
and now things will happen in order
(full-stack engineer and developer)