ESX has established a new syntax for functions and is called arrow functions. It doesn't do away with the syntax, you've just learned that it's still very much viable. But the syntax used for arrow functions requires less typing. They're much more compact. And they also address another issue that was with functions that has to do with this keyword, something we haven't talked about yet. But those are the two reasons that arrow functions were developed in ESX.
Now, should you switch to arrow functions? Well, let me first introduce arrow functions to you. And then we'll have a discussion about when you might want to use them. So let's take a look at this new syntax. So here is a function This is a function expression is simply adds two numbers together and returns the results. This is our regular syntax for the function.
Now how would this exact same function be defined using arrow functions. Let's take a look at that. This one line is the same function using an arrow function. And you can see why they call it arrow functions. It uses equal sign and then a greater than operator to create an arrow. Now let's look at the parts of this arrow function.
So all arrow functions are function expressions. So in this case, it's part of an expression that is assigning the function to a variable sum just like we had up here. Notice we can skip the function key word That is gone. In fact, it's replaced with the arrow. We still have the parentheses if we want to pass in arguments, and so we have to designate the parameters inside of parentheses. Then we have the arrow.
And the arrow accomplishes a couple of things. It identifies it as a function. But it also, since there's only a single line here, it says to return the results of this statement number one plus number two. And so there's two things we've been able to eliminate with arrow functions, the function keyword, and the return keyword. And they're all replaced with the arrow. Now the curly braces don't exist as well, but we could have curly braces with the arrow function.
When there's only a single statement. The curly braces are not necessary and therefore I've eliminated them in this example. So both of these functions return the same thing. All right, let's look at a few additional examples of arrow functions. It's good to know these other examples as well, because you may encounter them in other people's code, or you may choose to use them in your own. So this next function, this next arrow function, it takes a number as an argument, and it just multiplies the number by itself and returns the results.
So we've set the function to the variable func one. And notice since we only have one parameter in the function, we can eliminate the parentheses as well. So even more simplified approach. However, sometimes I think the more simplified we get the more difficult it can be to read it. If you were looking through a bunch of code, you'd have to stop and examine this to realize, Oh, this is a function. And so I don't think that's always the best is to simplify it so much.
But that's just my opinion. But anyway, we have one parameter, one argument being passed in, so we can eliminate the parentheses. Then we have the arrow and that says to return the results of num multiplied by num. All right, let's look at another example. This example has nothing being passed in so there's no parameters necessary for the function. However, when there's nothing being passed in the parentheses are required.
And so this function simply returns the number 100. That's all it does. All right, let's look at one more example that uses curly braces with the arrow function. And then we'll talk about when you may want to use these. Because there is more than one line in the code block, curly braces are required. So this function is simply allows you to pass in a number and pass in a percent, and then it returns the percent of the number you passed in.
That's all it does. So we're passing in a number of percent, and then the arrow defines the function inside the braces is the code block. We set percent equal to percent divided by 100. And then we return num times percent. Now notice that when you have the braces and you have multiple lines, you do have to use the return keyword To return the value when you have a single statement, then the arrow function will automatically return the results. Otherwise you do need to read, you do need to include the return keyword.
So there are some example of arrow functions. Now, when would you use them? Well, I think in really large functions, I think they're a little more complex, a little harder to read, and so forth. In large functions, I would use the traditional method of defining that function where arrow functions and their simplified syntax may be very helpful as with anonymous functions, we just talked about high order functions and how we can pass functions into other functions. Well, that's a great candidate for arrow functions because it simplifies the syntax and therefore is easier to Read a simplified syntax being passed into another function. So that might be a situation where where arrow functions are helpful arrow functions I mentioned also addressed another problem which has been found with traditional function def definitions.
That problem is a bit more complex. It has to do with this binding complications that can occur with traditional functions. We have not discussed that in this Getting Started course. So I don't want to confuse the issue by addressing it here with arrow functions. So the main purpose of introducing arrow functions to you is so that when you see it in code, you will recognize it. And you can use this alternative syntax and in places where it makes sense.
Now we've looked at several examples. Let's see those examples executed within JavaScript page. Now, let me jump out to sublime. I've already entered all this information, so you don't have to watch me type it in. So we have our sum function, our traditional function that we started with. We then converted that to an arrow function where it's adding two numbers, I gave it a different variable name, so that we could address both of them separately.
And then we have the next two examples, where we're passing in a number and multiplying it by itself. And then the one that simply returns 100. And then we have the percent example that uses the curly braces. Alright, I have a console dot log. And inside that console dot log statement, I call each of those functions so that I can simply log out the value that those functions return. So let me go ahead and run that.
And then we'll compare it with those examples. Open up the console, I'm going to jump back to sublime. And I'm going to reduce the size of sublime a bit so we can see what's happening. So, in the first console dot log statement, I call this um function passed and a five and a six that returned 11 with the arrow function, returning the exact same thing. Then I called function one with a 10. And that simply multiplies the number by itself that came back with 100.
And then func two simply returns 100. That's all it does. So nothing crazy with that particular function, and then finally called the percent function I passed in the number 100. And the percentage I wanted to take was 10. And it returns a 10 10% of 100 is 10. So there we can see the arrow functions working.
In one of the exercises, I'll have you do an arrow function as a part of a higher order function that will give you a chance to use that syntax and get used to it. It's important to be aware of the syntax so that you can identify it and also because you may want to use it in certain places. Remember arrow functions are ESX ACMA script six standard. They are supported by latest versions of all modern browsers, and by node. So if your requirements for the project you're working on will match that you could use these function definitions. All right, let's move on to the exercises for functions.