This article will look at the different ways declaring a new function can be done, and will explain the difference between the different ways.
Let’s start with the plain old function mentioned above. If you come from C-like languages, maybe from C# or Java, for instance, you’re probably used to writing functions as such:
b and our function
multiply do not specify which type they are or will return.
function keyword, and voilà!
function keyword, this time as an expression:
Now that we have an expression to declare functions, it opens up a lot of possibilities! Using a function this way is very similar to using
delegate, in C#, for instance.
It’s now very easy and convenient to declare a function that will be called by another function, like in the second example, where we provide our multiply function to the
reduce method of an array.
The most important aspect of the expression function is really that it can be assigned to things. We can still name it, as before, but we do it indirectly: we name the symbol that will hold the reference to the function, instead of naming the function itself.
If you like mutation, this means that you can change the current function behind a function name, depending on your need, maybe by having a validator function that changes according to the data type that is being validated.
If you prefer a more functional approach, and try to avoid mutation, that means that you can easily bind some useful functions to symbols inside your function, maybe with the intention of providing them to some more functions!
As you can see, this is very useful, but it quickly grows. Using the function notation is very powerful, but adds a lot noise for rather simple operations, with all those brackets and
return keyword, etc.
Since ES2015, a new way to declare such functions as expressions have appeared in the language: the arrow function. Let’s rewrite the previous example with such functions:
As you can see, the syntax is pretty straightforward: on one side, you have your parameters (for which you can omit the parenthesis if there is only one of them), you have an “arrow” (the equal and greater-than signs,
=>), then you have your body or your expression. As you can see, if you opt for the expression, you don’t have to use brackets and the
return keyword. This makes those functions very compact, and it encourages having smaller functions at the same time. I also personally really like this syntax for another reason: I find that the arrow really goes back to what pure functions are, meaning inputs that are converted into an output. In some sense, I find that it makes it easier to visualize that your function is about transforming things into other things, about taking what’s on the left and giving back what’s on the right.
It’s important to note that the arrow functions and regular functions are not always interchangeable. You’ll find there is a major difference in how they handle the
this keyword, and arrow function cannot be used as constructors (they cannot be called with the
new keyword). A quick aside on the
new keyword in front of your function call (and can still call it as a regular function).
In a more functional programming style, the arrow functions are a very compact and expressive way of declaring your functions, but they cannot fully replace the more traditional functions, so keep this in mind.
I will not touch on the subject of generator functions or
async functions in this article, as they are more about changing how the function is used than about how we declare them, but I’ll quickly show you the shorthand notation to create property functions.
As you can see, you can use both notations (still keep in mind the difference in behaviour, though). In ES2015, you also have the possibility of declaring such properties more like you would define statement functions:
async and generator functions, I will not touch
set methods in ES2015, as they are a rather different subject, but they would use this method syntax instead of the expression assignment.
With that, it’s all we had on our plate for this article!
Stay tuned next week, same day, for our next article!