1
00:00:00,550 --> 00:00:07,870
Welcome back on Pace Elsworth, and we're on to listen for hoisting hoisting in JavaScript is this idea

2
00:00:07,870 --> 00:00:13,660
that all of the declarations for functions and variables are moved to the top of the scope.

3
00:00:14,620 --> 00:00:19,510
So basically, first thing's first, it's going to read your code to see if there are any syntax errors

4
00:00:19,510 --> 00:00:20,260
or type errors.

5
00:00:21,190 --> 00:00:25,570
Once it does that, it's going to move everything to the top of the scope that's declared.

6
00:00:26,350 --> 00:00:31,750
It's going to set variables to undefined so it won't break things, but it won't return the value either

7
00:00:31,750 --> 00:00:33,160
until that variable set.

8
00:00:34,330 --> 00:00:39,940
You can also call a function before it is declared in the code because the parser for JavaScript is

9
00:00:39,940 --> 00:00:45,400
learning the whole page and prepping everything with the variables and functions declared before anything

10
00:00:45,400 --> 00:00:46,090
is executed.

11
00:00:46,660 --> 00:00:48,580
So let's show you what an example of this looks like.

12
00:00:48,580 --> 00:00:55,060
For example, here we can assign X to the value five, and that's what happens before we declare it.

13
00:00:56,080 --> 00:01:02,680
So we can also find an element and display X is the element, and these are before X is declared.

14
00:01:03,990 --> 00:01:07,530
Let's show you what this looks like for variables and for functions.

15
00:01:09,810 --> 00:01:14,160
All right, so let's do add equals three plus one.

16
00:01:15,540 --> 00:01:24,330
So it's going to be four and then let's declare that variable and we want to see what happens if we

17
00:01:24,340 --> 00:01:26,730
cancel all this before it's been changed.

18
00:01:29,730 --> 00:01:36,990
And we also want to see what happens at various steps of the way, so let's see what happens there.

19
00:01:37,420 --> 00:01:37,920
Let's save it.

20
00:01:39,190 --> 00:01:39,700
And runit.

21
00:01:40,840 --> 00:01:47,440
OK, so first things first, that we notice we can do this with bar and it's hoisted to the top where

22
00:01:47,440 --> 00:01:55,000
we can it and it's undefined and then we modify it and run it again and it's four.

23
00:01:55,760 --> 00:01:58,170
And then once we've declared it, it's also still four.

24
00:01:59,230 --> 00:02:00,310
Will this work with let?

25
00:02:01,210 --> 00:02:01,750
We'll show you.

26
00:02:03,440 --> 00:02:09,140
Let kind of prevents this method of posting, so it's an uncut reference area that you cannot access

27
00:02:09,140 --> 00:02:10,850
add before it is initialized.

28
00:02:11,980 --> 00:02:18,280
Because it does hoist it, it knows that it's Aulet and it knows that we can't access it before it's

29
00:02:18,280 --> 00:02:21,100
been initialized because we're using LET instead of FA.

30
00:02:21,460 --> 00:02:24,770
So we have to get rid of that and now we can control it.

31
00:02:24,790 --> 00:02:27,850
It's undefined, but if we move this value down.

32
00:02:35,740 --> 00:02:36,780
Then we're totally fine.

33
00:02:38,210 --> 00:02:42,500
OK, so let and concern will prevent wasting four variables.

34
00:02:43,790 --> 00:02:46,100
Now let's look at an example of hoisting.

35
00:02:48,200 --> 00:02:50,210
Let's just keep this variable handy.

36
00:02:51,990 --> 00:02:54,780
And then you say this is bar hoisting.

37
00:02:59,580 --> 00:03:01,760
And let's look at an example of function hoisting.

38
00:03:10,340 --> 00:03:16,940
So what we're doing here is actually adding these two together, executing a function that doesn't exist

39
00:03:16,940 --> 00:03:17,200
yet.

40
00:03:18,200 --> 00:03:19,700
So let's add the function down here.

41
00:03:39,900 --> 00:03:47,750
OK, so even though the function was declared later, we were able to control it ahead of time.

42
00:03:51,580 --> 00:03:59,140
So if we do this, we should get four councillor's, the undefined, this port and this port and then

43
00:03:59,140 --> 00:03:59,710
the final one.

44
00:04:03,420 --> 00:04:06,390
Hopes Typo Council dialogue.

45
00:04:11,540 --> 00:04:12,080
There we go.

46
00:04:13,250 --> 00:04:18,110
So if we counsel these out or comment those out and then try again.

47
00:04:20,390 --> 00:04:26,570
That's all we get, this one right here and this we can change to any value we want to seven thousand

48
00:04:26,570 --> 00:04:34,340
sixty one would leave us with sixty eight so you can hoist functions and you can hoist bars, but you

49
00:04:34,340 --> 00:04:35,780
cannot hoist, let or consed.

50
00:04:36,740 --> 00:04:42,500
And this is totally fine just because it's understanding the definitions of the functions and the definitions

51
00:04:42,500 --> 00:04:46,070
of hours before it executes the rest of the code on the page.

52
00:04:48,050 --> 00:04:53,840
So that is bar hoisting and that is function hoisting.

53
00:04:58,250 --> 00:05:02,870
Hoisting is not a feature in every programming language and for the most part, just like we said,

54
00:05:02,900 --> 00:05:10,430
use and instead of are not a whole lot of benefit to using hoisting, it's usually the preference to

55
00:05:10,430 --> 00:05:15,040
actually declare your global variables at the beginning of your scope anyway.

56
00:05:15,680 --> 00:05:20,990
So the recommendation is just to put your variables at the beginning of your code if you can manage

57
00:05:20,990 --> 00:05:21,140
it.

58
00:05:21,890 --> 00:05:23,210
And that's it for hoisting.

59
00:05:24,020 --> 00:05:28,820
In the next lesson, we're going to go over a little bit more into declaration and assignment and learn

60
00:05:28,820 --> 00:05:31,970
a little bit more about those parties who might.