1
00:00:00,350 --> 00:00:04,440
Tasks in real life are often
completed in an asynchronous way.

2
00:00:04,440 --> 00:00:08,520
We really can't do two or
more things exactly at the same time, but

3
00:00:08,520 --> 00:00:12,310
we can be efficient in how
we switch tasks and context.

4
00:00:12,310 --> 00:00:14,740
For example, we don't always wait for

5
00:00:14,740 --> 00:00:18,810
one task to be completely finished
before moving on to the next.

6
00:00:18,810 --> 00:00:21,540
If you're doing chores for instance,
you might make the bed and

7
00:00:21,540 --> 00:00:24,550
vacuum while waiting for
the dryer to finish.

8
00:00:24,550 --> 00:00:27,460
Being able to get other
work done in the meantime

9
00:00:27,460 --> 00:00:30,310
is the basis of asynchronous programming.

10
00:00:30,310 --> 00:00:33,690
To better understand what asynchronous
code is and why it's necessary,

11
00:00:33,690 --> 00:00:37,240
you should also understand
what synchronous code is.

12
00:00:37,240 --> 00:00:41,390
Let's say that you're making breakfast,
it consists of three main tasks.

13
00:00:41,390 --> 00:00:45,270
Make two hard boiled eggs,
make toast, and make coffee.

14
00:00:45,270 --> 00:00:48,290
First, let's have a look at how you
might approach preparing breakfast

15
00:00:48,290 --> 00:00:52,425
synchronously, or
by completing one task at a time.

16
00:00:52,425 --> 00:00:54,945
You begin by boiling the water for
the eggs.

17
00:00:54,945 --> 00:00:59,005
Once the water starts to boil,
you carefully drop in one egg.

18
00:00:59,005 --> 00:01:02,075
You wait for that egg to finish cooking,
then you peel it.

19
00:01:02,075 --> 00:01:06,330
Next, you drop the second egg into
the water and follow the same steps.

20
00:01:06,330 --> 00:01:09,730
Once you've completed your egg cooking
duties, you move on to making toast.

21
00:01:09,730 --> 00:01:12,570
You get a slice of bread,
place it in the toaster, and wait for

22
00:01:12,570 --> 00:01:14,650
the toasting cycle to complete.

23
00:01:14,650 --> 00:01:16,800
Finally, you turn on the coffee maker,
wait for

24
00:01:16,800 --> 00:01:19,490
it to heat up, then start making
coffee by going through all

25
00:01:19,490 --> 00:01:22,400
the steps necessary to brew your
favorite coffee until it's done.

26
00:01:23,490 --> 00:01:26,720
This might sound like an inefficient
way to make breakfast.

27
00:01:26,720 --> 00:01:30,000
This approach can take a considerable
amount of time, leaving you with

28
00:01:30,000 --> 00:01:34,850
no option but to wait for one task to
complete before moving on to the next.

29
00:01:34,850 --> 00:01:38,460
Now, let's look at how you might
make breakfast asynchronously,

30
00:01:38,460 --> 00:01:40,970
like you probably would in real life.

31
00:01:40,970 --> 00:01:43,580
You begin to boil the water,
then you start to get

32
00:01:43,580 --> 00:01:46,240
other work done in the meantime
while the water gets to a boil.

33
00:01:46,240 --> 00:01:49,560
For instance, you might get your bread,
place it in the toaster, and

34
00:01:49,560 --> 00:01:52,040
turn on the coffee maker
to let it heat up.

35
00:01:52,040 --> 00:01:54,900
Once the water starts to boil,
you drop in both eggs,

36
00:01:54,900 --> 00:01:58,840
maybe you even set an egg timer to let you
know when they're cooked to your liking.

37
00:01:58,840 --> 00:02:01,250
While the eggs cook,
you might start to make coffee and

38
00:02:01,250 --> 00:02:03,940
maybe take on other
tasks like feed the cat.

39
00:02:03,940 --> 00:02:05,180
After the eggs are cooked,

40
00:02:05,180 --> 00:02:07,910
you begin toasting the bread
while you peel the eggs.

41
00:02:07,910 --> 00:02:11,970
Finally, you place your breakfast on
a plate and pour yourself a cup coffee and

42
00:02:11,970 --> 00:02:13,450
enjoy your breakfast.

43
00:02:13,450 --> 00:02:15,980
Making breakfast seems more
efficient this way, doesn't it?

44
00:02:17,020 --> 00:02:18,900
In a synchronous programming model,

45
00:02:18,900 --> 00:02:21,830
two or more things cannot
happen at the same time.

46
00:02:21,830 --> 00:02:25,550
Only one thing is able to run
to completion at any given time.

47
00:02:25,550 --> 00:02:27,600
That's like waiting for
the water to boil, and

48
00:02:27,600 --> 00:02:31,320
each egg to cook one at a time before
you can even turn on the coffee machine.

49
00:02:32,470 --> 00:02:37,280
On the other hand, in an asynchronous
model a block of code can start to run,

50
00:02:37,280 --> 00:02:40,160
and even if that block of code
is expected to finish what it

51
00:02:40,160 --> 00:02:44,020
needs to do at some point later,
other code is able to run in the meantime.

52
00:02:45,020 --> 00:02:48,310
When that chunk of code is finally
ready to complete what it needs to do,

53
00:02:48,310 --> 00:02:52,100
the program or the JavaScript engine for
example, gets back to it and

54
00:02:52,100 --> 00:02:53,610
executes that task.

55
00:02:53,610 --> 00:02:56,350
That's like making coffee and
toast while your eggs cook and

56
00:02:56,350 --> 00:02:59,020
getting back to the eggs
when the timer goes off.

57
00:02:59,020 --> 00:03:02,740
Not letting one task block
the completion of another task

58
00:03:02,740 --> 00:03:06,650
is how JavaScript can seemingly
do more than one thing at a time.

59
00:03:06,650 --> 00:03:07,690
As you'll learn,

60
00:03:07,690 --> 00:03:12,220
this asynchronous behavior is necessary
because the kind of tasks JavaScript is

61
00:03:12,220 --> 00:03:17,340
asked are often time consuming,
like making network requests for example.

62
00:03:17,340 --> 00:03:20,660
Now that you have a better understanding
of the differences between synchronous and

63
00:03:20,660 --> 00:03:22,320
asynchronous code, in the next video,

64
00:03:22,320 --> 00:03:25,030
you'll look at real life
examples of both in the browser.