top of page
Logo der Online Agentur mdwp

Fat Arrow Functions

Fat Arrow Functions are a modern addition to JavaScript (not specific to React JS) that allow for a more concise syntax when writing functions. They are called "Fat Arrow Functions" because they use the "=>" operator to define the function, instead of the traditional "function" keyword followed by the block of code.

This is especially useful in React JS when you need to maintain the context of "this" keyword within your functions, as a fat arrow function does not bind its own "this" context. So, instead of having to manually bind this in constructor for every function, we use an arrow function.

Here's an example:

```
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
text: ""
};
}

updateText = (event) => {
this.setState({
text: event.target.value
});
}

render() {
return (
<div>
<input type="text" onChange={this.updateText} />
<p>{this.state.text}</p>
</div>
);
}
}
```

In this example, the "updateText" function is defined using a fat arrow function. This ensures that within the function, "this" will always refer to the component instance, and so will be able to call this.setState. If it were defined using a traditional function, without manually binding this, it would not work.

bottom of page