Arrow functions (also called \u201cfat arrow functions\u201d) are undoubtedly one of the more popular features of ES6. They introduced a new way of\u2026<\/p><\/blockquote>\n
Sorgente: When (and why) you should use ES6 arrow functions \u2014 and when you shouldn\u2019t<\/a><\/em><\/p>\n <\/p>\n Arrow functions (also called \u201cfat arrow functions\u201d) are undoubtedly one of the more popular features of ES6. They introduced a new way of writing concise functions.<\/p>\n Here is a function written in ES5 syntax:<\/p>\n Now, here is the same function expressed as an arrow function:<\/p>\n It\u2019s much shorter! We are able to omit the curly braces and the return statement due to implicit returns (but only if there is no block\u200a\u2014\u200amore on this below).<\/p>\n It is important to understand how the arrow function behaves differently compared to the regular ES5 functions.<\/p>\n One thing you will quickly notice is the variety of syntaxes available in arrow functions. Let\u2019s run through some of the common ones:<\/p>\n If there are no parameters, you can place an empty parentheses before In fact, you don\u2019t even need the parentheses!<\/p>\n With these functions, parentheses are optional:<\/p>\n Parentheses are required for these functions:<\/p>\n In its most basic form, a function expression<\/em> produces a value, while a function statement<\/em> performs an action.<\/p>\n With the arrow function, it is important to remember that statements need to have curly braces. Once the curly braces are present, you always need to write Here is an example of the arrow function used with an if statement:<\/p>\n If your function is in a block, you must also use the explicit If you are returning an object literal, it needs to be wrapped in parentheses. This forces the interpreter to evaluate what is inside the parentheses, and the object literal is returned.<\/p>\n It is important to note that arrow functions are anonymous, which means that they are not named.<\/p>\n This anonymity creates some issues:<\/p>\n When you get an error, you will not be able to trace the name of the function or the exact line number where it occurred.<\/p>\n 2. No self-referencing<\/p>\n If your function needs to have a self-reference at any point (e.g. recursion, event handler that needs to unbind), it will not work.<\/p>\n In classic function expressions, the For example, look at the In the ES5 example,\u00a0 ES6 arrow functions can\u2019t be bound to a After learning a little more about arrow functions, I hope you understand that they do not replace regular functions.<\/p>\n Here are some instances where you probably wouldn\u2019t want to use them:<\/p>\n When you call 2. Callback functions with dynamic context<\/p>\n If you need your context to be dynamic, arrow functions are not the right choice. Take a look at this event handler below:<\/p>\n If we click the button, we would get a TypeError. It is because 3. When it makes your code less readable<\/p>\n It is worth taking into consideration the variety of syntax we covered earlier. With regular functions, people know what to expect. With arrow functions, it may be hard to decipher what you are looking at straightaway.<\/p>\n Arrow functions shine best with anything that requires Despite the fact that they are anonymous, I also like using them with methods such as Thanks for reading my article, and clap if you liked it! Check out my other articles like How I built my Pomodoro Clock app, and the lessons I learned along the way<\/a>, and Let\u2019s demystify JavaScript\u2019s \u2018new\u2019 keyword<\/a>.<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":" Nice reminder. Arrow functions (also called \u201cfat arrow functions\u201d) are undoubtedly one of the more popular features of ES6. They introduced a new way of\u2026 Sorgente: When (and why) you should use ES6 arrow functions \u2014 and when you shouldn\u2019t<\/p>\nfunction timesTwo(params) {\n return params * 2\n}<\/pre>\ntimesTwo(4); \/\/ 8<\/pre>\n
var timesTwo = params => params * 2<\/pre>\n
timesTwo(4); \/\/ 8<\/pre>\n
Variations<\/h3>\n
![](\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*7mBpxeXkeSb-719jjHvgXA.jpeg\")
<\/div>\n<\/div>1. No parameters<\/h4>\n
=><\/code>.<\/p>\n() => 42<\/pre>\n
_ => 42<\/pre>\n
2. Single parameter<\/h4>\n
x => 42 || (x) => 42<\/pre>\n
3. Multiple parameters<\/strong><\/h4>\n
(x, y) => 42<\/pre>\n
4. Statements (as opposed to expressions)<\/strong><\/h4>\n
return<\/code> as well.<\/p>\nvar feedTheCat = (cat) => {\n if (cat === 'hungry') {\n return 'Feed the cat';\n } else {\n return 'Do not feed the cat';\n }\n}<\/pre>\n5. \u201cBlock\u00a0body\u201d<\/strong><\/h4>\n
return<\/code> statement:<\/p>\nvar addValues = (x, y) => {\n return x + y\n}<\/pre>\n6. Object\u00a0literals<\/strong><\/h4>\n
x =>({ y: x })<\/pre>\nSyntactically anonymous<\/h3>\n
![](\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*_4a_Zan4-WX7vh7G0XQZjw.jpeg\")
<\/div>\n<\/div>\n<\/figure>\n\n
Main benefit: No binding of\u00a0\u2018this\u2019<\/h3>\n
<\/div>\n<\/div>
this<\/code> keyword is bound to different values based on the context<\/em> in which it is called. With arrow functions however, this<\/code> is lexically bound<\/em>. It means that it usesthis<\/code> from the code that contains the arrow function.<\/p>\nsetTimeout<\/code> function below:<\/p>\n\/\/ ES5\nvar obj = {\n id: 42,\n counter: function counter() {\n setTimeout(function() {\n console.log(this.id);\n }.bind(this), 1000);\n }\n};<\/pre>\n.bind(this)<\/code> is required to help pass the this<\/code> context into the function. Otherwise, by default this<\/code> would be undefined.<\/p>\n\/\/ ES6\nvar obj = {\n id: 42,\n counter: function counter() {\n setTimeout(() => {\n console.log(this.id);\n }, 1000);\n }\n};<\/pre>\nthis<\/code> keyword, so it will lexically go up a scope, and use the value of this<\/code> in the scope in which it was defined.<\/p>\nWhen you should not use Arrow Functions<\/h3>\n
\n
cat.jumps<\/code>, the number of lives does not decrease. It is because this<\/code> is not bound to anything, and will inherit the value of this<\/code> from its parent scope.<\/p>\nvar cat = {\n lives: 9,\n jumps: () => {\n this.lives--;\n }\n}<\/pre>\nvar button = document.getElementById('press');\nbutton.addEventListener('click', () => {\n this.classList.toggle('on');\n});<\/pre>\nthis<\/code> is not bound to the button, but instead bound to its parent scope.<\/p>\nWhen you should use\u00a0them<\/h3>\n
this<\/code> to be bound to the context, and not the function itself.<\/span><\/p>\nmap<\/code> and reduce<\/code>, because I think it makes my code more readable. To me, the pros outweigh the cons.<\/p>\n