The Fat = (Arrow) => {Functions}

One of the most really important aspects of ES6+ Syntax

Press enter or click to view image in full sizeArrow Functions Image By Yasir Gaji

A compact expression syntax alternative to the traditional function expression was introduced to improve the clean-code-culture, and save lines of codes, but turns out not to be as quite functional as the traditional function expression, it does not have the new.target keyword, it can not be used as constructors, does not have its own bindings to the this keyword, and it is not suitable for call, apply and bind methods, which generally rely on establishing a scope.

Still, the arrow function allows an implicit return when there is no body block, resulting in shorter and simpler code in most cases and it automatically binds the this Keyword to the surrounding code’s context which makes it very flexible and awesome.

Shooting the arrow

First shot = ( ) => Compare;

Here we would first compare the arrow function expression with the traditional function expression. See code representation below:

As you know by now these two blocks of codes would both log their respective strings in the console, and you are probably wondering if there’s not much difference in either block and they are more or less containing the same set of lines, well arrow functions flexibility allows it to omit both the curly braces and the return() statement for a one-line function. See code representation below:

Awesome right, now how about when we introduce parameters to the arrow function. Yes, you guessed right! we can also take out the parenthesis for a single parameter function. See code representation below:

But multiple parameters need parenthesis otherwise the function would throw an error. See code representation below:

Second shot = ( ) => ({Flaws: ‘Alternatives’});

As I have mentioned earlier, as advantageous as the arrow function seems it has its own flaws such as it failing to recognize object literals and returning undefined. But this can easily be solved by wrapping the function with parenthesis (). See code representation below:

Conclusion

Other than during the object.function Syntax (because arrow functions do not accept argument objects) arrow => functions are the best.

It is advised to not use arrow functions as methods.

Do ask questions for clarifications and make corrections & suggestions, I expect them.