Check out a free preview of the full Getting Started with JavaScript, v2 course
The "Functions" Lesson is part of the full, Getting Started with JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:
Kyle explains why it is useful to group code together into a function, highlights the parts of a function signature, and shows what a function evaluates to after changing its arguments and running it.
Transcript from the "Functions" Lesson
[00:00:00]
>> Kyle Simpson: We have seen a number of times already, and you've heard me say over and over function. And some of you are like, why does he keep saying it? What is a function? Well, similar to the idea of wanting to repeat things, there are times when we have a collection of statements like a paragraph in a novel.
[00:00:17]
But we wanna do that multiple times in different places, not multiple times in a row but like do it one time and a little bit later do it again. And maybe a minute later do it again. And that's when we wanna group that information into what we call a function.
[00:00:34]
Actually technically the computer science programming term for this would be a procedure. It's a collection of things that we want it to do. So greetStudent like the one we were using just a moment ago with the looping. greetStudent takes the students name, I mean a student object in this case.
[00:00:54]
And we know it's an object because of line three. You see student.name, that implies that student is an object in memory that has a property or a key called name and we're gonna go access that. First we're gonna access student and then we gonna access the name property on it.
[00:01:12]
So we gonna just print out Hello, and then whatever that students name is, by the way, you'll notice these little backtick operators here. That's the sort of cousin to the double quotes and single quotes, this is a special kind of string in JavaScript that's called an interpolated string.
[00:01:32]
I know that's a big mouthful, interpolated string. All that really means is a string where we're gonna put other kinds of variable values directly inside of it. And that's what you see on line three, that special dollar sign with the curly brace thing wrapped around student.name. That says, go find whatever that is, and just put it right in place inside of this string.
[00:01:55]
Which is why when we actually do the console.log, it would print out Hello, Matt, or Hello, Sarah. So, that's a procedure it uses the word function to note it and it has a name, called greetStudent. It has online one there, it has student that's called a parameter. That's the input to it and it's just doing something, but you'll notice that it's not really giving us anything back.
[00:02:21]
That's really why we call it a procedure because it's not giving us anything back. It's doing something which is important but not giving us a value back. What's an example of something where it would give us a value back? Well, this is a little bit more truer to the spirit of a function, and functions a special word that actually comes to us from math.
[00:02:42]
And some of you may have heard of functional programming before. That's the idea of writing these things, not just that they do stuff, but that they compute values and they give them back to us. So here I have what's called a function called time remaining. It takes two inputs now.
[00:02:57]
It takes a time elapsed variable and an end time variable. Those have a special term they're called parameters. The inputs to a function and you'll notice that it returns those back, it computes an expression and return as the value. So we say endTime minus timeEllapsed and then we say return whatever that value is.
[00:03:20]
So if timeEllapsed comes in as 42, you see that on line five and if endTime comes in at 240, then when we subtract those, subtract 42 from 240, what we have left, of course, is 198. That on line five we assign to the variable left and then we see line seven that that value 198 is in there.
[00:03:46]
So time remaining here is a function because it takes some inputs and it computes an output for us, it doesn't really go and do other stuff like print to the screen it just says let me do some work and give you a result back. When we give you a computational results back, let's try to run a function and mess around with the arguments and see how it changes.
[00:04:06]
We know if we run it with these existing argument we get 198. But, if I were to change this around a little bit, maybe say, make that 140 then were gonna get different result 98. And what if I were to change this expression around a little bit, what if I were to make this an expression divided by two and then all of a sudden, whoops, we've got a syntax area.
[00:04:29]
That's important for you to be able to see the kinds of things that are happening in your program and sometimes you make a mistake. I have an accidental parentheses here. So I take that back out. We run it again and now we get a different result.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops