Javascript Arrow Function

Nay Lin Aung — Sat, 01 Aug 2020 15:46:15 +0000

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.

DEV Community: Nay Lin Aung

Javascript Arrow Function