1
00:00:00,540 --> 00:00:04,860
So in this video we're going to be talking about one of the most important control structures in any

2
00:00:04,860 --> 00:00:07,340
programming language and that's functions.

3
00:00:07,500 --> 00:00:13,260
So functions are blocks of code that can be defined and then called at a later time or in some cases

4
00:00:13,260 --> 00:00:15,720
defined in call the same time.

5
00:00:15,720 --> 00:00:20,700
Now there's a few different types of functions or different ways of writing functions in javascript

6
00:00:20,700 --> 00:00:21,800
that I want to show you.

7
00:00:21,960 --> 00:00:27,890
So we're going to look at function declarations function expressions also something called an iffy which

8
00:00:27,890 --> 00:00:32,750
is an immediately and vocable function expression and also property methods.

9
00:00:32,910 --> 00:00:37,630
All right so let's start off with function declarations.

10
00:00:37,640 --> 00:00:42,300
Right and if you have any experience with any programming language you've probably seen something like

11
00:00:42,330 --> 00:00:48,400
this before so basically will say function and then we'll name it I'll call it Greek.

12
00:00:48,510 --> 00:00:52,150
You puts in parentheses and then we have curly braces.

13
00:00:52,320 --> 00:00:52,650
All right.

14
00:00:52,650 --> 00:00:55,620
So anything inside here is the function scope.

15
00:00:55,950 --> 00:01:01,130
So let's say we just want this function to Lago a string of Hello.

16
00:01:01,410 --> 00:01:06,930
So if I save this nothing happens down here we're not seeing the actual console log because all we've

17
00:01:06,930 --> 00:01:08,800
done is declare the function.

18
00:01:08,920 --> 00:01:16,650
Ok so we actually have to call it by writing the name and then putting some parentheses here so if we

19
00:01:16,650 --> 00:01:20,580
save that now we'll get the console log of Hello.

20
00:01:20,580 --> 00:01:26,880
Now this isn't something that you would do too often unless it's purposely for logging.

21
00:01:26,880 --> 00:01:29,370
Usually you'd return something from a function.

22
00:01:29,370 --> 00:01:35,470
So I'm going to comment this out and then we're just going to return the string Hello.

23
00:01:36,180 --> 00:01:36,720
OK.

24
00:01:36,720 --> 00:01:41,880
Now if I saved this notice that the log has gone away because all we're doing is returning it.

25
00:01:41,880 --> 00:01:45,000
We're not actually saying we want to log it to the console.

26
00:01:45,000 --> 00:01:52,360
So if we do want to log it what we would do is wrap the actual function call in the console log.

27
00:01:52,530 --> 00:01:54,710
All right so now we get hello.

28
00:01:54,960 --> 00:01:59,260
Now with functions with declarations expressions at all.

29
00:01:59,300 --> 00:02:04,080
All types of functions they can take in parameters are also called arguments.

30
00:02:04,080 --> 00:02:06,970
So let's say we want a parameter of name.

31
00:02:07,010 --> 00:02:07,410
All right.

32
00:02:07,410 --> 00:02:07,970
Actually that's two.

33
00:02:07,980 --> 00:02:11,430
First name.

34
00:02:11,430 --> 00:02:15,210
So down here what we could do is pass in a value.

35
00:02:15,210 --> 00:02:16,470
Let's say John.

36
00:02:16,670 --> 00:02:17,120
OK.

37
00:02:17,130 --> 00:02:19,670
And that'll be the value for this first name.

38
00:02:19,680 --> 00:02:21,390
Now we could do whatever we want with it.

39
00:02:21,390 --> 00:02:23,700
Let's say we just want to attach it to this Hello.

40
00:02:23,700 --> 00:02:28,230
So we'll just concatenate first name and save.

41
00:02:28,230 --> 00:02:28,760
And then we get.

42
00:02:28,770 --> 00:02:30,090
Hello John.

43
00:02:30,090 --> 00:02:30,410
All right.

44
00:02:30,420 --> 00:02:38,880
Now you can have multiple parameters so if I wanted to put a comma here and say last name and then down

45
00:02:38,880 --> 00:02:46,740
here just concatenate the space and say last name and then we could just pass in another parameter by

46
00:02:46,740 --> 00:02:49,910
putting a comma will say Doh.

47
00:02:50,190 --> 00:02:53,460
All right so now we get Hello John Doe.

48
00:02:53,470 --> 00:02:59,760
Now what if we were to take away these strings here not pass anything in and save.

49
00:02:59,760 --> 00:03:05,260
So we get hello undefined undefined because that's what these are right now is undefined.

50
00:03:05,310 --> 00:03:11,850
So there is a couple of ways to have default values for your parameters.

51
00:03:11,850 --> 00:03:16,860
Back in S-5 should say back in the S-5 we still do use S-5.

52
00:03:17,040 --> 00:03:28,020
But before E6 what we would have to do is something like this we would do if type of first name is equal

53
00:03:28,020 --> 00:03:38,070
to a string of undefined because that's what it is then we would define it by saying first name equals

54
00:03:38,180 --> 00:03:39,820
and end John.

55
00:03:40,320 --> 00:03:40,710
All right.

56
00:03:40,710 --> 00:03:45,280
And then we'd have to do this for every parameter that we want to default for.

57
00:03:45,300 --> 00:03:46,710
So let's say last name

58
00:03:52,030 --> 00:03:54,050
and then we'll set that to Doug.

59
00:03:54,430 --> 00:03:59,310
Ok so now if I go ahead and say we get Hello John Doe even though we didn't pass anything in.

60
00:03:59,320 --> 00:04:00,520
Because that's the default.

61
00:04:00,520 --> 00:04:09,160
Now if we were to pass something in like let's say Steve Smith that's going to override the default.

62
00:04:09,190 --> 00:04:09,520
All right.

63
00:04:09,520 --> 00:04:13,270
Now this is kind of a pain in the neck to do and it doesn't look very good.

64
00:04:13,630 --> 00:04:18,010
So what we can do now with ESX let's comment that.

65
00:04:18,040 --> 00:04:26,790
But what we can do now is we can just define the defaults here so we can say equals John equals duck.

66
00:04:27,420 --> 00:04:27,800
OK.

67
00:04:27,820 --> 00:04:32,800
And now if we were to well first of all if we were to keep Steve Smith that's going to work.

68
00:04:32,890 --> 00:04:38,600
But if we don't have any parameters in here and save we'll we'll still get Hello John Doe.

69
00:04:38,800 --> 00:04:39,160
All right.

70
00:04:39,160 --> 00:04:43,270
So this is a much better way than doing something like this.

71
00:04:43,960 --> 00:04:48,610
OK so that's the basics of function declarations are statements.

72
00:04:48,610 --> 00:04:51,370
So what we're going to do is comment out the console log.

73
00:04:51,520 --> 00:04:56,020
And now we're going to take a look at function expressions.

74
00:04:56,020 --> 00:04:56,320
All right.

75
00:04:56,320 --> 00:05:02,740
Now a function expression is basically putting a function as a variable assignment.

76
00:05:02,740 --> 00:05:09,390
So for instance if we were to do Konst square and set it to a function.

77
00:05:09,440 --> 00:05:09,840
All right.

78
00:05:09,850 --> 00:05:11,550
Now it can be named or not.

79
00:05:11,550 --> 00:05:13,150
Eric It can be anonymous.

80
00:05:13,180 --> 00:05:13,850
OK.

81
00:05:14,050 --> 00:05:19,450
Usually they're anonymous if you have an expression like this you have a named variable in an anonymous

82
00:05:19,450 --> 00:05:24,520
function but you could do functions where you could name it like that.

83
00:05:24,860 --> 00:05:25,340
OK.

84
00:05:25,360 --> 00:05:29,700
Now we want to put a semi-colon here because this is basically a variable.

85
00:05:30,220 --> 00:05:42,390
And then in here let's do want to pass in a parameter of X and we'll say return x times X like that.

86
00:05:42,580 --> 00:05:42,880
Right.

87
00:05:42,910 --> 00:05:50,920
And then if we want to use this we'll go ahead and do a console log and we'll say Square and let's pass

88
00:05:50,920 --> 00:05:54,690
an A and save and we get 64.

89
00:05:54,700 --> 00:05:59,500
All right and just like with declarations if you wanted to default you could do that.

90
00:05:59,500 --> 00:06:04,550
So if we say three is the default OK 8 is obviously going to be 64.

91
00:06:04,560 --> 00:06:12,400
But if I were to pass and nothing now and save will get 9 because it's treating 3 as the as the default

92
00:06:14,390 --> 00:06:21,320
now in a lot of cases are I would I would say most cases using an expression or a declaration isn't

93
00:06:21,320 --> 00:06:23,050
going to make much of a difference.

94
00:06:23,210 --> 00:06:29,930
But there are times when expressions have to have some benefits to them when it comes to hoisting when

95
00:06:29,930 --> 00:06:35,400
it comes to closures and some more advanced stuff that we're not really going to look at now.

96
00:06:35,930 --> 00:06:41,450
The purpose of this entire section is to give you the basics and the core fundamentals and I don't want

97
00:06:41,450 --> 00:06:42,670
to make it too difficult.

98
00:06:42,680 --> 00:06:49,160
Right off the bat so we will work our way up and get into some more complicated things later.

99
00:06:49,160 --> 00:06:51,300
All right so the comment that.

100
00:06:51,350 --> 00:07:04,220
And now what I want to talk about is immediately in vocable function expression is all right and these

101
00:07:04,220 --> 00:07:07,380
are also called if he's.

102
00:07:07,580 --> 00:07:14,330
So basically what he is it's a function that you declare and run at the same time.

103
00:07:14,330 --> 00:07:21,050
All right so to do this we needed to be an expression and we can make an expression by putting it into

104
00:07:21,080 --> 00:07:22,360
parentheses.

105
00:07:22,640 --> 00:07:27,720
All right so we just simply define an anonymous function inside of parentheses.

106
00:07:27,980 --> 00:07:39,400
So this is going to do a console log there and we'll just say if he hopes if he ran and save.

107
00:07:39,500 --> 00:07:45,580
Now notice that nothing happened down here because this is not complete when we run functions.

108
00:07:45,920 --> 00:07:46,840
They have.

109
00:07:46,850 --> 00:07:48,430
They end with parentheses.

110
00:07:48,440 --> 00:07:51,700
OK whether it's a declaration or an expression.

111
00:07:51,740 --> 00:07:55,820
So we actually have to add some parentheses right here.

112
00:07:55,910 --> 00:08:00,380
OK which may look a little funny but that's how these are are constructed.

113
00:08:00,380 --> 00:08:03,680
So now if we save we get if he ran.

114
00:08:03,870 --> 00:08:04,270
All right.

115
00:08:04,280 --> 00:08:06,750
And these can also take in parameters.

116
00:08:06,830 --> 00:08:19,970
So if I were to copy this and commented Oh let's pass and we'll say name and we'll console log and say

117
00:08:20,000 --> 00:08:20,630
hello

118
00:08:23,510 --> 00:08:29,560
name and then we could just pass something in here like Brad and save.

119
00:08:29,570 --> 00:08:32,280
And then we get Hello Brad and it just runs right away.

120
00:08:32,290 --> 00:08:35,540
And we declared it and it ran at the same time.

121
00:08:35,540 --> 00:08:43,470
Now these these are actually very useful when it comes to certain design patterns like the module pattern.

122
00:08:43,580 --> 00:08:49,070
We're actually going to have a pretty big project later on which will be a calorie count or application

123
00:08:49,460 --> 00:08:55,010
and we're going to use the module pattern it's basically a bunch if these that have private methods

124
00:08:55,010 --> 00:08:56,630
and private properties.

125
00:08:56,630 --> 00:08:58,790
And it's really good.

126
00:08:58,810 --> 00:09:03,510
It's one of my favorite design patterns and it's based on on this.

127
00:09:03,530 --> 00:09:03,800
All right.

128
00:09:03,800 --> 00:09:07,250
So we will get more into this later on.

129
00:09:07,250 --> 00:09:09,930
For now I'm just going to comment that.

130
00:09:10,370 --> 00:09:15,250
All right so we are going to get into more object oriented programming later.

131
00:09:15,260 --> 00:09:20,540
And I know I did already kind of show you this when we went over object literals but we can put functions

132
00:09:20,540 --> 00:09:26,270
inside of objects as well as opposed to just in the global scope.

133
00:09:26,270 --> 00:09:31,580
So let's go let's say property methods.

134
00:09:31,760 --> 00:09:36,920
Now when a function is put inside of an object it's called a method.

135
00:09:37,100 --> 00:09:42,170
So what I'm going to do here is create a variable of to do all right.

136
00:09:42,170 --> 00:09:48,380
We're going to set it to an object like that and then let's say we want an add function so we could

137
00:09:48,380 --> 00:10:00,100
say and set that to a function and have it do something in this case I'm just going to add to do obviously

138
00:10:00,110 --> 00:10:03,070
you would have it do something or something else.

139
00:10:03,080 --> 00:10:10,590
And then we could go down here and we could call it by saying to do Daut add like that.

140
00:10:10,610 --> 00:10:17,900
If we save and now you can see we get ad to do all right if we wanted to put an edit we can put a comma

141
00:10:17,930 --> 00:10:18,580
here.

142
00:10:18,710 --> 00:10:27,830
We can say edit function now and edit and edit would usually take in some kind of ID so you know what

143
00:10:27,830 --> 00:10:29,070
to do your editing.

144
00:10:29,210 --> 00:10:30,850
So we'll pass in.

145
00:10:31,340 --> 00:10:37,130
This will take in an ID and then we'll just Konsole dot log.

146
00:10:37,580 --> 00:10:45,400
I'll throw a template string in here and we'll say it's to do Heidi.

147
00:10:45,740 --> 00:10:46,240
All right.

148
00:10:46,370 --> 00:10:53,900
And then we'll go down here we'll say to do dot at it and we'll pass in 22 and save and we get to do

149
00:10:53,900 --> 00:10:55,470
22.

150
00:10:55,470 --> 00:10:55,850
All right.

151
00:10:55,850 --> 00:11:05,150
Now you can also define functions for this object outside of this so we could say to do dot delete equals

152
00:11:05,210 --> 00:11:08,970
function just like any other X right.

153
00:11:09,080 --> 00:11:11,470
Defining any other function expression.

154
00:11:11,720 --> 00:11:13,580
And we could say Konsole da blog

155
00:11:16,460 --> 00:11:24,820
delete to do and then go out here and say to do dawn delete and that will run.

156
00:11:25,210 --> 00:11:29,750
All right so I just figured I'd throw that in there just to show you guys there's different ways that

157
00:11:29,750 --> 00:11:35,510
we can do things different patterns and we're going to go over the you know the popular javascript design

158
00:11:35,510 --> 00:11:38,300
patterns later on in this in this course.

159
00:11:38,300 --> 00:11:38,620
All right.

160
00:11:38,630 --> 00:11:43,950
So that's it guys in the next video we're going to take a look at loops and iteration.