22 Examples Of Arrow Function JavaScript: Part 1

An Arrow Function in JavaScript also called a “Fat arrow” function is a syntactically compact alternative to a regular function expression. It allows us to write shorter function syntax. Arrow functions are anonymous and change the way this binds in functions.

Arrow functions doesn’t support its own bindings to the this, arguments, super, or new.target keywords.

#1 Basic Example

var materials = [
  'JavaScript',
  'HTML',
  'CSS',
  'Buginit.com'
];
// before 
console.log(materials.map(function (material) { return material.length}));
// with arrow function
console.log(materials.map(material => material.length));
// expected output: Array [10, 4, 3, 11]

#2 Basic syntax

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

#2.1 Optional Parentheses

Parentheses are optional when there’s only one parameter present:

(singleParam) => { statements }
singleParam => { statements }

#2.2 Without Parameters

If you do not have any parameters then it should be written with a pair of parentheses like the example below:

() => { statements }

To see all 22 examples of Arrow Function Click here

Part 2