- Read Tutorial
- Watch Guide Video
In this guide we're going to get into a very exciting part of typescript which is how to create functions. Now I'm going to show you two different ways of creating functions and since functions are so important in not just typescript But in any programming language we're going to actually be learning various ways of working with functions really for the rest of this course. So this guide is going to serve as a foundation that will build all of the rest of our function knowledge. We're not going to learn everything in the next few minutes, but what I'm going to do is give you the syntax for what we're going to be doing along with some strategies for building functions and then later on we'll get into more advanced topics such as closures and default arguments things like that.
So first and foremost what is a function a function is a programming mechanism that allows you to encapsulate data behavior things like that and then call it any time and have the function run whatever processes are inside of it.
So a very basic function would be. Creating a function called full name. Now what this function is going to do is it's going to return back a printable name. So inside of that, that means that we have to give it a set of arguments. These are items we're going to have to pass to the function every time we call it. So I'm going to give arguments of first and last which are going to be a first name and the last name, and then we're going to put in curly brackets and inside of this we're going to return a value. Type in return. First plus and then put a space inside, and add last and then put a semi-colon.
function fullName(first, last) {
return first + “ “ + last;
}
So what this function is going to do it Encapsulates all this behavior right here which is very basic and it simply adds and connects the first name to a space and then connects a last name right after it. In order to run this I mean just copy this function definition and we want to do console logs so we can actually see what it looks like. And inside of that we're going to pass in some values. Now notice that typescript is smart enough to realize that these should be string values and that first and last are right now it's thinking that these are functions or something. So I'm going to get rid of this. And type in Jordan. And here. Type in Hudgens. And if we run this then this should all work. So if I run tsc. And then node. You can see it prints out my full name. Now this is the most basic type of function declaration that you can have. I’m going to comment this out because there are times will you when you will use something that basic but usually because this is typescript we're going to be using something that is a little bit more type specific.
function fullName(first, last) {
return first + “ “ + last;
}
console.log(fullName(‘Jordan’, ‘Hudgens’));
So I'm going to create another function here. This is going to be a longer one and it's going to be called grade generator. And inside of it it's going to take a grade but I don't want to just pass a grade in. I want to actually enforce what this grade is going to be and it's going to be of type number and then I can put curly braces here and then everything will be fine. So now I can come and create the functionality. However I also want to be very specific on what this returns. So I want to call this method. Pass in a number. You know we are going to pass in a grade so we pass in something like 90 or 50 or whatever the grade is. And I want to make sure that a letter grade is returned and because of that it's going to be a string. So what I can do is add a colon right after the method or the function definition and I can say that I want this function to return a string and you can see right now gives us our little squiggly line compiler error because this would not work because right now we're not returning anything. If I type in return and then I do return a string. Notice how this goes away. So all that is happening here when I'm saying, colon string is that whatever this method returns when it runs. Is it faster returns some type of string. So that's all that that means.
Now I'm going to create our functionality here. So I'm going to say if grade is less than 60. Then I want this to return the letter grade F and see our error is gone and everything's working that we also need to say. Else if and then pass in another set. So here I mean say if the grade is greater than or equal to 60, and the grade is less than 70. Then I want you to return. The letter grade D and I'll be able to copy this for the other one so this one is going to be greater than or equal to 70 and less than 80. For letter grade C and then it's going to be greater than or equal to 80. But less than 90. For a B. And lastly I don't really need anything here because anything that is it it's going to be obviously greater than 60 and it's going to be greater than 70 80 90 so anything above this is going to be an A. So I don't need all of this code. I can just get rid of all of it and just say else return A. Now when I call this I'm just going to console log out a few items into to console log grade generator in a pass and the value 45. And I’m going to do one that is a hundred and one that's 80. And so this should return a F A and then a B. So let's come and run this code.
function gradeGenerator(grade: number) : string {
if (grade < 60) {
return ‘F’;
} else if (grade >= 60 && grade < 70) {
return ‘D’;
} else if (grade >= 70 && grade < 80) {
return ‘C’;
} else if (grade >= 80 && grade < 90) {
return ‘B’;
} else {
return ‘A’;
}
}
And there you go an F an A and B. So this is another way of creating a function inside of typescript. And the important difference here if you look at these two is this one is going to have the ability to be less buggy and it's going to be more intuitive on how it can be used. So pretend that you didn't see all of the items inside of grade generator and some other developer was trying to use this or you're trying to use a but you didn't know the details associated with it if you didn't know that grade was supposed to be a number and that it was returning a string. You'd have to go dive into the whole thing and you might make a mistake and think oh great generator Yeah I can pass the letter H to it. And that's how I'm logging my grade. And if you left the system like this where you weren't passing anything in then it would actually let you do that or especially if you're using regular JavaScript it would let you do that. But by declaring the type that we have to have for the argument and the return type we can be a lot more confident on how to work with this method. We know that we have to pass in a number value and we know we're always going to get a string return. The system won't even work and the program won't compile without that. So just some more benefits to using typescript, and being able to help you create some less bug buggy type code.
So these are two different ways you can create functions and in the next guide. I'm going to walk through how to use some more advanced arguments such as default argument types and some things like that with typescript functions.