Short & Sweet — JavaScript Arrow Functions

Photo by Sharon McCutcheon on Unsplash

Arrow functions were introduced in ES6 and they allow us to write shorter function syntax. The symbol for an arrow function is the fat arrow “=>”.

Regular function syntax:

Arrow function syntax:

If the arrow function only has one statement and the statement returns a value, we can remove the brackets and the return key word:

If there are parameters, we pass them in the parenthesis:

If there is only one parameter in the function we don’t need the parenthesis:

this value

The handling of ‘this’ is different in arrow functions compared to regular functions. In arrow functions there is no binding of ‘this’. With arrow functions ‘this’ always represents the object that defined the arrow function (in regular functions ‘this’ is represented by the object that called the function).

References