JavaScript Arrow Functions Expressions
Tags: javascript
Published: 2020-01-12 11:14:26

This article is referred from [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

An **arrow function expression** is a syntactically compact alternative to a regular [function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function), although without its own bindings to the `this`, `arguments`, `super`, or `new.target` keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

**Syntax**
**Basic syntax**
```
(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parentheses are optional when there's only one parameter name:
(singleParam) => { statements }
singleParam => { statements }

// The parameter list for a function with no parameters should be written with a pair of parentheses.
() => { statements }
```

**Advanced syntax**
```
// Parenthesize the body of a function to return an object literal expression:
params => ({foo: bar})

// Rest parameters and default parameters are supported
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { 
statements }

// Destructuring within the parameter list is also supported
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
```

You can create a simple HTML page and add the below JavaScript code in order to see the output, or you can clone my [GitHub project](https://github.com/MilburnGomes/jsarrowfunction). 

Below JavaScript code is used to show how Regular function and Arrow functions looks like. Take a look:

```javascript
console.log('Welcome to Arrow Functions!');

// no parameters

// no parameter, regular function
function hello1() {
    return 'Hello!';
}
console.log('no parameters, regular function ' + hello1());

// no parameter, arrow function
const hello2 = () => {
    return 'Hello!';
}
console.log('no parameters, arrow function ' + hello2());

// no parameter, arrow function single line 
const hello3 = () => 'Hello!';
console.log('no parameters, arrow function single line  ' + hello3());

// one parameter

// one parameter, regular function
function hello4(x){
    return 'one parameter, regular function ' + 'Hello, ' + x;
}
console.log(hello4('milburn'));

// one parameter, arrow function
const hello5 = x => {
   return  'one parameter, arrow function ' + 'Hello, ' + x;
}
console.log(hello5('milburn'));

// one parameter, arrow function single line 
const hello6 = x => 'Hello, ' + x;
console.log('one parameter, arrow function single line ' + hello6('milburn'));

//two parameters

// two parameters, regular function
function hello7(x,y){
    return 'Hello, ' + x + ' ' + y; 
}
console.log('two parameters, regular function ' + hello7('milburn', 'gomes'));

// two parameters, arrow function
const hello8 = (x,y) =>{
	return 'two parameters, arrow function ' + 'Hello, ' + x + ' ' + y;
}
console.log(hello8('milburn', 'gomes'));

// two parameters, arrow function single line 
const hello9 = (x,y) =>  "Hello, " + x + " " + y;
console.log('two parameters, arrow function single line ' + hello9('milburn', 'gomes'));
```

**Description**

See also ["ES6 In Depth: Arrow functions" on hacks.mozilla.org.](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)

Two factors influenced the introduction of arrow functions: the need for shorter functions and the behavior of the `this` keyword.

**Shorter functions**
```javascript
var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// This statement returns the array: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// The regular function above can be written as the arrow function below
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// When there is only one parameter, we can remove the surrounding parentheses
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// When the only statement in an arrow function is `return`, we can remove `return` and remove
// the surrounding curly brackets
elements.map(element => element.length); // [8, 6, 7, 9]

// In this case, because we only need the length property, we can use destructuring parameter:
// Notice that the `length` corresponds to the property we want to get whereas the
// obviously non-special `lengthFooBArX` is just the name of a variable which can be changed
// to any valid variable name you want
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// This destructuring parameter assignment can also be written as seen below. However, note that in
// this example we are not assigning `length` value to the made up property. Instead, the literal name
// itself of the variable `length` is used as the property we want to retrieve from the object.
elements.map(({ length }) => length); // [8, 6, 7, 9] 
```
**Function body**

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.
```javascript
var func = x => x * x;                  
// concise body syntax, implied "return"

var func = (x, y) => { return x + y; }; 
// with block body, explicit "return" needed
```
**Returning object literals**

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.
```javascript
var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

var func = () => ({ foo: 1 });
```
**Line breaks**

An arrow function cannot contain a line break between its parameters and its arrow.
```javascript
var func = (a, b, c)
  => 1;
// SyntaxError: expected expression, got '=>'
```
However, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and fluffy. You can also put line breaks between arguments.
```javascript
var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;
 
// no SyntaxError thrown
```
**Parsing order**

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.
```javascript
let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok
```

**More examples**
```javascript
// An empty arrow function returns undefined
let empty = () => {};

(() => 'foobar')(); 
// Returns "foobar"
// (this is an Immediately Invoked Function Expression)

var simple = a => a > 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) => a > b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter(v => v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

// More concise promise chains
promise.then(a => {
  // ...
}).then(b => {
  // ...
});

// Parameterless arrow functions that are visually easier to parse
setTimeout( () => {
  console.log('I happen sooner');
  setTimeout( () => {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);
```
**Browser compatibility**
![Browser compatibility](https://thepracticaldev.s3.amazonaws.com/i/g5u04tjw6gv988j5we5o.PNG)

**See also**

["ES6 In Depth: Arrow functions" on hacks.mozilla.org](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)