Introduction to JavaScript Arrow Functions

After I published the tutorial on JavaScript Promises, several people told me that they did not know the new arrow function syntax introduced in the ES6 version of the language.

In this article I'll give you an overview of this syntax, along with information on what platforms support it and how to use them even in older platforms.

The Old Function Syntax

To introduce you to the new syntax I'm going to start from a standard function written in the old way and gradually convert it to the new style. I'm going to use a very simple function that adds two numbers and returns the result.

function add(a, b) {
    return a + b;
}

console.log('1 + 2 is ' + add(1, 2));

Assuming the code example above is in a file called func.js, I can execute it with Node.js as follows:

$ node func.js
1 + 2 is 3

You can also open the JavaScript console in your browser and enter this code there.

So far so good. Given that in JavaScript functions are first-class objects, the example above can be rewritten with an unnamed function assigned to a variable (or more precisely a constant) called add:

const add = function (a, b) {
    return a + b;
}

console.log('1 + 2 is ' + add(1, 2));

This example is functionally equivalent to the first.

The Arrow Function Syntax

From an unnamed function it is a small change to move to an arrow function. All we need to do is go from this format:

function ( ...args... ) { ...body... }

to this one:

( ...args... ) => { ...body... }

The example add() function from the previous section can be written as an arrow function as follows:

const add = (a, b) => {
    return a + b;
}

console.log('1 + 2 is ' + add(1, 2));

If the function body is a single return statement, then the syntax can be further simplified by removing the curly braces and the return keyword:

const add = (a, b) => a + b;

console.log('1 + 2 is ' + add(1, 2));

If the function takes no arguments, then you must use an empty argument list, just like you would on a function defined in the old style. Below I have added a second function called func that takes no arguments and returns the string 'foo':

const add = (a, b) => a + b;
const func = () => 'foo';

console.log('1 + 2 is ' + add(1, 2));
console.log(func());

Let's run this new version of func.js to confirm the new function works as expected:

$ node func.js
1 + 2 is 3
foo

Arrow Function Support

Arrow functions have very good support, which includes Node.js and all major web browsers with the only exception of Internet Explorer. See the compatibility matrix for specific details about browser versions.

This means that in most cases you should be able to include arrow functions in your JavaScript code without worries.

Transpiling Fancy JavaScript to Basic JavaScript

If your application needs to work on Internet Explorer or any other non-mainstream legacy browser, you can use arrow functions in your codebase and then transpile the code to the older style using babel.

To see how this would work, you can create a JavaScript package in the directory where you have the func.js file with this command:

$ npm init

You will have to answer a few questions regarding the package, but for this test it is sufficient to press Enter on all of them to accept the defaults. Then install the three packages needed for babel:

$ npm install --save-dev @babel/cli @babel/core @babel/preset-env

These three packages respectively implement the CLI, the core compiler/transpiler, and a convenient configuration preset that converts all the new JS constructs back into a safe version of JavaScript that works everywhere.

To convert the func.js file and output the result to the terminal, execute the following command:

$ ./node_modules/.bin/babel --presets @babel/preset-env func.js
"use strict";

var add = function add(a, b) {
  return a + b;
};

var func = function func() {
  return "foo";
};

console.log('1 + 2 is ' + add(1, 2));
console.log(func());

If you need to support legacy JavaScript platforms, then incorporating babel into your project build should allow you to use not only arrow functions but also many other language features.

Conclusion

I hope this short article motivated you to start using arrow functions in your JavaScript code. If you want to have all the implementation details, consult the documentation.