1
00:00:00,310 --> 00:00:06,180
This video I'm going to introduce Javascript functions and functions are probably the single most important

2
00:00:06,180 --> 00:00:08,050
aspect of Javascript.

3
00:00:08,130 --> 00:00:10,140
So we're going to spend a decent amount of time on them.

4
00:00:10,650 --> 00:00:14,410
So we have a few objectives here and the first one is a conceptual one.

5
00:00:14,520 --> 00:00:19,530
We want to understand why we use functions and then the other three are more about actually writing

6
00:00:19,530 --> 00:00:20,180
code.

7
00:00:20,220 --> 00:00:26,570
So we want to be able to define a function without arguments to find a function with arguments and define

8
00:00:26,610 --> 00:00:29,820
a function that returns a value.

9
00:00:29,880 --> 00:00:32,950
So let's start by talking about what functions actually are.

10
00:00:33,180 --> 00:00:39,110
In an earlier video I mentioned that functions are sort of like a variable for lines of code.

11
00:00:39,420 --> 00:00:48,390
So if a normal variable will store a value like hello or 27 a function can store 20 lines of code and

12
00:00:48,390 --> 00:00:53,280
then we can recall that function and those 20 lines of code can be run again.

13
00:00:53,640 --> 00:00:59,310
So it's definitely more nuanced than that explanation but I like it as a simple way to introduce that

14
00:00:59,310 --> 00:01:03,030
functions are just reusable bits of code.

15
00:01:03,030 --> 00:01:07,080
So the next thing about functions is that we must declare them first.

16
00:01:07,230 --> 00:01:11,050
So we define a block of code and we give it a name.

17
00:01:11,190 --> 00:01:14,870
So that makes the function and then we have to run it later.

18
00:01:14,880 --> 00:01:16,410
So it's a two step process.

19
00:01:16,440 --> 00:01:20,230
Declare a function and then call it so you can see here.

20
00:01:20,310 --> 00:01:28,170
This is actually the syntax to declare a function function as a keyword just like var or F or while

21
00:01:28,320 --> 00:01:32,070
so function anything that we want here this is our name.

22
00:01:32,070 --> 00:01:37,610
So this one is called Do something parentheses and then curly braces.

23
00:01:37,830 --> 00:01:43,770
And then we put as many lines of code as we want inside the curly braces and then we can call the function

24
00:01:43,770 --> 00:01:48,740
later by referencing its name with parentheses at the end.

25
00:01:48,750 --> 00:01:51,170
So let me show you what that looks like.

26
00:01:52,230 --> 00:01:56,900
So I will define a function here lets you function.

27
00:01:57,600 --> 00:02:05,100
Say hi and all that it's going to do is cancel that log hello

28
00:02:08,610 --> 00:02:16,600
and we'll have it do two lines cancel that log goodbye just like that.

29
00:02:16,620 --> 00:02:21,690
So when I hit Enter javascript was going to see this code but it's not actually going to run the council

30
00:02:21,690 --> 00:02:22,620
bot logs.

31
00:02:22,860 --> 00:02:28,680
I'm just registering a function called say hi but it doesn't execute the code.

32
00:02:28,680 --> 00:02:35,850
So now if I want to call that function I refer to its name say hi and I add parentheses and I hit enter

33
00:02:36,720 --> 00:02:39,630
and it runs whatever's inside of say Hi.

34
00:02:39,630 --> 00:02:45,310
So hopefully already you can see why this is useful even though it's a very trivial example.

35
00:02:45,330 --> 00:02:51,030
We were still writing two lines constants like Hilo Council d'Artois goodbye and to do that all we have

36
00:02:51,030 --> 00:02:52,800
to do is write this really short line.

37
00:02:52,980 --> 00:02:58,940
So another quick note while I have this open if I just typed the words say hi without parentheses.

38
00:02:59,310 --> 00:03:00,880
And I hit enter.

39
00:03:01,020 --> 00:03:03,440
It just gives me the code back.

40
00:03:03,480 --> 00:03:05,420
So this is a really important distinction.

41
00:03:05,580 --> 00:03:11,310
If I just type the words say Hi it's just going to give me whatever the value of say hi is but it doesn't

42
00:03:11,310 --> 00:03:12,390
run the code.

43
00:03:12,540 --> 00:03:18,180
So I have to have those parentheses there which will go get the value of this function and then it's

44
00:03:18,180 --> 00:03:19,850
going to run the function.

45
00:03:20,190 --> 00:03:25,520
So really important that there's a difference between referring to a function and executing it.

46
00:03:26,700 --> 00:03:31,140
So I have another example here of how functions can help us try up our code.

47
00:03:31,290 --> 00:03:32,450
Remember dry is.

48
00:03:32,520 --> 00:03:34,140
Don't repeat yourself.

49
00:03:34,200 --> 00:03:39,450
So if I wanted to sing this song which is Twinkle twinkle little star I have four concert vault log

50
00:03:39,450 --> 00:03:47,180
statements so to sing the song once i need all of this code and then I want to sing it again.

51
00:03:47,280 --> 00:03:49,950
I need all that code again and so on.

52
00:03:49,950 --> 00:03:56,250
Every time I want to sing this song I have to run those four lines of code individually which is obviously

53
00:03:56,250 --> 00:03:57,370
not very dry.

54
00:03:57,400 --> 00:03:59,660
It's a lot of repeated code.

55
00:04:00,600 --> 00:04:07,200
So using a function I can just write those constant logs one time function sing song whatever I want

56
00:04:07,200 --> 00:04:07,880
to call it.

57
00:04:08,010 --> 00:04:12,540
I put those four lines of code in there and then to sing the song again.

58
00:04:12,600 --> 00:04:16,740
All I have to do is write sing song with parentheses.

59
00:04:16,860 --> 00:04:25,170
So let's do that now let's clear this out which by the way clear is a function that I just used and

60
00:04:25,170 --> 00:04:30,390
this is one that comes with javascript in the browser I don't have to define it but just like other

61
00:04:30,390 --> 00:04:34,080
functions I need the parentheses to execute it.

62
00:04:34,080 --> 00:04:40,620
So back to our singsong function I'm going to write the function keyword and then name and I'll just

63
00:04:40,620 --> 00:04:47,970
go a singsong again and just say you know the convention is to use camel case for function names just

64
00:04:47,970 --> 00:04:49,230
like variable names.

65
00:04:49,740 --> 00:04:55,110
And then I'll add my curly braces and then whatever I put inside of here is part of the function.

66
00:04:55,170 --> 00:04:58,540
So I'm going to paste those four lines constant hotdogging.

67
00:04:58,620 --> 00:04:59,760
Twinkle twinkle little star

68
00:05:03,630 --> 00:05:04,550
just like that.

69
00:05:05,010 --> 00:05:06,720
And I'm going to hit enter.

70
00:05:06,720 --> 00:05:10,860
And now I've told javascript about a function called Sing song.

71
00:05:11,160 --> 00:05:14,330
If I don't add the parentheses it just tells me the code.

72
00:05:14,480 --> 00:05:20,520
But if I want to sing the song I just have to write sing song with parentheses and if I want to write

73
00:05:20,580 --> 00:05:28,230
if I want to sing the song four times it's super easy I just type that four times rather than having

74
00:05:28,230 --> 00:05:32,310
to write 16 Konst about logs myself.

75
00:05:32,310 --> 00:05:37,380
So this illustrates the value of functions even though it's a trivial example of singing Twinkle Twinkle

76
00:05:37,380 --> 00:05:38,140
Little Star.

77
00:05:38,250 --> 00:05:39,960
And it's only four lines.

78
00:05:39,960 --> 00:05:45,960
Imagine when we have functions that are 50 lines of code that we're using 50 times that saving us a

79
00:05:45,960 --> 00:05:46,250
lot