1. Introduction

An arrow function expression is a short and compact form of writing traditional function expression with some limitations. It is not a complete replacement of traditional function expression and is not suited for all situations. Let us understand this with an example.

Following is the traditional anonymous function:

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

The equivalent arrow function is:

(a, b) => a + b;

You can use this arrow function as a variable as well.

let sum  = (a, b) => a + b;
console.log(sum(1,3)); // result is 4

2. How to write an arrow function expression?

We’ll now learn how to write an arrow function. To explain this, we’ll convert a traditional anonymous function into arrow function. We’ll use the following traditional function:

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

To write an arrow function:

• You can remove the word function.
• You can remove { braces } if there is only one executable statement.
• You can remove the word return as it is implied. If there are multiple executable lines in function then return is required.
• Add an arrow after the arguments and the before the body of the function.

After applying above mentioned points, you’ll get the following valid arrow function expression:

// valid arrow function expression
(a, b) => a + b;

3. Important points for writing arrow function expression

Following points should be noted while writing arrow function expression:

3.1 If there are multiple executable lines in function body then curly braces are required.

//valid arrow function expression
(a, b) => {
  console.log("calculating sum");
  return a + b;
};

3.2 If there is only one executable line, then { braces } are not required.

// valid arrow function expression
(a, b) => a + b;

3.3 If there is only one parameter ( and ) are not required around parameters.

// valid arrow function expression
a => a * 2;

3.4 If there are multiple parameters then ( and ) are required around parameters.

// valid arrow function expression
(a, b) => a + b;

3.5 If there is not parameter then ( and ) are required.

// valid arrow function expression
() => console.log('hello world');

3.6 If there are multiple executable lines in function and if the function is expected to return a result then return is required else return is not required.

// valid arrow function expression
(a, b) => {
  console.log("calculating sum");
  return a + b;
};

3.7 Named functions are treated as variables.

// traditional function
function sum (a, b){
  return a + b;
}

// equivalent arrow function expression
let sum = (a, b) => a + b;

3.8 An arrow function cannot contain a line break between its parameters and its arrow.

// Invalid arrow function expression
(a, b) 
=> a + b;

// valid arrow function expression
(a, b) => (
a + b
);

// valid arrow function expression
(a, b) => {
a + b
};

4. Arrow functions cannot be used as constructors

Arrow functions cannot be used as constructors. An arrow function will throw an error when used with new. Thus, arrow function does not have new.target.

var Sum = (a, b) => a + b;
var sum = new Sum(); // TypeError

5. Arrow functions do not have a prototype property

var Sum = (a, b) => a + b;
console.log(Sum.prototype); // undefined

6. Arrow functions cannot be used as generators

The yield keyword may not be used in an arrow function’s body so arrow functions can not be used as generators.

7. Arrow functions do not have their own arguments object

var sum = (a, b) => {
  console.log(arguments[0]);  //ReferenceError: arguments is not defined
  return a + b;
};
sum(1, 2);

8. Return object literal expression

Arrow function can return an object literal expression as well. To return an object literal expression requires parentheses () around the expression.

() => ({msg: "hello world"}) 

9. Default parameters in arrow function expression

Default parameters are supported in arrow functions

(a=10, b=40) => a + b;

10. Rest parameters in arrow function expression

Rest parameters are supported in arrow function:

var log = (arg1, arg2, ...moreArgs) => {

	console.log(arg1);

	
	console.log(arg2);

	// Logs an array of any other arguments you pass in after arg2
	console.log(moreArgs);

};

11. Destructuring within params in arrow function expression

Destructuring within params supported in arrow function:

([a, b] = [15, 20]) => a + b;  // result is 35
({ a, b } = { a: 15, b: 20 }) => a + b; // result is 35

12. Arrow function and ‘this’

In arrow functions, this has the value of the enclosing lexical context’s this. In global context, this is the global object. In browser it is the Window object.

var foo = (() => console.log(this)); // global object (Window in case of browser)

Here is another example. The value of this when printed in both the cases is different. In case of traditional function this refers to the object obj whereas in case of arrow function, this refers to the global object (Window object in browser). Since there is no property x in global object, x is undefined.

let obj = {
  x: 10,
  func: function () {
    console.log(this.x);
  },

  arrowFunc: () => console.log(this.x),
};

obj.func(); // 10
obj.arrowFunc(); // undefined

13. Arrow function and call(), apply() and bind()

The call(), apply() and bind() methods are meant to execute within different scopes but the in case of arrow function, this refers to the Window object (in global code). So arrow functions are not suitable for call(), apply() and bind().

14. Conclusion

In this tutorial, we discussed arrow function expression in JavaScript. We hope this tutorial was informative. Happy learning!