{"id":4182,"date":"2023-05-01T03:25:59","date_gmt":"2023-05-01T03:25:59","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4182"},"modified":"2023-06-10T11:30:46","modified_gmt":"2023-06-10T11:30:46","slug":"react-es6-tutorial-arrow-functions","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-es6-tutorial-arrow-functions\/","title":{"rendered":"React – ES6 Tutorial – Arrow Functions"},"content":{"rendered":"

What is ES6?<\/em><\/h2>\n

ES6 stands for ECMAScript 6.<\/em><\/p>\n

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015.<\/em><\/p>\n

\n
\n
\n

Arrow Functions<\/h2>\n

Arrow functions allow us to write shorter function syntax:<\/p>\n

Example<\/h3>\n

Before:<\/p>\n

hello = function() {\r\n  return \"Hello World!\";\r\n}<\/pre>\n
Example<\/h3>\n
With Arrow Function:<\/p>\n
hello = () => {\r\n  return \"Hello World!\";\r\n}<\/pre>\n
It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets\u00a0and<\/em>\u00a0the\u00a0return<\/code>\u00a0keyword:<\/p>\n
\n
Example<\/h3>\n
Arrow Functions Return Value by Default:<\/p>\n
hello = () => \"Hello World!\";<\/pre>\n
\n
Note:\u00a0This works only if the function has only one statement.<\/strong><\/span><\/p>\n<\/div>\n
If you have parameters, you pass them inside the parentheses:<\/p>\n
\n
Example<\/h3>\n
Arrow Function With Parameters:<\/p>\n
hello = (val) => \"Hello \" + val;<\/pre>\n
In fact, if you have only one parameter, you can skip the parentheses as well:<\/p>\n
\n
Example<\/h3>\n
Arrow Function Without Parentheses:<\/p>\n
hello = val => \"Hello \" + val;<\/pre>\n
What About\u00a0this<\/span><\/code><\/span>?<\/h2>\n
The handling of\u00a0this<\/code>\u00a0is also different in arrow functions compared to regular functions.<\/p>\n
In short, with arrow functions there is no binding of\u00a0this<\/code>.<\/p>\n
In regular functions the\u00a0this<\/code>\u00a0keyword represented the object that called the function, which could be the window, the document, a button or whatever.<\/p>\n
With arrow functions, the\u00a0this<\/code>\u00a0keyword\u00a0always<\/em>\u00a0represents the object that defined the arrow function.<\/p>\n
Let us take a look at two examples to understand the difference.<\/p>\n
Both examples call a method twice, first when the page loads, and once again when the user clicks a button.<\/p>\n
The first example uses a regular function, and the second example uses an arrow function.<\/p>\n
The result shows that the first example returns two different objects (window and button), and the second example returns the Header object twice.<\/p>\n
Example<\/h3>\n
With a regular function,\u00a0this<\/code>\u00a0represents the object that called the function:<\/p>\n
class Header {\r\n  constructor() {\r\n    this.color = \"Red\";\r\n  }\r\n\r\n\/\/Regular function:\r\n  changeColor = function() {\r\n    document.getElementById(\"demo\").innerHTML += this;\r\n  }\r\n}\r\n\r\nconst myheader = new Header();\r\n\r\n\/\/The window object calls the function:\r\nwindow.addEventListener(\"load\", myheader.changeColor);\r\n\r\n\/\/A button object calls the function:\r\ndocument.getElementById(\"btn\").addEventListener(\"click\", myheader.changeColor);<\/pre>\n
Example<\/h3>\n
With an arrow function,\u00a0this<\/code>\u00a0represents the Header object no matter who called the function:<\/p>\n
class Header {\r\n  constructor() {\r\n    this.color = \"Red\";\r\n  }\r\n\r\n\/\/Arrow function:\r\n  changeColor = () => {\r\n    document.getElementById(\"demo\").innerHTML += this;\r\n  }\r\n}\r\n\r\nconst myheader = new Header();\r\n\r\n\r\n\/\/The window object calls the function:\r\nwindow.addEventListener(\"load\", myheader.changeColor);\r\n\r\n\/\/A button object calls the function:\r\ndocument.getElementById(\"btn\").addEventListener(\"click\", myheader.changeColor);<\/pre>\n
Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
What is ES6? ES6 stands for ECMAScript 6. ECMAScript was created to <\/a><\/p>\n","protected":false},"author":1,"featured_media":4376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[508,12],"tags":[514,511,510,491,509,513,512],"newstopic":[578],"class_list":{"0":"post-4182","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"category-web-development","9":"tag-arrow-functions","10":"tag-ecmascript-6","11":"tag-es6-tutorial","12":"tag-javascript","13":"tag-react","14":"tag-react-classes","15":"tag-react-tutorial","16":"newstopic-react"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4182"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4182\/revisions"}],"predecessor-version":[{"id":4183,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4182\/revisions\/4183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4376"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4182"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}