{"componentChunkName":"component---src-templates-blog-js","path":"/blog/javascript-arrow-functions-explained","result":{"data":{"contentfulBlogPost":{"title":"JavaScript Arrow Functions Explained","publishedDate":"January 15th, 2021","body":{"json":{"nodeType":"document","data":{},"content":[{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Hello everyone, I'll continue explaining basic concepts of JavaScript with Arrow Functions today. I don't think that I'll be able to cover all features that comes with arrow functions and I don't think that they are necessary for most cases but if you have any suggestions or improvements to make on that article please drop it on the comments section.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"Optional NPM Package","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"We'll use Node time for this post, so if you like to follow along you need to have it on your local. You can download it ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"here","marks":[],"data":{}}],"data":{"uri":"https://nodejs.org/en/"}},{"nodeType":"text","value":".","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"If you want to have hot reloading feature in you project like I used along the tutorial you can go ahead and install the code from github and simply run the command \"npm install\" in the root directory, or if you want to do that  manually by hand on the root directory you should run the commands below in order:","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"npm init -y","marks":[{"type":"code"}],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"npm install -D nodemon","marks":[{"type":"code"}],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"After that you can go ahead and create a new script in your package.json file:","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c6Tc4yw7VxBD6PrRoFenFRT","type":"Asset","createdAt":"2021-01-11T15:19:51.513Z","updatedAt":"2021-01-11T15:19:51.513Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"6Tc4yw7VxBD6PrRoFenFRT"},"fields":{"title":{"en-US":"js-array-nodemon"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/6Tc4yw7VxBD6PrRoFenFRT/b39c57b51340d86e8faf21d187001f0f/Screen_Shot_2021-01-11_at_16.19.30.png","details":{"size":7229,"image":{"width":202,"height":53}},"fileName":"Screen Shot 2021-01-11 at 16.19.30.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"You can now start your node runtime with hot reloading by running the command:","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"npm run dev","marks":[{"type":"code"}],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"What is Arrow Functions?","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Arrow functions, by their nature, pretty similar with Python Lambda functions if you are familiar with that language. Lambda functions are basically anonymous functions with a specific syntax that takes a set of arguments and gives an output accordingly.","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Regular syntax for the arrow functions is as it follows:","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"let ourFunction = (argument1, argument2, argument3, ... ,argumentN) => anexpression","marks":[{"type":"code"}],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"In the scope of JavaScript arrow functions are capable of doing several stuff with several trade offs.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"Where not to Use Arrow Functions?","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"\"Does not have its own bindings to this or super, and should not be used as methods.\nDoes not have arguments, or new.target keywords.\nNot suitable for call, apply and bind methods, which generally rely on establishing a scope.\nCan not be used as constructors.\nCan not use yield, within its body. \"","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Those limitations comes directly from the ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"MDN","marks":[],"data":{}}],"data":{"uri":"https://developer.cdn.mozilla.net/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions"}},{"nodeType":"text","value":" website, a website that you can find many resources about many technologies.","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Out of those 4 above I think the most important 2 are not being able to used as a method and not being able used as constructors.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Here is an example below that demonstrates why we shouldn't use arrow functions as methods.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c6ngj44OlK45vpsGOF3phbV","type":"Asset","createdAt":"2021-01-15T12:09:04.219Z","updatedAt":"2021-01-15T12:09:04.219Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"6ngj44OlK45vpsGOF3phbV"},"fields":{"title":{"en-US":"js-arrow-functions-explained"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/6ngj44OlK45vpsGOF3phbV/b35182b4ab8e5105ea622dc84ea3d09a/Screen_Shot_2021-01-15_at_13.01.09.png","details":{"size":22956,"image":{"width":406,"height":195}},"fileName":"Screen Shot 2021-01-15 at 13.01.09.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"In this example we created 2 objects with one with a regular function as a method and the other one with new arrow functions. When we check the results below.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c6ttnVuYDwghC0DwgBJivg4","type":"Asset","createdAt":"2021-01-15T12:12:21.549Z","updatedAt":"2021-01-15T12:12:21.549Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"6ttnVuYDwghC0DwgBJivg4"},"fields":{"title":{"en-US":"js-arrow-method-output"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/6ttnVuYDwghC0DwgBJivg4/07b3cc576754e65a6d4db08277457ecc/Screen_Shot_2021-01-15_at_13.11.58.png","details":{"size":9221,"image":{"width":344,"height":28}},"fileName":"Screen Shot 2021-01-15 at 13.11.58.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"As we can see with arrow functions we now can't reach owner object by using \"this\". If you want to learn about what is \"this\" in JavaScript for different use cases you can check out this ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"link","marks":[],"data":{}}],"data":{"uri":"https://www.w3schools.com/js/js_this.asp"}},{"nodeType":"text","value":" to figure out.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Now we'll take a look at another example with arrow and normal functions as constructors.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"syuE72rwxcIMnjJvXh1yA","type":"Asset","createdAt":"2021-01-15T12:31:21.557Z","updatedAt":"2021-01-15T12:31:21.557Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"syuE72rwxcIMnjJvXh1yA"},"fields":{"title":{"en-US":"js-arrow-constructors"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/syuE72rwxcIMnjJvXh1yA/88560329c6991106e13556394a93c2ad/Screen_Shot_2021-01-15_at_13.30.46.png","details":{"size":15830,"image":{"width":198,"height":162}},"fileName":"Screen Shot 2021-01-15 at 13.30.46.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Now we have 2 new functions and we are trying to use both of them as constructors.","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c1394asE62XNQe9vGMaN2yh","type":"Asset","createdAt":"2021-01-15T12:26:00.811Z","updatedAt":"2021-01-15T12:26:00.811Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"1394asE62XNQe9vGMaN2yh"},"fields":{"title":{"en-US":"js-output-constructor"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/1394asE62XNQe9vGMaN2yh/f1c01164d1940be8cebab235d71c7ebe/Screen_Shot_2021-01-15_at_13.25.22.png","details":{"size":22518,"image":{"width":625,"height":93}},"fileName":"Screen Shot 2021-01-15 at 13.25.22.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"The results are as expected, while first constructor gives the desired output the second one fails because arrow functions doesn't support such a thing.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"Where to use Arrow Functions?","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Arrow functions are suitable for much other cases and I personally only use them when there are no limitations as its explained like above. However there is an obvious better go to use case for arrow functions and most people are often using it, inside of a higher order functions. If you don't know what a higher order function is they are basically functions that either take a function as an argument or returns one as their results. You can go ahead and check them out in depth from ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"here","marks":[],"data":{}}],"data":{"uri":"https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b"}},{"nodeType":"text","value":". ","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"Let's take one of the higher order functions that I explained in a post about JavaScript array methods before, the map method. ( You can go ahead and check other posts of mine from the link ","marks":[],"data":{}},{"nodeType":"hyperlink","content":[{"nodeType":"text","value":"here","marks":[],"data":{}}],"data":{"uri":"https://eren23.medium.com/"}},{"nodeType":"text","value":".)","marks":[],"data":{}}],"data":{}},{"nodeType":"embedded-asset-block","content":[],"data":{"target":{"sys":{"space":{"sys":{"type":"Link","linkType":"Space","id":"qv0hcw26u3ts","contentful_id":"qv0hcw26u3ts"}},"id":"c58uh6FgZdpTgfZ0M5eLh7U","type":"Asset","createdAt":"2021-01-15T12:49:28.939Z","updatedAt":"2021-01-15T12:49:28.939Z","environment":{"sys":{"id":"master","type":"Link","linkType":"Environment","contentful_id":"master"}},"revision":1,"contentful_id":"58uh6FgZdpTgfZ0M5eLh7U"},"fields":{"title":{"en-US":"js-arrow-explained-hofunc"},"file":{"en-US":{"url":"//images.ctfassets.net/qv0hcw26u3ts/58uh6FgZdpTgfZ0M5eLh7U/c2afa93eef2bc8b586b65848a5f36853/Screen_Shot_2021-01-15_at_13.47.56.png","details":{"size":23094,"image":{"width":373,"height":172}},"fileName":"Screen Shot 2021-01-15 at 13.47.56.png","contentType":"image/png"}}}}}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"As you can see above we created 2 variables with the outputs of 2 different map methods and the one with arrow functions took way less code and space to write.","marks":[],"data":{}}],"data":{}},{"nodeType":"hr","content":[],"data":{}},{"nodeType":"heading-2","content":[{"nodeType":"text","value":"Conclusion","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"JS arrow functions are totally super nice and I guess most people are now got used to it. When all the limitations are taken in considered before using it helps us developers to write cleaner and more readable code with less effort.","marks":[],"data":{}}],"data":{}},{"nodeType":"paragraph","content":[{"nodeType":"text","value":"I hope you enjoyed reading this post. See you in the next time :).","marks":[],"data":{}}],"data":{}}]}}}},"pageContext":{"slug":"javascript-arrow-functions-explained"}}}