Loading
Current section: 5. Functions 7 exercises
lesson

Intro to Functions

Loading lesson

Transcript

00:00 Hey. Welcome to the functions exercise of the workshop. This one is great. You're gonna use functions everywhere. So far, we've got programs that will run line by line.

00:11 Sometimes they'll skip lines. Sometimes they'll repeat lines. But pretty much they run top to bottom and that's it. Now, we're gonna be able to take a section of that program, put it in a special place and then our program as it's running can go over there for a second, go do stuff and then come back and then go over there, do stuff and come back. And in fact, this is really cool.

00:28 We're not actually gonna cover this in exercise, but you're gonna have chunks of code. And inside of that can be references to other functions that are chunks of code. So this can go all the way down. This would be like, like, go into here, and now go into here, and go into here. This is actually what we call the call stack.

00:45 And so as it goes down, we're we're stacking these calls. And when it's done, it returns. And then it comes back to this one, and it continues, and then it goes back to this, continues, and then maybe it goes into this one and continues. It's it's pretty interesting. And we're using functions all through all of that.

00:59 So functions are really critical part of programming in general and JavaScript in particular. So let's explore a little bit about the syntax of this and then, you know, jump right into the exercise. So here is a basic typescript function. There's, the function keyword, the name of the function, some parenthesis, the arguments that it's going to accept or the parameters that we're gonna pass. And, so here we've got a as a number and b as a number.

01:24 We need to have those types. And then you have, what we call the return type. So what we're expecting to return from the function, that is a number. We're gonna return a plus b. Okay?

01:34 Pretty straightforward. That makes sense. That return keyword is important there. These braces are important there. And this is what we call a function declaration.

01:41 We'll explore that versus some other ways that you can write functions as well. So, yep. Talked about. This is maybe a little more spaces there. There you go.

01:50 That's a parameter. This is the name. We probably could specify that, but this is the TypeScript, portion specifically. And then here's our return type. And, yeah.

02:00 So you might wonder why do we need to type the functions? Why do we need to specify this? Hopefully, by now, you've kind of gotten used to how TypeScript can help with things. But here, if we had a function without types called process, we don't know what data is. We, don't get any TypeScript help from data.

02:17 And so for the same reason, we wanna type our variables. We also wanna type our inputs. It just makes it much more clear what we can do with the data that we're receiving. And on the other end of things, people are going to be calling our functions. They're gonna be passing things to our functions and they might have variables or expressions they wanna pass to it and they want to be warned and compilation to fail if they are not passing the right thing to our function because if we're expecting an array that has a length property and we pass, I was gonna say a string but a string actually also has a length property.

02:51 If we pass it a number, then that's going to blow up in our faces because numbers don't have a length property. And then also the return value is important as well because if we call process with something and we, get something back and we try to call a string method on it when it actually is supposed to return a number, then it'll blow up. And so, by having these, types specified, it makes things a lot more clear and help, TypeScript can help us with that. TypeScript can infer some things. We're gonna have an exercise about that as well.

03:21 So we've got our, function and you'll notice it is returning a number here, but we don't have a return type like we have in the previous example. And, yeah. That's because TypeScript is able to look at all the returns in our, function which by the way you can have multiple returns. You have if this then return that, otherwise return that. So you can have multiple return statements, but it looks at each one of those return statements and, that from that, it derives what the return of this function could possibly be.

03:51 And then we'll also talk a little bit about the forms that functions can take. And here, this is called a function declaration. That's I prefer that typically, but, arrow functions are also a format that you can use and, we'll look at that as well. And then finally, I don't actually really talk about this so much in this exercise, but, because we haven't quite gotten to this point yet. But with, arrays, you have the special methods that can accept functions, and it's typically easier to pass an arrow function to that.

04:22 And we do have an example of passing a function to another function. So you'll get a little bit of exposure to that, which would be cool. And with that, I think we are good. So awesome. Let's just jump into oh, also, we do talk about documenting your functions too.

04:36 So look forward to that. K. It's gonna be great. Have a good time. We'll see you.