In this guide I'm going to talk about arrow functions in typescript. Now we've talked about functions at length we've already discussed a number of different ways that you can create functions and you should be familiar with the syntax for that. Now what I'm going to talk about is a shorthand version for creating functions which is called the arrow function.

So there are a number of benefits to it. One very nice one is that you don't have to type in the function key word anymore. Another nice benefit is how it works with the “this” concept. And we're not going to get into the “this” keyword until a little bit later on in the course because I want to bog you down with too many concepts all at once. However just keep in mind that there are a number of benefits in addition to the nice syntax. Now also if you are coming from a language that uses lambdas then this should also feel very similar because the arrow function essentially is the lambda function and functions very similar to how it does in Ruby or a language like that.

var fullName(first, last) {
  return first + “ “ + last;
}

console.log(fullName(‘Jordan’, ‘Hudgens’));

//Jordan Hudgens

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’;
  }
}
// F
// A
// B

So right here I placed our code over from our function guide. And so we have our full name function and we also have our grade generator function. Now these are already outputting and I commented out what their output is. You can see it right here. This one puts my name and this one inputs three respective grades based on these values. Now in order to change these into the into the arrow functions you can simply get rid of the function keyword. And we're going to say var and then the next thing after that is the name of the function. In this case it's called full name. Set this equal to the set of arguments and then right before the curly brackets pass in an equal sign and then the greater than sign. And what that is. This is the arrow function syntax. Notice that this is slightly different than what Ruby has for their stably lambdas with a dash in the Arrow. This is considered what's called a fat arrow. And so it's an arrow followed by the greater than sign.

var fullName = (first, last) => {
  return first + “ “ + last;
}

console.log(fullName(‘Jordan’, ‘Hudgens’));

//Jordan Hudgens

Now also keep in mind this is different than when we're assigning types to return types to functions. This is specifically for creating a lambda or creating functions with this kind of syntax. So that is all we have to do. And now we have a full name method that works exactly the same way except we use the syntax.

Now I'm going to do the same thing over here and say they're not functioning as a var grade generator equals. And then pass in the arguments just like this and we're going to keep our with a data type that will be returned because we want to keep that static type. And then right after it pass in this fat Arrow syntax and that is it. Now to confirm that this is working. This is 016_5_arrow_functions. We can come here. Run the code. Run arrow functions and there you can see it's still working perfectly. So that is all you have to do to use a syntax.

var 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’;
  }
}
// F
// A
// B

I created a guide specifically for the arrow function one because if you've never used it before it may look different. And I wanted to use identical methods to what we did before. So you could see that at a high level that really just functions and it's just a different way of creating a function as we go along the course. We'll talk about some different ways they can be used. One of the most powerful ways is that this really helps with some scoping when it comes to scoping variables. And the this variable which will go into more detail on and then also it does have a very nice syntax so I personally I do enjoy being able to see these and when you go through and especially you go into angular to development you're going to see these little fat arrows all over the place. So it's good to become familiar with them and know what they mean right now. So that is how to use aero functions in typescript.

Resources

• Source code