1
00:00:00,077 --> 00:00:04,058
Now that you've learned the basics of
functions, it's time to create a function.

2
00:00:04,058 --> 00:00:07,337
You can code along with me by launching
the workspace with this video.

3
00:00:07,337 --> 00:00:12,287
Open the file named random.js,
located inside the js folder.

4
00:00:12,287 --> 00:00:15,222
This file is already linked to index.HTML.

5
00:00:15,222 --> 00:00:18,545
You'll see that the file already
has a single line of code.

6
00:00:18,545 --> 00:00:22,454
You've seen this code before, in
a previous course on JavaScript numbers.

7
00:00:22,454 --> 00:00:26,499
This code creates a random
number from 1 to 6, and

8
00:00:26,499 --> 00:00:30,085
stores it in a variable
named randomNumber.

9
00:00:30,085 --> 00:00:33,088
Functions are just about
everywhere in JavaScript.

10
00:00:33,088 --> 00:00:35,789
In fact,
we've used lots of functions so far.

11
00:00:35,789 --> 00:00:40,739
For instance, notice the parentheses
after Math.floor and Math.random.

12
00:00:40,739 --> 00:00:43,621
Math.floor and
Math.random are also functions.

13
00:00:43,621 --> 00:00:46,989
They're functions that are built
into the JavaScript language.

14
00:00:46,989 --> 00:00:51,184
You can also create your own functions,
to perform just about any task you want.

15
00:00:51,184 --> 00:00:55,435
In this case, let's create a function
that displays an alert dialog box,

16
00:00:55,435 --> 00:00:58,477
with a new random number in
it each time it's called.

17
00:00:58,477 --> 00:01:03,229
First, create a function
named alertRandom,

18
00:01:03,229 --> 00:01:06,200
with function alertRandom,

19
00:01:06,200 --> 00:01:12,275
followed by a set of parentheses,
and a set of curly braces.

20
00:01:12,275 --> 00:01:15,534
I'm writing the function at
the top of my random.js file.

21
00:01:15,534 --> 00:01:19,304
It's common for programmers to place
functions at the top of the file.

22
00:01:19,304 --> 00:01:22,933
Remember, the code in the function
does not run immediately.

23
00:01:22,933 --> 00:01:27,301
JavaScript creates a space in memory
to save the function definition, and

24
00:01:27,301 --> 00:01:29,392
assign it to the name alertRandom.

25
00:01:29,392 --> 00:01:33,508
Similar to the assistant memorizing
the directions to the coffee shop.

26
00:01:33,508 --> 00:01:37,550
I want to create a new random number,
each time I call this function.

27
00:01:37,550 --> 00:01:42,347
So next, I'll move the random
number-generating code into the function.

28
00:01:42,347 --> 00:01:44,301
And just as with conditional statements,

29
00:01:44,301 --> 00:01:46,590
you should indent any code
inside your function.

30
00:01:46,590 --> 00:01:50,739
This makes it easier to see that
the code belongs to the function.

31
00:01:50,739 --> 00:01:54,929
Lastly, I'll display the random
number using the alert method.

32
00:01:54,929 --> 00:01:57,165
And look, more parentheses,

33
00:01:57,165 --> 00:02:01,900
which means that alert is also
a built-in JavaScript function.

34
00:02:01,900 --> 00:02:07,373
So now, I have a small collection of code
that does something, it has a function.

35
00:02:07,373 --> 00:02:10,772
I'll save this file, and
preview the workspace in the browser.

36
00:02:10,772 --> 00:02:16,260
Notice that nothing happens yet, but
something did happen behind the scenes.

37
00:02:16,260 --> 00:02:18,848
The browser read the function into memory,
and

38
00:02:18,848 --> 00:02:22,804
it's now prepared to act on its
instructions, as soon as it's called.

39
00:02:22,804 --> 00:02:26,960
It isn't until you call
the function that its code runs.

40
00:02:26,960 --> 00:02:28,427
So in my JavaScript file,

41
00:02:28,427 --> 00:02:33,313
I'll call the alertRandom function just
below the function definition, like this.

42
00:02:35,786 --> 00:02:41,313
I'll save the file, and when I refresh
the browser, a random number pops up.

43
00:02:41,313 --> 00:02:45,771
What's great about a function is that you
can use it over, and over, and over again.

44
00:02:45,771 --> 00:02:47,670
To run a function, call it.

45
00:02:47,670 --> 00:02:50,831
For example,
I'll call alertRandom three more times.

46
00:02:53,581 --> 00:02:58,300
In the browser, I get one random number,
two random numbers,

47
00:02:58,300 --> 00:03:02,051
three random numbers,
and four random numbers.

48
00:03:02,051 --> 00:03:05,856
So just one short line of code,
where I call the function,

49
00:03:05,856 --> 00:03:09,285
triggers the browser to run
multiple lines of code.

50
00:03:09,285 --> 00:03:13,028
Now, imagine that you have a function
with 50 lines of JavaScript.

51
00:03:13,028 --> 00:03:16,321
Calling that function,
using a single short command,

52
00:03:16,321 --> 00:03:18,430
will run 50 lines of JavaScript.

53
00:03:18,430 --> 00:03:22,589
JavaScript functions are an invaluable
tool in your programming tool kit.

54
00:03:22,589 --> 00:03:26,041
As you've learned,
they let you run two, ten, a dozen, or

55
00:03:26,041 --> 00:03:29,787
hundreds of lines of programming
by typing a single line of code.

56
00:03:29,787 --> 00:03:34,414
You'll use them constantly in JavaScript,
to make your programs more modular and

57
00:03:34,414 --> 00:03:35,484
easier to update.

58
00:03:35,484 --> 00:03:38,504
Functions also change
the flow of your programs.

59
00:03:38,504 --> 00:03:42,130
For example,
the JavaScript programs you've written so

60
00:03:42,130 --> 00:03:46,876
far start at the top of a file, and
run line-by-line to the end of the file.

61
00:03:46,876 --> 00:03:51,055
You learned in an earlier course that
conditional statements can change the flow

62
00:03:51,055 --> 00:03:53,513
by doing some things based
on one condition, or

63
00:03:53,513 --> 00:03:55,733
other things based on another condition.

64
00:03:55,733 --> 00:03:59,680
But even then, the program still ran
from the top to the bottom of the file.

65
00:03:59,680 --> 00:04:03,286
It's just that the flow is sometimes
diverted to different paths.

66
00:04:03,286 --> 00:04:07,004
Functions, however,
break that top-to-bottom flow.

67
00:04:07,004 --> 00:04:10,716
For example, if you look at how
the alertRandom function operates,

68
00:04:10,716 --> 00:04:14,303
you'll see that the JavaScript
engine constantly jumps around.

69
00:04:14,303 --> 00:04:18,534
Each time you call the function, the
JavaScript engine jumps into the function,

70
00:04:18,534 --> 00:04:20,006
runs the function's code,

71
00:04:20,006 --> 00:04:23,649
then returns to the spot in the program
where the function was called.

72
00:04:23,649 --> 00:04:28,397
In fact, in this code, there are built-in
JavaScript functions at work, Math.floor,

73
00:04:28,397 --> 00:04:29,888
Math.random, and alert.

74
00:04:29,888 --> 00:04:31,715
So when each of those are called,

75
00:04:31,715 --> 00:04:35,438
the JavaScript engine has to jump
into them and execute their code,

76
00:04:35,438 --> 00:04:39,246
then return to the spot it left off
within the alertRandom function.

77
00:04:39,246 --> 00:04:43,962
You'll often need to perform a similar
action in many places in your program.

78
00:04:43,962 --> 00:04:47,737
As you become a more advanced programmer,
you'll write lots of functions to

79
00:04:47,737 --> 00:04:50,756
efficiently run code that you
want to repeat again and again,

80
00:04:50,756 --> 00:04:53,390
without having to type
the same code multiple times.

81
00:04:53,390 --> 00:04:57,084
Up next, we'll dig deeper into
how to write and use functions.