JavaScript is one of those languages which have a specific keyword used when defining regular functions: function. If you’ve ever looked at a JavaScript file, you probably saw them, but we’ll see in the article that a regular function is just one of the ways you can declare functions in JavaScript.

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:

When learning JavaScript, you’ll probably find out that you can easily translate that way of writing functions by using the function keyword:

If you’re totally new to JavaScript, you might be surprised by some of the things this article will cover. At the very least, you need to know that JavaScript is a dynamically, duck typed language, with no type annotation. This explains why a, b and our function multiply do not specify which type they are or will return.

You can see why this transition is quite easy to make from a C-like language to this kind of function: what makes a function (by simplifying a bit) in those languages is the fact that you surround a symbol with a type for its return value, and a list of parameters. Since types are not annotated in JavaScript, you simply have to “replace” the return type by the function keyword, and voilà!

However, this new function is created as a statement, which means that it can only be used to declare new named functions. Since JavaScript draws a lot from functional languages, this would be a very limited way to use functions, so there is another way in which you can use the 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.

This short syntax has also been added to C# and Java, with similar rules. Aside from the reduced amount of code, what’s most important about this syntax is really the fact that it is an expression, that you can store, pass around, etc. You’ll sometimes see the expression “anonymous function” to refer to such functions, because they do not have names. In JavaScript, this was possible since 1999, with ECMAScript 3rd edition and the expression function, so all the arrow function does (except for some different behaviours mentioned below) is making it easier, faster, shorter to do.

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: if you come from class-based object-oriented languages, this may be very confusing or strange, but the object system in JavaScript is quite different from that model. You declare new “classes” by declaring new functions and assigning expression functions to their prototype, after which you can create instances with 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.

Usually, when you create an object (we’ll keep it a plain old JavaScript object for the example purpose), you will use one of the expression notations to assign your function to your object’s property:

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:

As with async and generator functions, I will not touch get and 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!

I hope you’re more familiar now with the different (and more modern) ways to write JavaScript functions!

Stay tuned next week, same day, for our next article!