1
00:00:02,300 --> 00:00:07,030
Let's start by understanding synchronous code and how Javascript works.

2
00:00:07,040 --> 00:00:13,400
You might remember that at the very beginning of the course, I mentioned that Javascript is single-threaded.

3
00:00:13,400 --> 00:00:19,520
Until now, that didn't really matter to us that much but what single threading in the end means is that

4
00:00:19,610 --> 00:00:23,240
Javascript can only execute one task at a time,

5
00:00:23,450 --> 00:00:29,720
so let's say we have a bunch of code where we log something to the console, call a function, then maybe

6
00:00:29,750 --> 00:00:32,000
in that function or somewhere else

7
00:00:32,000 --> 00:00:37,390
after this function ran, we disable some button and then we maybe run another function.

8
00:00:37,520 --> 00:00:44,600
The important thing to realize here is that all these steps run in sequence after each other,

9
00:00:44,630 --> 00:00:48,640
they're not running simultaneously next to each other, instead

10
00:00:48,680 --> 00:00:54,530
Javascript will log something to the console, then call the function and do whatever needs to be done

11
00:00:54,530 --> 00:00:56,010
inside of that function,

12
00:00:56,150 --> 00:01:01,090
then go ahead and disable that button and then call that other function,

13
00:01:01,100 --> 00:01:05,960
so these things happen after each other, not at the same time.

14
00:01:06,110 --> 00:01:12,200
We could give them a label or some ID, let's simply use a, b, c and d and then we could say that for

15
00:01:12,200 --> 00:01:20,750
example, this second block, the B block here runs after A but it blocks C from running until it's finished.

16
00:01:20,900 --> 00:01:28,190
So the code in C won't be executed until some function execute it. Now we saw it in our course projects

17
00:01:28,250 --> 00:01:33,530
already, take this code here which is actually the starting code of this module, you'll find it attached

18
00:01:33,530 --> 00:01:35,240
to this lecture here.

19
00:01:35,240 --> 00:01:41,390
Here we don't have that much code but since Javascript parses and executes our code from top to bottom,

20
00:01:41,420 --> 00:01:46,970
what happens here is that first of all, this code runs and Javascript selects this button and stores it in a

21
00:01:46,970 --> 00:01:48,070
constant,

22
00:01:48,080 --> 00:01:54,280
then only once this first line finished, the second line is executed and this task is performed

23
00:01:54,500 --> 00:01:59,300
and then this function declaration as you learned works a bit differently, that happens right at the

24
00:01:59,300 --> 00:02:05,870
start when Javascript reads the file at the beginning but then in the execution process so to say, this

25
00:02:05,870 --> 00:02:09,290
line executes after these two lines executed.

26
00:02:09,350 --> 00:02:14,840
So that's also important for us here because we need the button to be available in order to add an event

27
00:02:14,840 --> 00:02:15,450
listener,

28
00:02:15,470 --> 00:02:19,440
so we rely on this order which is enforced by Javascript.

29
00:02:19,670 --> 00:02:24,920
If it would be multi-threaded, it could maybe execute all tasks at the same time

30
00:02:24,950 --> 00:02:30,110
and here this would actually be bad because then we could not rely on the button to be available when

31
00:02:30,110 --> 00:02:30,640
we need it

32
00:02:30,650 --> 00:02:35,900
because if this line is executed at the same time as this line, well then the button might not have been

33
00:02:35,900 --> 00:02:40,030
selected yet and therefore adding an event listener to it would maybe fail.

34
00:02:40,430 --> 00:02:46,460
It's not something we have to worry about though because as I just explained, Javascript is single-threaded

35
00:02:46,580 --> 00:02:49,100
and therefore this order is guaranteed.