DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

buginit
buginit

Posted on

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

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!