JavaScript arrow function syntax and examples

We will explain the JavaScript arrow function in this article. To make it simple we will see some basic examples as well.

One of the new features of the ES6 version of JavaScript is the arrow function. When compared to regular functions, it allows you to create functions in a cleaner manner.

Regular function Example

let functionName = function(x, y) {
   return x * y;
}

This is the regular function. It has its own benefits in coding but the above function is easy to rewrite in the arrow function. It significantly reduces the syntax.

Arrow function example

let functionName = (x, y) => x * y;

In the above example:

(x, y) are the arguments and after arrow(=>), we are returning something.

The basic syntax looks like this:

// One param. With simple expression return is not needed
param => expression

// Multiple params require parentheses. 
// With simple expression return is not needed

(param1, paramN) => expression

const functionName = ( parameters_here ) => return_something_here;

If you do not want to pass any arguments then you can write the function as follow:

let displayName = () => console.log('John Doe');

You can omit the parenthesis if a function only has one argument.

let displayName = name => console.log(name);

// call the function
displayName('John Doe');

// Output: John Doe

So far you may have noticed that we are returning a valve with a single line of code. What if we have multiline code inside of the arrow function?

In this situation we use brackets. Look at the following example.

let sum = (num1, num2) => {
    let result = num1 + num2;
    return result;
}

sum(1, 2); // Output: 3

Arrow function expressions has limitations

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can’t be used in all situations.

1. Arrow functions lack their own bindings to this, arguments, or super.
2. The new.target keyword is not available to arrow functions.
3. call, apply, and bind methods, which all rely on setting a scope, aren’t suited for arrow functions.
4. Arrow functions cannot be used as constructors.
5. Arrow functions cannot use yield, within its body.

this keyword is being used in regular functions to represent the object that called the function, which could be a window, a document, a button, or anything else.

this keyword always reflects the object that specified the arrow function when using arrow functions.

Consider the following example:

'use strict';

var obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}


//source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

call, apply and bind methods

The call, apply and bind methods are NOT suitable as arrow functions – as they were designed to allow methods to execute within different scopes – because arrow functions establish this based on the scope the arrow function is defined within.

For example call, apply and bind work as expected with traditional functions, because we establish the scope for each of the methods:

// ----------------------
// Traditional Example
// ----------------------
// A simplistic object with its very own "this".
var obj = {
    num: 100
}

// Setting "num" on window to show how it is NOT used.
window.num = 2020; // yikes!

// A simple traditional function to operate on "this"
var add = function (a, b, c) {
  return this.num + a + b + c;
}

// call
var result = add.call(obj, 1, 2, 3) // establishing the scope as "obj"
console.log(result) // result 106

// apply
const arr = [1, 2, 3]
var result = add.apply(obj, arr) // establishing the scope as "obj"
console.log(result) // result 106

// bind
var result = add.bind(obj) // establishing the scope as "obj"
console.log(result(1, 2, 3)) // result 106

//source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions