What are arrow functions and how they compare to traditional functions?

Arrow functions also called as fat arrow functions, introduced in ES6 are new way of writing clean and concise functions.

Lets see how to use them:

Syntax:

Normal function definition:

// snippet 1
function add(a,b){
return a+b;
}

Arrow function definition:

// snippet 2
add = (a,b) => {
return a+b;
}

Now lets see the structure of arrow functions by referring the snippet 2 above:

function_name = (parameters) => {
function_body
}

Structure

Here there are 3 parts to its structure as we see,

1. function_name : Name of function so that once declared we can call it anywhere we need at a later point in time
2. parameters : Parameters required for any processing inside function body
3. function_body: Here we write the statements function body

Example:

let greet = (name) => { console.log("Hello "+name); }

Let us now see how to define arrow functions based on different parameters:

No parameter

let greet = () => { console.log("Hello world"); }
// this is equivalent to:
let greet = () =>  console.log("Hello world");

Single parameter

let greet = (name) => { console.log("Hello "+name); }
// this is equivalent to:
let greet = name =>  console.log("Hello world");

For single parameter, we can skip its parenthesis. Similarly for single statement(or expression) in body function, we can skip braces.

Multiple parameters

Mulitple params require parenthesis.

let greet = (firstname, lastname) => { console.log("Hello "+firstname+" "+lastname); }
//this is equivalent to:
let greet = (firstname, lastname) => console.log("Hello "+firstname+" "+lastname);

Return an object literal

To return an object, it requires parentheses around the expression:

params => ({id: 1}) // returns the object {id: 1}

Default params support

(a=400, b=20, c) => a+b+c

Arrow functions in methods

Arrow function behaviour when defined in methods: Arrow functions do not have their own 'this'. 'this' in arrow function refers to the scope in which the function is defined. Due to these reasons it is best practice to NOT use arrow functions inside methods. See the example below:

var obj = { 
  a: 10,
  b: () => console.log(this.a, this),
  c: function() {
    console.log(this.a, this);
  }
}

obj.b(); // prints undefined as there is no *a *defined in Window object, Window {...} (or the global object)
obj.c(); // prints 10, {a: 10, b: ƒ, c: ƒ}

Arrow functions work great with array methods like .map(), .sort(), .forEach(), .filter(), and .reduce(). Lets see an example using map method:

let numbers = [1,2,3];
numbers.map(i => i*2); // output : [2, 4, 6]

Another point to remember is that arrow functions are anonymous as we do not provide any function name in definition.

Conclusion:

By using arrow functions, you can write clean and shorter code. They work great with array methods. Note that arrow functions need to be carefully used by considering the best practices.