{"id":178804,"date":"2021-02-15T16:00:42","date_gmt":"2021-02-15T13:00:42","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/using-arrow-functions-in-javascript-cloudsavvy-it\/"},"modified":"2021-02-15T16:00:42","modified_gmt":"2021-02-15T13:00:42","slug":"using-arrow-functions-in-javascript-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/","title":{"rendered":"#Using Arrow Functions in JavaScript \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a289f0c9d237\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a289f0c9d237\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Creating_Arrow_Functions\" >Creating Arrow Functions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Handling_Arguments\" >Handling Arguments<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Working_With_Object_Literals\" >Working With Object Literals<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Returning_Values\" >Returning Values<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Lexical_Binding\" >Lexical Binding<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Characteristics\" >Characteristics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/using-arrow-functions-in-javascript-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#Using Arrow Functions in Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9646\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/9983eab1b15229218cfb437751e1536e\/p\/uploads\/2021\/02\/66daab59.jpg\" alt=\"Illustration showing various JAvaScript arrow function examples\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>An arrow function in JavaScript is a terser alternative to a traditional function. The syntax enables quick creation of inline anonymous functions.<\/p>\n<p>Arrow functions were added with ES6 in 2015. They\u2019re now <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/arrow-functions\">supported by all<\/a> major browsers. You can use them with older browsers, such as Internet Explorer, via a transpiler like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/babeljs.io\/\">Babel<\/a>.<\/p>\n<h2 id=\"creating-arrow-functions\"><span class=\"ez-toc-section\" id=\"Creating_Arrow_Functions\"><\/span>Creating Arrow Functions<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The main advantage of arrow functions is how concise they make your code.<\/p>\n<p>Here\u2019s a traditional function:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">function<\/span> square<span class=\"br0\">(<\/span>x<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>x <span class=\"sy0\">*<\/span> x<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Here\u2019s the same code rewritten as an arrow function:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> square <span class=\"sy0\">=<\/span> x <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>x <span class=\"sy0\">*<\/span> x<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>They\u2019re called \u201carrow functions\u201d because of the arrow-like \u201c<code>=&gt;<\/code>\u201d syntax.<\/p>\n<p>Arrow functions are particularly useful when working with callbacks.<\/p>\n<p>Here\u2019s the traditional version:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">function<\/span> getNonEmptyStrings<span class=\"br0\">(<\/span>arr<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">return<\/span> arr.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">(<\/span>i<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>i.<span class=\"me1\">length<\/span> <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>And here\u2019s the inner function as an arrow function:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">function<\/span> getNonEmptyStrings<span class=\"br0\">(<\/span>arr<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">return<\/span> arr.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span>i <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>i.<span class=\"me1\">length<\/span> <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Arrow functions are much shorter than their traditional counterparts. You can omit the <code>function<\/code> prefix. They enable clean one-line statements and have an implicit <code>return<\/code> statement.<\/p>\n<h2 id=\"handling-arguments\"><span class=\"ez-toc-section\" id=\"Handling_Arguments\"><\/span>Handling Arguments<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Arrow functions accept a few different forms of arguments:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> noArgs <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> alert<span class=\"br0\">(<\/span><span class=\"st0\">\"I've no arguments\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> oneArg <span class=\"sy0\">=<\/span> arg <span class=\"sy0\">=&gt;<\/span> alert<span class=\"br0\">(<\/span>`My arg is $<span class=\"br0\">{<\/span>arg<span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> multipleArgs <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>arg1<span class=\"sy0\">,<\/span> arg2<span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> alert<span class=\"br0\">(<\/span>`Args<span class=\"sy0\">:<\/span> $<span class=\"br0\">{<\/span>arg1<span class=\"br0\">}<\/span> $<span class=\"br0\">{<\/span>arg2<span class=\"br0\">}<\/span>`<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>When using a single argument, no parentheses are needed. When there are multiple arguments, use parentheses and commas in the same style as a classic function declaration. Arrow functions which accept no arguments require an empty pair of parentheses so the syntax is valid.<\/p>\n<h2 id=\"working-with-object-literals\"><span class=\"ez-toc-section\" id=\"Working_With_Object_Literals\"><\/span>Working With Object Literals<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can return object literals from inline arrow functions but they must be wrapped in parentheses. This is a requirement of the parser.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> func <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>foo<span class=\"sy0\">:<\/span> <span class=\"st0\">\"bar\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>You can destructure an object literal into arguments using the same parentheses-wrapped form:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> func <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>foo<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> foo<span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ func({foo: \"bar\"}) returns \"bar\"<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Omitting the parentheses creates a syntax error in both cases.<\/p>\n<h2 id=\"returning-values\"><span class=\"ez-toc-section\" id=\"Returning_Values\"><\/span>Returning Values<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>All our examples so far have been single-line functions with an implicit <code>return<\/code> statement.<\/p>\n<p>You can write arrow functions that span multiple lines:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">function<\/span> getNonEmptyStrings<span class=\"br0\">(<\/span>arr<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"kw1\">return<\/span> arr.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span>i <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">const<\/span> trimmed <span class=\"sy0\">=<\/span> i.<span class=\"me1\">trim<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw1\">const<\/span> replaced <span class=\"sy0\">=<\/span> trimmed.<span class=\"me1\">replace<\/span><span class=\"br0\">(<\/span><span class=\"co2\">\/[^A-Za-z]\/g<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>replaced.<span class=\"me1\">length<\/span> <span class=\"sy0\">&gt;<\/span> <span class=\"nu0\">0<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>When writing a multi-line arrow function, wrap its body block in brackets in the same way you would a traditional function. It\u2019s not possible to use an implicit return; you must revert to a <code>return<\/code> statement.<\/p>\n<h2 id=\"lexical-binding\"><span class=\"ez-toc-section\" id=\"Lexical_Binding\"><\/span>Lexical Binding<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aside from syntax, the presence of <em>lexical binding<\/em> is one of the biggest differences between arrow functions and classical function expressions.<\/p>\n<p>A traditional function has <code>this<\/code> bound to refer to itself. Arrow functions are always anonymous. <code>this<\/code> is bound to the same value as the <code>this<\/code> within the block defining the arrow function.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">class<\/span> Example <span class=\"br0\">{<\/span>\n\u00a0\n    constructor<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">this<\/span>.<span class=\"me1\">demo<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">\"foobar\"<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    classic<span class=\"br0\">(<\/span>arr<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> arr.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">(<\/span>a<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n            <span class=\"kw1\">return<\/span> <span class=\"br0\">(<\/span>a <span class=\"sy0\">===<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">demo<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n        <span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n    arrow<span class=\"br0\">(<\/span>arr<span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span> arr.<span class=\"me1\">filter<\/span><span class=\"br0\">(<\/span>a <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>a <span class=\"sy0\">===<\/span> <span class=\"kw1\">this<\/span>.<span class=\"me1\">demo<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"br0\">}<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> ex <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> Example<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ no matches<\/span>\nex.<span class=\"me1\">classic<\/span><span class=\"br0\">(<\/span><span class=\"br0\">[<\/span><span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">]<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ matches<\/span>\nex.<span class=\"me1\">arrow<\/span><span class=\"br0\">(<\/span><span class=\"br0\">[<\/span><span class=\"st0\">\"foobar\"<\/span><span class=\"br0\">]<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The ability of arrow functions to use the <code>this<\/code> of the parent scope means you don\u2019t need to use <code>bind()<\/code> when using them in classes. Combined with the terser syntax, this makes arrow functions the ideal form when writing callbacks. They\u2019re best in throwaway scenarios where the outside context is more important than the function\u2019s own identity.<\/p>\n<p>As a consequence of the lexical binding, arrow functions shouldn\u2019t be used with the <code>call<\/code>, <code>apply<\/code> and <code>bind<\/code> functions. These functions are used to execute a function within a specific scope. They aren\u2019t relevant to arrow functions as <code>this<\/code> will always be set to the scope the expression is defined in.<\/p>\n<h2 id=\"characteristics\"><span class=\"ez-toc-section\" id=\"Characteristics\"><\/span>Characteristics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Arrow functions have a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\">few other differences<\/a> compared to explicitly-defined <code>function<\/code> expressions.<\/p>\n<p>Arrow functions have no <code>constructor<\/code> so you can\u2019t create instances of them with the <code>new<\/code> keyword. They\u2019ve no prototype either \u2013 the <code>prototype<\/code> property will be <code>undefined<\/code>.<\/p>\n<p>Unlike regular functions, you can\u2019t use the <code>arguments<\/code> local variable. It will be <code>undefined<\/code>. You must access the values of arguments directly by name.<\/p>\n<p>Using an arrow function as a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Generator\">generator<\/a> isn\u2019t supported. Trying to use the <code>yield<\/code> keyword within an arrow function\u2019s body will raise an error.<\/p>\n<p>A final thing to watch for is the parsing order. Arrow functions get unique treatment within conditional expressions, so take note of the output in the following scenarios:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> value <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ Traditional function; all OK<\/span>\nlet result <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>value <span class=\"sy0\">||<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"br0\">{<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ Arrow function - throws a `SyntaxError`<\/span>\nlet result <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>value <span class=\"sy0\">||<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw2\">null<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"co1\">\/\/ Arrow function; all OK<\/span>\nlet result <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span>value <span class=\"sy0\">||<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"kw2\">null<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>When creating an arrow function in a conditional expression, wrap it in parentheses to ensure it\u2019s evaluated correctly. Some of the rules of operator precedence are overridden, as illustrated by the second example.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using arrow functions makes your code more concise and reduces boilerplate. Their attributes, including anonymity and lexical binding, considerably simplify scenarios such as callbacks. Simultaneously, those same attributes mean they aren\u2019t a drop-in replacement for every traditional function.<\/p>\n<p>Besides their limitations, some JavaScript developers consider that arrow functions can make code less readable and trickier to maintain. The complete lack of keywords, such as <code>function<\/code> and <code>return<\/code>, makes it possible to overlook their presence while skimming code. The syntax is more opaque to new developers who may not be fully aware of its idiosyncrasies.<\/p>\n<p>It\u2019s therefore a good idea to think how you\u2019ll use arrow functions in your codebase. Often, that means writing callbacks in arrow form while sticking with alternative syntax for key top-level functions.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9640\/using-arrow-functions-in-javascript\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Using Arrow Functions in JavaScript \u2013 CloudSavvy IT&#8221; An arrow function in JavaScript is a terser alternative to a traditional function. The syntax enables quick creation of inline anonymous functions. Arrow functions were added with ES6 in 2015. They\u2019re now supported by all major browsers. You can use them with older browsers, such as Internet&#8230;<\/p>\n","protected":false},"author":1,"featured_media":178805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/9983eab1b15229218cfb437751e1536e\/p\/uploads\/2021\/02\/66daab59.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-178804","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/178804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=178804"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/178804\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/178805"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=178804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=178804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=178804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}