{"id":822,"date":"2022-07-11T08:57:56","date_gmt":"2022-07-11T08:57:56","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=822"},"modified":"2022-07-11T08:57:58","modified_gmt":"2022-07-11T08:57:58","slug":"arrow-functions-javascript","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/arrow-functions-javascript\/","title":{"rendered":"Arrow functions in Javascript"},"content":{"rendered":"<p style=\"text-align: center;\"><strong>Arrow Functions Javascript<\/strong><\/p>\n<p>Now, when we know much about the concept of functions, let&#8217;s now concentrate on something called arrow functions. These are the functions that make the syntax of functions even smaller. They do not have any name and we do not need any function keyword to declare the function(what we have been doing for a long). But remember that this thing is limited, and cannot be used in all situations.<\/p>\n<p>Below is the syntax for the arrow functions. You can understand the arrow function with help of the following example &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-823 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions.jpg\" alt=\"\" width=\"854\" height=\"138\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions.jpg 854w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-300x48.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-768x124.jpg 768w\" sizes=\"auto, (max-width: 854px) 100vw, 854px\" \/><\/p>\n<p>As shown in the above method, this is how we can use the arrow functions. Let&#8217;s have a look at the output now &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-824 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-1.jpg\" alt=\"\" width=\"1078\" height=\"181\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-1.jpg 1078w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-1-300x50.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-1-1024x172.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-1-768x129.jpg 768w\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" \/><\/p>\n<p>As you can see, we could make use of the arrow functions. Well, when we are having only one statement in our arrow function, then they return a value by default, like the above one. Here, we are executing the arrow function, and find that it returns that string.<\/p>\n<p>So, even if you do not write the return keyword, the value is going to be returned. But if the arrow function is having multiple lines, then we are supposed to make use of the return keyword.<\/p>\n<p>Have a look at the below program, where we are having multiple statements in the arrow function. In the function below, we are calculating the power of one number over another number, and then returning the result.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-825 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-2.jpg\" alt=\"\" width=\"850\" height=\"217\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-2.jpg 850w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-2-300x77.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-2-768x196.jpg 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/p>\n<p><span style=\"font-size: revert; background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--system-font);\">As you can see, we had to specify the return keyword along with the value to return. This way, we can make use of the arrow functions, in our programs.<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: revert; background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--system-font);\">Also, if the arrow function is not going to have any arguments, you should give empty brackets there.<br \/>\n<\/span><\/p>\n<p><span style=\"font-size: revert; background-color: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); font-family: var(--wp--preset--font-family--system-font);\">Have a look at the below program, where we are not giving any parameters., let&#8217;s have a look at the output &#8211;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1613 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Arrow-functions-in-Javascript.jpg\" alt=\"\" width=\"1123\" height=\"221\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Arrow-functions-in-Javascript.jpg 1123w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Arrow-functions-in-Javascript-300x59.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Arrow-functions-in-Javascript-1024x202.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/06\/Arrow-functions-in-Javascript-768x151.jpg 768w\" sizes=\"auto, (max-width: 1123px) 100vw, 1123px\" \/><\/p>\n<p>Now, let&#8217;s have a look at the output for the above-given code-<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-828 size-full\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-4.jpg\" alt=\"\" width=\"1078\" height=\"213\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-4.jpg 1078w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-4-300x59.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-4-1024x202.jpg 1024w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Arrow-functions-4-768x152.jpg 768w\" sizes=\"auto, (max-width: 1078px) 100vw, 1078px\" \/><\/p>\n<p>As you can see, we have taken several examples for understanding the arrow functions. Ultimately, these are some functions, and the syntax we can say belongs to the simple category. All we are doing is creating a variable, and then some parameters into the brackets, and then an arrow(like this =&gt;), and then we are writing our function code. At times, when we would need the arrow functions, we would make use of them. You can also try out some examples to get more familiar with the concept.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Arrow Functions Javascript Now, when we know much about the concept of functions, let&#8217;s now concentrate on something called arrow functions. These are the functions that make the syntax of functions even smaller. They do not have any name and we do not need any function keyword to declare the function(what we have been doing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,15],"class_list":{"0":"post-822","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript-tutorial","7":"tag-javascript","8":"tag-javascript-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=822"}],"version-history":[{"count":4,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/822\/revisions"}],"predecessor-version":[{"id":2151,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/822\/revisions\/2151"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}