- Read Tutorial
- Watch Guide Video
In this section on closures I'm going to start off by talking about the different types of functions that are available in typescript and I'm not talking about types in terms of you know what a type returns such as a string or a number or something. I'm actually talking about the different ways that we can define a function. And you going start off by giving the one that we've walked through so far and this is called a function declaration.
Now with a function declaration you are pretty familiar with this syntax so we can do function followed by full name and then pass in something like. First which is going to be a string. And then last which will also be a string and we can also say that we want this to return a string and inside of it we can say first was the space and then plus last. Now you know how to do this and this part should already be pretty familiar to you. However in typescript we can also do something called a function expression. So a function expression is going to be when we declare a variable or redefine a variable and then from there we actually assign of function to that variable. And so I'm going to create another full name method here and keep the behavior identical. So you can see the syntax difference. So I'm going to say var other full name and inside of this instead of declaring a type I'm actually going to give the arguments. So this is going to be a first which will be a string. And then last. Which will also be a string. And whenever you're defining a function expression instead of providing a data type in the colon form like we see right above here with the function expression we use what's called a fat arrow. And so a fat arrow is what we use to say that we want this function expression to return a string. Now I come down that is only created the variable and assign the arguments and the return type. But now we actually have to assign this to a function. So now I'm going to say other full name equals just the word function and after function instead of the name of the function. Now I'm just going to pass in the arguments and these are going to be the exact same as in here. So I can just copy and paste those in and I could say that this returns a string. However that would be duplicate code. Because right here when we're defining the variable this is actually going to be this is going to set that. So we don't have to duplicate that code here. And now inside of this it's expecting a string. So I'm just going to copy this and paste it in. And now this is how we can create a function expression. Now additionally I want to show you one other way you can do this because you're probably going to see multiple ways.
// Function Declaration
function fullName(first : string, last :string) : string {
return first + “ “ + last;
}
And that's where you can do this all on the same line so you can combine what we did here on line 8 and on line 10. So here I’m going to say third full name and I can pass in first followed by last followed by string and then from there I can give our fat arrow pass it to a string and then I can press equals and copy this. All of the rest of this code. I don't need two equals. And now I'm going to create some console log statements just to make sure that all of this is actually working. So we have our full name which will take in my name. And a few other ones here we have other full name and then third full name. Now if I come to the terminal. That all ran through properly.
// Function Declaration
function fullName(first : string, last :string) : string {
return first + “ “ + last;
}
// Function Expression
var otherFullName : (first : string, last : string) => string;
otherFullName = function (first : string, last : string) {
return first + “ “ + last;
}
var thirdFullName : (first : string, last : string) => string function (first : string, last : string) {
return first + “ “ + last;
}
console.log(fullName(‘Jordan’, ‘Hudgens’));
console.log(otherFullName(‘Jordan’, ‘Hudgens’));
console.log(thirdFullName(‘Jordan’, ‘Hudgens’));
So now if I go 017_function_declarations_vs_expressions and it looks like we have a little syntax error let's see where the error is. Oh it's just because I included the dot. So that will work properly so that means all of our code structure is working.
Now when you're looking at this your first question is probably why in the world do I need to do this. And that's a very fair question. If you've never worked with high level JavaScript frameworks like angular or react or anything like that and where the difference here comes in is when these methods and when function expressions are processed compared with when declarations are processed. So I'm going to copy all of these actually and cut them and come to the very top of the file. And now if I run this code right here you're going to see some very interesting behavior going around code. Run this and you can see we have an error but notice with where the error is it's in other full name. And it says other full name is not a function. But you notice how it skipped fullname.
console.log(fullName(‘Jordan’, ‘Hudgens’));
console.log(otherFullName(‘Jordan’, ‘Hudgens’));
console.log(thirdFullName(‘Jordan’, ‘Hudgens’));
// Function Declaration
function fullName(first : string, last :string) : string {
return first + “ “ + last;
}
// Function Expression
var otherFullName : (first : string, last : string) => string;
otherFullName = function (first : string, last : string) {
resutrn first + “ “ + last;
}
var thirdFullName : (first : string, last : string) => string function (first : string, last : string) {
return first + “ “ + last;
}
I'm going to comment both of our expressions out and I'm going to run this again. You can see that that actually worked. So what in the world is going on. You can see that even though we're calling full name before the method is even defined but it didn't work for the function expressions. What is occurring here is a concept called JavaScript hoisting. And if you've never used hoisting before it is spelled out like this. So it's hoisting. And what it means is that values can actually be hoisted up and this is only one part of JavaScript also performs differently for hoisting variables. But that's a different discussion that we'll have. For right here. What you can. The way you can think about this is that when a full name is invoked like it is right here what JavaScript does is it goes and it looks for full name in this file name function and it calls it up top and it processes. However that's a way function declarations work that is different from how function expressions work expressions have to be defined before they can be called. And if your first response is why in the world would I ever want to use an expression because it seems like these work better. That has to do with how JavaScript and especially once you get into some of the frameworks like angular and some of these JavaScript frameworks it has to deal with how they work with asynchronous behavior. So being able to work with things like promises or making JavaScript json API requests different things like that. You don't actually want the method to be called at runtime. You need the ability for it to be processed later on down the road.
console.log(fullName(‘Jordan’, ‘Hudgens’));
// console.log(otherFullName(‘Jordan’, ‘Hudgens’));
// console.log(thirdFullName(‘Jordan’, ‘Hudgens’));
// Function Declaration
function fullName(first : string, last :string) : string {
return first + “ “ + last;
}
// Function Expression
var otherFullName : (first : string, last : string) => string;
otherFullName = function (first : string, last : string) {
resutrn first + “ “ + last;
}
var thirdFullName : (first : string, last : string) => string function (first : string, last : string) {
return first + “ “ + last;
}
So even though these systems may seem very similar and function declarations may seem more straightforward to work with function expressions are one of the more powerful tools that you're going to be able to use when building and Angular based applications. And really any type of JavaScript framework based application. So this guide I wanted to give you one, the syntax for how to use function expressions but I also wanted to go into the differences in key differences between declarations and expressions because this is going to be used a lot down the road if you go and look at any angular 2 repositories you're going to see code like this scattered throughout these applications. You're going to see lots of these type of functions.
So that is something I wanted you to be able to get a good feeling for what the differences between declarations and expressions were so that when you see them you'll know that and you'll be able to say OK this is a declaration which means it's going to be invoked and it can be invoked at any time whereas this function expression this one's going to have different behavior and it has to be defined before we can call it. So in the next guide I'm going to go through how we can work with methods to actually run instantly so I'll see you then.