<\/p>\n

\n
• They are more of a brief syntax for writing the function expression. It is also known as \u2018fat arrow<\/em> \u2018(=><\/strong>) the functions.<\/li>\n
• This keyword represented the object that called the function, which could be the window, the document, a button or whatever in a regular function.<\/li>\n
• It allows to bind the context of the components properly since in ES6 auto binding is not available by default.<\/li>\n
• While working with the higher-order functions, Arrow functions are most useful.<\/li>\n
• This keyword always<\/em>\u00a0represents the object that defined the arrow function in arrow function.<\/li>\n<\/ul>\n

  <\/p>\n

  For example, in regular<\/strong> functions:<\/strong><\/p>\n

  <\/div>

  class Header {  constructor() {    this.color = "Blue";  }\/\/Regular function:  changeColor = function() {    document.getElementById("demo").innerHTML += this;  }}const myheader = new Header();\/\/The window object calls the function:window.addEventListener("load", myheader.changeColor);\/\/A button object calls the function:document.getElementById("btn").addEventListener("click", myheader.changeColor);<\/code><\/pre> <\/div>\n
  For example, in Arrow<\/strong> functions:<\/strong><\/p>\n
   
   <\/div> 
  class Header {  constructor() {    this.color = "Blue";  }\/\/Arrow function:  changeColor = () => {    document.getElementById("demo").innerHTML += this;  }}const myheader = new Header();\/\/The window object calls the function:window.addEventListener("load", myheader.changeColor);\/\/A button object calls the function:document.getElementById("btn").addEventListener("click", myheader.changeColor);<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
  They are more of a brief syntax for writing the function expression. It is also known as \u2018fat arrow \u2018(=>) the functions. This keyword represented the object that called the function, which could be the window, the document, a button or whatever in a regular function. It allows to bind the context of the components […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16778,16788,16781,16777,16785,16782,16783,16779,16780,16776,16784,16787,16786],"class_list":["post-4006","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-arrow-function-in-react","tag-arrow-function-in-react-example","tag-arrow-function-in-react-native","tag-passing-functions-to-components","tag-react-arrow-function","tag-react-arrow-function-component","tag-react-arrow-function-props","tag-react-arrow-function-vs-function","tag-react-arrow-function-with-parameters","tag-react-es6-arrow-functions","tag-react-onclick-arrow-function","tag-what-is-arrow-function-in-react","tag-what-is-arrow-function-in-react-how-is-it-used"],"yoast_head":"\n