1
00:00:02,130 --> 00:00:04,260
So that's functions.

2
00:00:04,260 --> 00:00:06,930
There is way more to functions than what we used

3
00:00:06,930 --> 00:00:08,340
up to this point.

4
00:00:08,340 --> 00:00:09,173
For example,

5
00:00:09,173 --> 00:00:12,685
you might wonder why did I move adult years up here

6
00:00:12,685 --> 00:00:14,450
and so on?

7
00:00:14,450 --> 00:00:16,110
Now I did that because of course,

8
00:00:16,110 --> 00:00:18,860
ultimately I deleted adult years down there

9
00:00:18,860 --> 00:00:21,820
and replaced it with my function call.

10
00:00:21,820 --> 00:00:25,810
But why am I not just creating adult years here

11
00:00:25,810 --> 00:00:28,610
in the function like this?

12
00:00:28,610 --> 00:00:31,520
Now I deleted the adult years definition

13
00:00:31,520 --> 00:00:34,563
outside of the function, and I'm just defining it in there.

14
00:00:35,430 --> 00:00:36,920
Well, let's give this a try.

15
00:00:36,920 --> 00:00:38,410
If we save this code

16
00:00:42,450 --> 00:00:43,920
and you reload your page,

17
00:00:43,920 --> 00:00:45,710
you might still be getting old alerts,

18
00:00:45,710 --> 00:00:48,660
but if you click them away and you reload again,

19
00:00:48,660 --> 00:00:51,120
you will not get alerts again.

20
00:00:51,120 --> 00:00:53,180
And if you open the developer tools

21
00:00:53,180 --> 00:00:55,040
and go to the console there,

22
00:00:55,040 --> 00:00:57,900
you will see an error.

23
00:00:57,900 --> 00:01:00,240
And you should always check that console

24
00:01:00,240 --> 00:01:02,750
if something does not work as expected,

25
00:01:02,750 --> 00:01:06,250
because errors thrown by your JavaScript code

26
00:01:06,250 --> 00:01:07,960
will be output here

27
00:01:07,960 --> 00:01:10,623
in the developer tools in that console.

28
00:01:11,680 --> 00:01:15,210
And here we get an uncaught reference error.

29
00:01:15,210 --> 00:01:17,523
Adult years is not defined.

30
00:01:18,410 --> 00:01:20,240
Hmm, that's a weird one.

31
00:01:20,240 --> 00:01:22,213
I mean, we are defining it here.

32
00:01:23,290 --> 00:01:25,700
Well, that's already a bit advanced,

33
00:01:25,700 --> 00:01:27,950
but it is an important concept.

34
00:01:27,950 --> 00:01:30,320
Here we are creating a variable,

35
00:01:30,320 --> 00:01:34,040
but if you create a variable inside of a function,

36
00:01:34,040 --> 00:01:36,610
it's only usable in there.

37
00:01:36,610 --> 00:01:40,360
And that's also why it's slightly grayed out.

38
00:01:40,360 --> 00:01:43,210
That's visuals to do codes way of signaling

39
00:01:43,210 --> 00:01:46,950
to you that this variable is never getting used

40
00:01:46,950 --> 00:01:48,900
anywhere else in your code.

41
00:01:48,900 --> 00:01:52,350
And you might be saying we are using it down there.

42
00:01:52,350 --> 00:01:54,540
Yes, but that's not the same variable.

43
00:01:54,540 --> 00:01:55,920
Because as I just said,

44
00:01:55,920 --> 00:01:59,390
using let inside of a function creates a new variable,

45
00:01:59,390 --> 00:02:02,200
which is only usable in that function.

46
00:02:02,200 --> 00:02:04,310
And in that function we never use it,

47
00:02:04,310 --> 00:02:05,783
which is why it's grayed out.

48
00:02:06,720 --> 00:02:07,990
We only assign a value

49
00:02:07,990 --> 00:02:11,260
but then we never do anything else with it in there.

50
00:02:11,260 --> 00:02:13,660
And when we try to use it down there,

51
00:02:13,660 --> 00:02:17,070
we just don't find it because outside of this function,

52
00:02:17,070 --> 00:02:20,023
we're never creating an adult years variable.

53
00:02:20,980 --> 00:02:24,830
And before I made the change, we did do that.

54
00:02:24,830 --> 00:02:29,300
So if I do add adult years here like this,

55
00:02:29,300 --> 00:02:31,450
even without an initial value,

56
00:02:31,450 --> 00:02:34,513
then we do define it outside of this function again.

57
00:02:35,660 --> 00:02:37,830
But now I still have a difference compared

58
00:02:37,830 --> 00:02:39,760
to the code from before.

59
00:02:39,760 --> 00:02:43,550
Now I still have to let keyword inside of this function.

60
00:02:43,550 --> 00:02:46,910
And that still has an important implication.

61
00:02:46,910 --> 00:02:48,570
If we saved this code again,

62
00:02:48,570 --> 00:02:52,890
even though I added this variable outside of this function,

63
00:02:52,890 --> 00:02:57,890
if I reload this page, I get my alerts again here,

64
00:02:58,710 --> 00:03:01,233
but they show undefined now.

65
00:03:02,250 --> 00:03:04,970
So I'm not getting an error anymore,

66
00:03:04,970 --> 00:03:07,093
but also not the expected results.

67
00:03:08,090 --> 00:03:09,330
And the reason for that is

68
00:03:09,330 --> 00:03:11,720
that we're still creating a custom variable

69
00:03:11,720 --> 00:03:13,320
inside of this function,

70
00:03:13,320 --> 00:03:16,310
even though it has the same name as the variable

71
00:03:16,310 --> 00:03:18,000
outside of the function.

72
00:03:18,000 --> 00:03:20,700
This is something which is allowed in JavaScript.

73
00:03:20,700 --> 00:03:23,330
It's called variable shadowing.

74
00:03:23,330 --> 00:03:25,680
And it simply means that in functions,

75
00:03:25,680 --> 00:03:29,100
you can overwrite variables from outside of functions.

76
00:03:29,100 --> 00:03:32,200
You can create new variables with the same name

77
00:03:32,200 --> 00:03:36,470
and that will leave the outside variables intact,

78
00:03:36,470 --> 00:03:39,020
it will not delete them or changed them,

79
00:03:39,020 --> 00:03:42,360
it will just create an additional variable of the same name,

80
00:03:42,360 --> 00:03:45,800
which is only usable inside of this function.

81
00:03:45,800 --> 00:03:48,780
And we then assign our calculated value,

82
00:03:48,780 --> 00:03:51,060
queued this internal variable

83
00:03:51,060 --> 00:03:53,670
and hence that external variable,

84
00:03:53,670 --> 00:03:56,740
which is not defined the net function never receives

85
00:03:56,740 --> 00:03:57,653
that value.

86
00:03:58,730 --> 00:04:02,480
Only if we remove let here, inside of the function,

87
00:04:02,480 --> 00:04:06,040
we again tell JavaScript to please assign

88
00:04:06,040 --> 00:04:08,810
that value to this variable,

89
00:04:08,810 --> 00:04:11,360
which is not defined in this function,

90
00:04:11,360 --> 00:04:14,450
but which is defined outside of this function.

91
00:04:14,450 --> 00:04:16,269
And that is something which we can do.

92
00:04:16,269 --> 00:04:17,540
That is what we did before.

93
00:04:17,540 --> 00:04:19,750
And that's how we now ensure again,

94
00:04:19,750 --> 00:04:23,640
that adult years is accessible and changeable

95
00:04:23,640 --> 00:04:24,990
inside of the function,

96
00:04:24,990 --> 00:04:27,743
but then also accessible outside of it.