This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "JavaScript Functions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Nina Zakharenko: Functions in JavaScript are a way of kind of grouping a bunch of things together, you wanna do over and over into a way where it's easy of repeating them, like the same action that's contained in the function multiple times. So, the anatomy of a function.
>> Nina Zakharenko: Here's the variable that we're assigning it to.
[00:00:28] You can also create a function in different syntax, but we're not gonna cover it today.
>> Nina Zakharenko: We use the keyword function along with parentheses. And inside those parentheses, you're gonna put what's called arguments to your function. So it can be one thing, or a list of things that are comma-separated.
[00:00:53] And what these variables are gonna do is be accessible inside of your function. So you're passing something into the function, the function does something to that thing.
>> Nina Zakharenko: We have an open curly brace and close curly brace and a semicolon at the end to end the function.
>> Nina Zakharenko: And then we're at this arrow here at the left, everything inside those brackets is the body of the function, that's what's gonna get run when it's called.
[00:01:32]
>> Nina Zakharenko: So when we declare a function, it's different from a statement. So far we've had a bunch of lines of code and they're executed one by one. If there's a if and the condition is at met, for example, it skipped. But when we declare a function this way, we have a variable called printList and this function is put in it so we can use it later.
[00:01:56] But nothing inside that statement is actually going to get run until we explicitly call the function. The way that we call a function is by putting the function name and then open parenthesis if the function has no parameters, so this up here is empty, you don't have to pass anything in, otherwise you wanna pass in the number of variables that this function is expecting.
[00:02:33]
>> Nina Zakharenko: So let's do an exercise here. We have our very familiar list of fruits, [LAUGH] down here we have,
>> Nina Zakharenko: We have a function called printList. So this function takes the list. It loops over it in a four loop. And it'll output a list of values contained in that list.
[00:03:07] So let's do an exercise. Let's add two more lists. We're gonna do one of your favorite cars and one of your favorite ice cream flavors. And let's call printList on your new list.
>> Nina Zakharenko: So I'm gonna give you guys a few minutes for that one.
>> Nina Zakharenko: So I'm gonna start working along with you guys.
[00:04:12]
>> Speaker 2: There is a question about if a, is there any way for a function to take a specific type only?
>> Nina Zakharenko: No, with JavaScript, but what you can do is, inside of your function you can call type of, or do some other sort of check, make sure that what's getting passed into your function is what you expect, if it's not, you can just throw an error.
[00:04:36] And that's a good way to validate and circumvent something worse going wrong.
>> Nina Zakharenko: Does everyone see that same result?
>> Nina Zakharenko: So let's go ahead and modify our function. So, outside of this four loop, we don't want it to happen over and over and over, let's add a new document.write, let's say ('These are a few of my favorite things").
[00:05:48]
>> Nina Zakharenko: And add one more ("<br>") in there just so we can break up our results.
>> Nina Zakharenko: So now after every list you should see these are a few of my favorite things.
>> Nina Zakharenko: So everyone-
>> Speaker 3: Write like a plus and then br, these are a few of my favorite things plus br [INAUDIBLE].
[00:06:19]
>> Nina Zakharenko: Yeah, you can do that too.
>> [INAUDIBLE].
>> Nina Zakharenko: Yeah.
>> Nina Zakharenko: So everyone see these results?
>> Nina Zakharenko: So let's go up and modify our function again, so, right now, am conveniently printing stuff out, which is great cuz I get to see it right away. But, a lot of functions are kind of functional, so we're not using them to print stuff out, you're using them to do something.
[00:07:11]
>> Nina Zakharenko: So, let's clear these things out.
>> Nina Zakharenko: Let's do let's say, a little bit of validation. So let's use our handy if statement. And say if (list.length is < 3), and here we're gonna introduce the return statement. So we're gonna return not enough elements.
>> Nina Zakharenko: So, what returned us is it ends the execution in that function and pops out of it and whoever called it is gonna get back what your passing in the return statement.
[00:08:03] So we have our validation here. If a list is less than three, nothing after this return will get run. But if our list is greater than three, let's go ahead and return the very first element in it.
>> Nina Zakharenko: This example is kind of contrived. Probably wanna do a little bit more to it than just return the first element.
[00:08:33]
>> Nina Zakharenko: So.
>> Nina Zakharenko: So now we're storing the result of this function printList into this variable return value. And after we've done all our calculations, now we can just say document.write.
>> Nina Zakharenko: This will go ahead and return that first element in the list.
>> Nina Zakharenko: Another thing we can do is call the function inside of document.write which is just another function so in these parentheses we can just say printList.
[00:09:32]
>> Nina Zakharenko: Let's do cars. This kind of implicitly calls the printList function on this cars value.
>> Nina Zakharenko: Oops, sorry you guys. I messed up here. It should be return list of 0 and not fruits of 0. Cuz then you're just always gonna get the same fruit. So now this is the value that we expect to have.
[00:10:11]
>> Nina Zakharenko: So anyone have questions about the different ways of calling functions? Why these two things return, do the same thing?
>> Speaker 4: We didn't go over, why printList is called before document.write.
>> Nina Zakharenko: It's a good point. So in lots of programming languages, things are nested by a parentheses. And the thing that's in the innermost parentheses is going to get executed first.
[00:10:51] So, cars gets executed, it doesn't really, nothing really happens because it's just the list. Then printList gets executed and passed into document.write, so let's say I have another function.
>> Nina Zakharenko: I'm gonna call it concatValues function.
>> Nina Zakharenko: Actually, I'm gonna call it concatLists function, so I am gonna take a list1 and a list2, and I am gonna return.
[00:11:43]
>> Nina Zakharenko: Sorry, that's concat not contact.
>> Nina Zakharenko: Here we go. So I can nest this even deeper and say, document.write, the result of printList, printList gets called on the result of, can call this concatListFunc and call it on our fruits and our cars.
>> Nina Zakharenko: And wait for CodePen to update.
[00:12:36]
>> Nina Zakharenko: So.
>> Nina Zakharenko: Yeah, so here are just returning the first item.
>> Nina Zakharenko: And we can go ahead and mix these up a little bit.
>> Nina Zakharenko: So now that returns subaru instead of peach.
>> Speaker 2: There's a question on real world usage of anonymous functions. Would you recommend naming all your functions or using anonymous functions in some of these?
[00:13:13]
>> Nina Zakharenko: I think naming functions and being explicit is a lot better than having anonymous functions because JavaScript there's this thing called hoisting, and if you're not setting your functions to a variable, things can kind of happen out of order. So you can call a function before it's declared.
[00:13:35] I consider it a source of mistakes.
>> Speaker 4: There are instances where it makes sense to use anonymous functions and tomorrow morning we're gonna go over one of them which is using jQuery and event listeners.
>> Nina Zakharenko: Yeah.
>> Speaker 4: Yeah, typically this JavaScript code would say in the body of the HTML?
[00:13:57] Is that where it would live? I mean.
>> Nina Zakharenko: Not necessarily. And we're gonna go over this when we go about, when we talk about paths tomorrow. So your JavaScript would live in a JavaScript file and your CSS would live in a CSS file or multiples of them. And then in your HTML, you would reference those files.
[00:14:17] And the browser is gonna take care of smooshing it all together.
>> Speaker 4: So in add function is obviously you can call functions from within the JavaScript. But how does the JavaScript tie in with events on the page itself with button clicks or mouse movement, things like that?
>> Nina Zakharenko: So it depends on the kind of event but tomorrow we're gonna talk about jQuery, and in order to use jQuery, we need to include the jQuery file at the top of our HTML.
[00:14:49] So what that actually kinda does behind the scenes is takes that giant jQuery file and paste it into your HTML file, which means that in your HTML, like or anything that really comes after that jQuery include, you can reference things before it.
>> Speaker 4: And that has access then to the page [INAUDIBLE]?
[00:15:11]
>> Nina Zakharenko: Yeah.