Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
WEBVTT
00:00.380 --> 00:03.740
All right let's start learning about functions before we do.
00:03.750 --> 00:08.670
We're going to create a new folder where we can put all of our function related files as the basics
00:08.670 --> 00:11.090
directory is getting a little crowded.
00:11.220 --> 00:16.090
I'm actually going to switch the folder that I have open in the Visual Studio code editor.
00:16.260 --> 00:22.400
I'm going to open from the desktop my Jap's boot can't folder directly.
00:22.570 --> 00:29.280
Then along side of basics I'm going to make a new directory and I'm going to call this one functions.
00:29.650 --> 00:36.610
And in here we're going to create our very first file and we can just call this one functions 101.
00:36.800 --> 00:37.690
Dot J.
00:37.690 --> 00:38.200
S.
00:38.260 --> 00:39.050
Excellent.
00:39.190 --> 00:43.050
Let's also go ahead and switch the directory we're running are commands from.
00:43.050 --> 00:48.610
I'm going to use C.D dot dot to go up a folder into the J.S. boot camp directory then forward slash
00:48.640 --> 00:51.370
functions to end up in the functions folder.
00:51.520 --> 00:54.920
And then I'll just use clear to clear the terminal output.
00:55.150 --> 00:59.560
So as I mentioned in the intro functions are little subprograms.
00:59.560 --> 01:02.490
It's a little bit of code we can run over and over again.
01:02.530 --> 01:06.730
And there are three important parts to a function.
01:07.270 --> 01:12.580
Right here we have the function we have the function input we have the actual code to run.
01:12.580 --> 01:13.870
So what are we trying to do.
01:13.870 --> 01:17.590
Are we trying to convert a temperature fetch and user print a message.
01:17.680 --> 01:23.590
And we have the output we're going to ignore the input and the output for the moment and we're just
01:23.590 --> 01:27.920
going to focus on creating our first function a function that runs some code.
01:27.970 --> 01:30.060
We're going to do that right down below.
01:30.160 --> 01:31.080
We're going to use LET.
01:31.090 --> 01:37.960
Like we would if we were to make a string number or boolean let greed user.
01:37.990 --> 01:41.730
That's an I'm going to call this function and I'm going to set it equal to.
01:41.830 --> 01:44.620
And this is where we have to use the function syntax.
01:44.620 --> 01:50.320
So much like the if statement there is a specific set of rules around defining a function we have to
01:50.320 --> 01:51.420
follow those.
01:51.460 --> 01:56.850
The first one is to use the function keyword we literally type out function.
01:56.950 --> 02:00.610
The next is to open and close a set of parentheses.
02:00.610 --> 02:03.190
We're going to talk about what goes in here later.
02:03.190 --> 02:08.860
For now though it's perfectly fine to leave it empty and then we are going to open and close a set of
02:08.860 --> 02:13.780
curly braces and hit enter and there we have it our very first function.
02:13.830 --> 02:14.620
It do anything.
02:14.620 --> 02:17.310
No but it is indeed valid.
02:17.440 --> 02:22.780
So much like our IF statements have a code block where we can put the code we want to run like for example
02:22.900 --> 02:23.930
right inside of here.
02:24.070 --> 02:28.520
Our functions also have a code block that creates its own scope right here.
02:28.720 --> 02:33.400
Anything we want to do when the function executes goes right inside of here for the moment we're just
02:33.400 --> 02:36.170
going to go ahead and use log to print a message.
02:36.250 --> 02:40.990
Later on we'll figure out how to convert a temperature or combine variables call other functions or
02:40.990 --> 02:44.630
do whatever else we need to do in here what are we going to do.
02:44.650 --> 02:47.470
We are just going to print a little message to the screen.
02:47.560 --> 02:50.680
Welcome user excellence.
02:50.680 --> 02:55.130
Now that our function actually does something we can't run the file just yet.
02:55.190 --> 03:00.420
Well we could run the file but the functions never going to execute at this point.
03:00.420 --> 03:05.530
We have to find a function defining a function would be like defining a javascript file.
03:05.530 --> 03:08.550
Yes it exists but you haven't actually done anything with it.
03:08.800 --> 03:13.310
If we want this code to run when we execute this file we have to call it.
03:13.330 --> 03:18.440
So if I were to execute the script node functions 101.
03:18.490 --> 03:19.970
Jay asks What do I get.
03:20.020 --> 03:21.820
I don't get an error I just get nothing.
03:21.820 --> 03:23.290
The program didn't run.
03:23.410 --> 03:28.140
If I do want to run this little sub program I have to call the function right here.
03:28.330 --> 03:30.920
I execute it by referencing it by name.
03:30.940 --> 03:32.560
So greet user.
03:32.560 --> 03:39.520
This alone isn't enough I have to use the function call syntax which is an opening and closing parentheses
03:39.640 --> 03:40.930
after the name.
03:40.930 --> 03:43.410
Now we'll talk about what goes inside of here a bit later too.
03:43.420 --> 03:46.360
For now it's perfectly fine to leave it empty.
03:46.360 --> 03:50.420
If we save the file and rerun things what do we get we get.
03:50.420 --> 03:53.880
Welcome user printing to the screen which is fantastic.
03:53.920 --> 04:00.100
We have created and called our very first function and we can call this function as many times as we
04:00.100 --> 04:01.830
see fit in our program.
04:01.990 --> 04:05.280
So I could paste that line two more times.
04:05.410 --> 04:07.180
And what's going to happen if I run the script.
04:07.270 --> 04:14.050
I'm going to see our welcome user message three times and that's exactly what I get with the most basic
04:14.050 --> 04:15.370
function accomplished.
04:15.370 --> 04:18.130
Let's go ahead and create something a little more practical.
04:18.130 --> 04:23.970
We are going to introduce the input the code which we already have and the output for this one.
04:23.970 --> 04:25.500
Let's say we want a square a number.
04:25.630 --> 04:30.880
So what do we take into the function we take in the number we want to square what does the code do.
04:30.970 --> 04:32.630
The code squares the number.
04:32.680 --> 04:33.650
What's the output.
04:33.670 --> 04:35.830
The output would be the squared number.
04:35.830 --> 04:42.070
So if I passed in 3 the code would multiply three times three and the output would be nice.
04:42.340 --> 04:45.000
Let's go ahead and see that in practice down below.
04:45.160 --> 04:47.900
I'm going to use less to create Square.
04:48.490 --> 04:53.890
I'm going to set it equal to a function so we use the function keyword we open and close our premises
04:53.920 --> 04:58.240
and we open and close our code block using curly braces down below.
04:58.330 --> 05:04.800
We could also go ahead and call this before filling it out square and I'm going to pass in a number.
05:04.810 --> 05:07.460
Now how do we pass a number into a function.
05:07.580 --> 05:14.050
But we do this by providing what's known as an argument so the input in terms of how the vocab works
05:14.050 --> 05:18.650
for javascript is actually known as an argument or arguments plural.
05:18.670 --> 05:24.280
So if you read a blog post or a function you're not going to see thrown around you're going to see argument.
05:24.490 --> 05:29.800
So if we want to pass an argument into square the value to square How do we do that.
05:29.800 --> 05:33.460
Well we provide it right here between the parentheses.
05:33.460 --> 05:37.110
So if I wanted to provide a number I could literally just put a number right here.
05:37.120 --> 05:42.820
I could say three for example or I could reference a variable that stores the number so I could have
05:42.820 --> 05:44.230
a variable up above.
05:44.230 --> 05:47.030
Let Nahm equal three.
05:47.110 --> 05:51.430
And then I could reference that variable instead of just putting 3 right in there.
05:51.490 --> 05:53.830
Both of those have the exact same effect.
05:53.890 --> 05:58.140
And for simplicity's sake I'm just going to stick with passing in three right there.
05:58.300 --> 06:00.240
Let's go ahead and delete this line completely.
06:00.280 --> 06:01.980
And we're back to where we started.
06:02.260 --> 06:08.790
So at this point we are passing in a single argument to square we're passing in the number three.
06:08.800 --> 06:15.040
The question is how do we actually get access to this value inside of the function code.
06:15.190 --> 06:21.920
Well we do that by naming the value right here in the parentheses for the function definition.
06:22.090 --> 06:24.110
So much like we would name a variable.
06:24.130 --> 06:26.980
We go ahead and name the argument right here.
06:26.980 --> 06:29.160
We can call this one name.
06:29.290 --> 06:34.420
Let's go ahead and actually do something with Naam and to make sure the value is getting passed in correctly
06:34.570 --> 06:35.790
right here.
06:36.010 --> 06:37.530
Cancel a dot log.
06:37.690 --> 06:41.850
I'm just going to print out and some will focus on squaring the number in just a second.
06:41.950 --> 06:47.230
If I save the file and rerun it I would expect to see welcome user three times and then I would expect
06:47.230 --> 06:49.250
to see three a single time.
06:49.360 --> 06:50.920
Let's go ahead and rerun the file.
06:50.920 --> 06:53.130
And that is exactly what we get right here.
06:53.170 --> 06:55.910
The argument value is getting passed in.
06:55.960 --> 07:00.420
We are seeing three get passed into the function and when we print it what are we getting.
07:00.430 --> 07:02.610
We're getting the value we are getting three.
07:02.920 --> 07:09.710
Now we can add multiple calls to square as well I could call Square right here with 10 if I wanted to.
07:09.770 --> 07:14.560
And now if we rerun the script the first time the function runs the value will be three.
07:14.650 --> 07:18.450
And the second time the function runs the value will be 10.
07:18.520 --> 07:22.310
Over here we get three we get 10.
07:22.360 --> 07:24.350
So this is how we can set up basic input.
07:24.430 --> 07:27.330
We'll learn more about passing in multiple values later.
07:27.340 --> 07:29.930
And what to do with a value isn't passed in.
07:29.950 --> 07:33.200
For now we're going to stick with a more trivial setup.
07:33.220 --> 07:34.080
So what do we do from here.
07:34.090 --> 07:39.590
We square the number we focus on the code side of things we can do that right here.
07:40.770 --> 07:48.130
I'm going to call this one result equal and all I'm going to do is take the number and multiply it by
07:48.730 --> 07:50.090
using the Ashur sign.
07:50.110 --> 07:51.240
What the number.
07:51.280 --> 07:53.540
So numb times numb.
07:53.890 --> 07:55.540
Now we have this result.
07:55.540 --> 07:59.620
So in the case of three it would be three times three which would be nine in the case of 10.
07:59.620 --> 08:01.980
It would be one hundred ten times ten.
08:02.260 --> 08:06.790
So we had the input arguments we have the code that actually DOES something.
08:06.820 --> 08:13.800
The last piece is the output and the output is also known as the return value.
08:13.930 --> 08:17.020
So just like if you read an article on functions you won't see input.
08:17.020 --> 08:22.400
You'll see arguments you're not going to really see anyone that call the function return value the output
08:22.570 --> 08:25.960
but that is an easy way to think about the three pieces.
08:25.960 --> 08:32.410
It's really called the return value and that's because to return something we have to use the return
08:32.560 --> 08:33.510
statement.
08:33.520 --> 08:35.110
So right here how do we do that.
08:35.140 --> 08:37.070
Well we type out return.
08:37.240 --> 08:43.760
This is a reserved keyword in the language and it can be used a single time only in your functions.
08:43.870 --> 08:48.380
So right here we can choose to return a single value from this function.
08:48.420 --> 08:49.770
What's that value going to be.
08:49.840 --> 08:50.870
It's going to be result.
08:50.890 --> 08:53.900
So we reference it results right here.
08:53.920 --> 09:00.010
Now we have a function that does all three things it takes in some value as the argument and uses some
09:00.010 --> 09:03.550
code to do something meaningful and then it returns a value.
09:03.550 --> 09:06.340
In this case it returns the squared value.
09:06.340 --> 09:10.720
Now if we were to run the program in its current state it wouldn't do anything.
09:10.720 --> 09:15.020
We wouldn't see any output related to our second function right here.
09:15.130 --> 09:20.290
We get three instances a welcome user but we don't get nine or 100 printing.
09:20.290 --> 09:23.610
That's because the return value isn't being used.
09:23.620 --> 09:28.210
So let's figure out how to use it and then we'll move on to a challenge where you'll need to create
09:28.210 --> 09:29.580
a function of your own.
09:29.590 --> 09:33.620
What I'm going to do right here online 16 is create a variable.
09:33.640 --> 09:38.120
So let the value equal.
09:38.170 --> 09:44.280
And then on the right hand side as the thing to store in value I'm going to keep the function call.
09:44.380 --> 09:49.950
So this is the setup we use to call a function with an argument and then store the return value.
09:49.960 --> 09:52.740
So the end result of this is the return value.
09:52.810 --> 09:55.270
And here we're just putting it in a variable.
09:55.300 --> 09:57.960
We can do the same thing down below for square 10.
09:57.970 --> 10:00.210
Let's go ahead and actually do that right here.
10:00.220 --> 10:03.700
Let other value equal.
10:03.700 --> 10:08.290
And then what are we going to do while we're going to get the value back from calling square with the
10:08.290 --> 10:09.240
number 10.
10:09.250 --> 10:10.930
The end result 100.
10:11.050 --> 10:16.130
Now we can actually print both of these to the screen console dot Lague value.
10:16.420 --> 10:19.880
And you'll notice something log is indeed a function.
10:20.020 --> 10:26.070
We're calling it with some disease and we're passing in an argument whatever argument we pass in gets
10:26.070 --> 10:27.920
printed to the console.
10:27.990 --> 10:30.100
So now we know a little bit about this line.
10:30.120 --> 10:33.570
We still don't know what the DOT part is and the.
10:33.600 --> 10:38.880
Up front but we can at least break down this piece right here on the next line.
10:38.880 --> 10:45.840
Counsel not like other value then we're going to do is save the program and see what happens when we
10:45.840 --> 10:46.680
run it.
10:46.770 --> 10:51.470
I'm going to rerun the script and this time around we are getting welcome user three times.
10:51.510 --> 10:57.150
We're then getting the number nine which is the correct result and the number 100 also correct.
10:57.150 --> 10:58.240
So there we have it.
10:58.350 --> 11:01.950
We have a function that has a set of arguments a number.
11:01.950 --> 11:08.070
We've got our code we have our output when we want to call a function we reference it by name with some
11:08.070 --> 11:09.960
parentheses on the end.
11:09.960 --> 11:13.660
In there we can pass in the input we want to provide the function.
11:13.770 --> 11:18.900
And if we want to do something with the return value we can just put the function call over here with
11:18.900 --> 11:21.310
a variable set up beforehand.
11:21.540 --> 11:27.180
Now that we've seen all of this in practice I want you to create a function on your own as the challenge
11:27.240 --> 11:28.110
for this video.
11:28.110 --> 11:33.720
So down below a little challenge area is indeed appropriate for this challenge.
11:33.720 --> 11:40.860
You're going to be creating a function called convert Fahrenheit to Celsius.
11:40.890 --> 11:46.970
And as the name suggests this function is going to take in as the argument the temperature in Fahrenheit
11:47.250 --> 11:53.430
it's then going to run the conversion algorithm and it's going to return the temperature in Celsius.
11:53.430 --> 11:59.310
So after you create the function you're going to call it down below call a couple of times.
11:59.430 --> 12:04.250
And if you want some sample values 32 shall get converted to zero.
12:04.350 --> 12:11.570
And then another good one would be 68 degrees Fahrenheit which should get converted to 20 degrees Celsius.
12:11.610 --> 12:18.030
Then the last thing you're going to do is print the converted values.
12:18.240 --> 12:20.990
So this is very similar to what we just did above.
12:21.000 --> 12:22.580
We defined our function.
12:22.580 --> 12:26.870
We then called the function a couple of times and then we did something with the return value.
12:26.880 --> 12:32.190
That's exactly what you're going to be doing down below to find the function call it do something with
12:32.190 --> 12:33.850
the return value.
12:34.080 --> 12:39.090
If you forget how to convert the temperature Don't worry you can just use the temp conversion project
12:39.120 --> 12:43.020
that you created before you have the algorithm sitting right up top.
12:43.020 --> 12:46.580
If you don't have that file anymore you can always download it.
12:46.590 --> 12:51.110
It's available in the lecture zip for every single lecture.
12:51.240 --> 12:55.680
All right take some time to knock this one out and then go ahead and test your work.
12:55.710 --> 12:59.940
When you run the program you should see 0 and 20 at the bottom.
12:59.940 --> 13:04.340
Assuming you're using the same two input values I set up right here paused the video.
13:04.340 --> 13:06.560
And when you're done click play
13:10.510 --> 13:11.140
How'd that go.
13:11.140 --> 13:14.190
Hopefully you were able to get that done without too much trouble.
13:14.320 --> 13:17.250
I'm going to kick things off by defining the function up above.
13:17.260 --> 13:22.480
I already have the variable name typed out so I'm just going to remove the two slashes and toss let
13:22.540 --> 13:28.870
up front and then going to set this equal to a new function count my function keyword arguments list
13:28.910 --> 13:30.520
and the code to run.
13:30.520 --> 13:32.860
Now there is going to be a single argument for this one.
13:32.950 --> 13:38.000
The name you picked isn't particularly important as long as it's meaningful so maybe you will with temp.
13:38.020 --> 13:40.420
I'm going to go ahead and go with Fahrenheit.
13:42.210 --> 13:45.740
Next up we need to actually do the conversion process.
13:45.750 --> 13:48.360
I have to get the value in Celsius.
13:48.480 --> 13:54.150
We already have that code sitting right over here so I can actually just take that algorithm copy it
13:54.510 --> 13:55.980
and paste it right in here.
13:56.160 --> 14:01.230
Now it's important to remember this algorithm references some variables like Fahrenheit but that's OK
14:01.470 --> 14:04.050
because we have Fahrenheit defined up above.
14:04.080 --> 14:07.750
So we actually don't need to change anything about this line.
14:08.040 --> 14:10.240
What's the next thing we want this function to do.
14:10.320 --> 14:12.830
We want it to return the converted values.
14:12.840 --> 14:16.470
So down below we can wrap up our function by using return.
14:16.500 --> 14:17.760
What are we trying to return.
14:17.760 --> 14:21.760
We're trying to return the temperature in Celsius.
14:21.780 --> 14:25.920
Now we can move on to the second stage which is to actually call this a couple of times.
14:25.920 --> 14:33.790
So right here let Tempel 1 equal and we can go ahead and use our function convert.
14:33.810 --> 14:38.550
And you can see that the auto completion is actually picking up on the function that we created and
14:38.550 --> 14:42.810
right here we can just click that to auto complete it and then we can pass in the value.
14:42.880 --> 14:45.940
I'm going to pass in 32 degrees for the first one.
14:46.200 --> 14:48.450
Let's go ahead and duplicate this line.
14:48.450 --> 14:50.460
I'm going to go ahead and highlight the whole thing.
14:50.460 --> 14:52.810
Copy and paste it down below.
14:53.070 --> 15:00.890
And now we're going to do is define temp 2 for the second call and we'll change the value.
15:00.960 --> 15:05.560
Let's go ahead and change it over to the other sample data I gave you that was sixty eight.
15:05.580 --> 15:13.290
The last thing to do is to print those two values so cancel dot Lague temp 1 and down below that cancel
15:13.390 --> 15:16.740
dialog passing in temp to.
15:16.800 --> 15:21.250
With this in place we can remove those comments and we can go ahead and test our work.
15:21.330 --> 15:24.380
Let's cross our fingers and hope everything works as expected.
15:24.510 --> 15:29.880
Right here I'm going to rerun the script and the only two values we care about are the last two values
15:29.880 --> 15:35.040
the logs that come from the challenge right here we're getting zero for the first one which is correct
15:35.280 --> 15:37.340
and 20 for the second one also.
15:37.440 --> 15:38.630
Looking good.
15:38.790 --> 15:39.480
So there we have it.
15:39.480 --> 15:43.750
This was a quick rundown on the basics of functions.
15:43.770 --> 15:49.560
Now at this point you probably still have a ton of questions for example can I pass on multiple values.
15:49.650 --> 15:54.480
What happens if I call a function and don't pass in the arguments it expects we're going to get to all
15:54.480 --> 15:56.620
of that in this section.
15:56.730 --> 16:00.600
At this point what I want to explore is the basic syntax.
16:00.600 --> 16:06.330
The fact that when we create a function we have our arguments the code and our return value.
16:06.330 --> 16:08.960
We've seen that in a couple of different situations.
16:08.970 --> 16:13.700
Let's continue on to the next video and start exploring some of the details.
16:13.710 --> 16:15.030
I'm excited to get to that.
16:15.060 --> 16:15.820
I'll see you then.
22342
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.