Flash cards
Review the key moves
What is the main idea behind React ES6 Arrow Functions?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
hello = ___() {Put the learning moves in the order that makes the concept easiest to apply.
Arrow Functions
Arrow functions allow us to write shorter function syntax:
hello = function() {
return "Hello World!";
}hello = () => {
return "Hello World!";
}It gets shorter! If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:
hello = () => "Hello World!";Note
This works only if the function has only one statement.
If you have parameters, you pass them inside the parentheses:
hello = (val) => "Hello " + val;In fact, if you have only one parameter, you can skip the parentheses as well:
hello = val => "Hello " + val;What About this ?
The handling of this is also different in arrow functions compared to regular functions.
In short, with arrow functions there is no binding of this .
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
With arrow functions, the this keyword always represents the object that defined the arrow function.
Let us take a look at two examples to understand the difference.
Both examples call a method twice, first when the page loads, and once again when the user clicks a button.
The first example uses a regular function, and the second example uses an arrow function.
The result shows that the first example returns two different objects (window and button), and the second example returns the Header object twice.
thisthisRemember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.