Tip 20: Simplify Looping with Arrow Functions

Arrow functions

In JavaScript, you see a lot of callback functions. Those are functions that are passed as a parameter to other functions. Most of the loops you’re about to learn depend on callbacks.

Like most pre-ES6 code, functions are wordy. You have to explicitly declare that you’re creating a function with the function keyword, add curly braces to signify the body, use return statements to end the function, and so on. It’s not unusual for the callback to be longer than the function you inject it into.

Arrow functions changed that and made writing functions simple and short. And learning about them now will make all the loops you see in future tips much more interesting. It will come as no surprise that arrow functions combined with array methods have led some to abandon for loops altogether.

Well then, what are arrow functions? Arrow functions strip away as much extraneous information as possible.

How much extraneous information is there in a function? Quite a bit. It turns out, you can communicate a function without:

• The word function

• Parentheses around arguments

• The word return

• Curly braces

All you need to do is use the fat arrow => to ...