DEV Community

Nay Lin Aung
Nay Lin Aung

Posted on

Javascript Arrow Function

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... }
Enter fullscreen mode Exit fullscreen mode

to this one:

( ...args... ) => { ...body... }
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode
console.log('1 + 2 is ' + add(1, 2));
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
console.log('1 + 2 is ' + add(1, 2));
console.log(func());
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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());
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)