JavaScript Arrow Functions

Back to: ReactJS Tutorials

JavaScript Arrow Functions:

In this article, I am going to discuss JavaScript Arrow Functions with Examples. In our previous article, we discussed JavaScript let and const keywords. Another thing that we are going to use a lot in our upcoming articles is arrow functions.

JavaScript Arrow Functions:

The Arrow function is a different syntax for creating JavaScript functions. A normal JavaScript function looks like the following.

Here the function keyword is used. An arrow function looks like the following.

Here, we are storing it in a constant, and then on the right side of the equals sign, that’s the arrow function syntax. Here we have not passed any list of arguments but it could hold some arguments. Then an arrow, an equal sign, a greater than sign, and then the function body. The arrow function syntax is a bit shorter than the normal syntax since it omits the function keyword and it also, which is a great benefit, solves a lot of the issues you often had with the ‘this’ keyword in JavaScript.

If you’ve worked with JavaScript a bit, you probably know that the ‘this’ keyword doesn’t always refer to what you might have expected it to refer to during writing your code. When you use ‘this’ inside an arrow function it will always keep its context and not change it surprisingly on runtime. Now let’s move to ‘JSBIN’ to see that arrow function syntax. let’s create a normal function, ‘printMyName’,

Here we have created a function ‘printMyName’ that takes an argument and prints that on the console. Then we called the function and passed “John” as the name and you can see “John” is printed on the console. This is the normal syntax of the JavaScript function.

This is the syntax of the arrow function. The arrow function equivalent is to store it in a constant named ‘printMyName’. It could also be created with let If you plan on re-assigning this variable printMyName. You don’t forget to add the “=>” arrow between the list of arguments and the function body. As you can see in the console, the result is the same. It behaves exactly the same way.

Now the ‘this’ keyword thing is something you’ll see in upcoming articles. It becomes important once you add functions to objects. First of all, let us show you some alternatives to this syntax though regarding the argument list. If you only receive one argument as we do here, you can also use a shortcut of omitting the parentheses around it,

That’s only valid for exactly one argument though, not for more and not for less. Here, we still got the same result. If you had a function that receives no arguments, it is not a valid syntax. You need to pass an empty pair of parentheses. If you have more than one argument, you also need parentheses.

So we need to wrap the arguments in parentheses if they are more than one. So these are two different syntaxes you might see regarding the arguments.

There is also an alternative regarding the function body. Obviously, a lot of functions just return something. So let’s say we want to multiply something and we get a number as an argument. Now we want to return the number * 2.

If you have this case where all you do in your function body is return and you have no other code in there, you can omit the curly braces and write this in one line and then you also have to omit the return keyword.

This is a very short version of writing this function. It gets a bit shorter if we take advantage of the shortcut of removing the parentheses around the single argument. And now what this does is it still returns the result of this code. Here we just omit the return keyword. And we have a very concise and short way of writing a function that takes one or more arguments and returns something.

So these are all the syntax you might see and the arrow function. In general, it is something you’ll see a lot. You saw the various syntaxes. You don’t have to remember all of them right now. Just be aware that there are different syntaxes and if we then use them they’ll quickly come back to your mind and you know why we use a given syntax.

In the next article, I am going to discuss Exports and Imports in JavaScript with Examples. Here, in this article, I try to explain JavaScript Arrow Functions. I hope you enjoy this JavaScript Arrow Functions article.