Since ES6 syntax, a new syntax for creating functions has appeared in JavaScript.
It’s a syntax called arrow function, and if you use this, you can create a function.
Let’s learn about the arrow function from now on.
Arrow function syntax
In JavaScript, you create a function like this and use it.
1;
function fn() {
//something
}
2;
var fn = function () {
//something
};
function like (1) or (2) and
fn(); This function is used.
(In addition to starting with the function keyword, you can create a function by inserting a function into a variable with an equal sign =, as in (2).)
However, using the ES6 newspaper method, you can also make a function like this.
var fn = () => {
//something
};
Instead of a long and complicated keyword called function
=> This is a new method that uses these arrows to create a function.
Uses of arrow function
1. This is a syntax that expresses the original function of a function very well.
Do you know why we use function syntax when programming?
-
When you want to bundle multiple functional codes into one word (and reuse later)
-
When creating input/output functions
In this case, use a function.
And if you use the arrow function, it expresses the input/output function of the function very intuitively.
So if you use the arrow function, the input/output function can be expressed easily and beautifully.
var double = (x) => {
return x * 2;
};
console.log(double(4));
console.log(double(8));
I made a function that doubles a number when you put it in.
The function expression itself seems to say that x becomes x \* 2~, right?
It becomes very easy to understand.
This is advantage 1.
2. Parentheses can be omitted.
Parentheses can be omitted if there is only one parameter.
var double = (x) => {
return x * 2;
};
console.log(double(4));
console.log(double(8));
You also can do it like this.
3. Curly braces can be omitted.
If there is only one return line inside the curly braces, the curly braces and return can be omitted.
var double = (x) => x * 2;
console.log(double(4));
console.log(double(8));
If you omit it, now you can see at a glance how x changes and the input/output function.
Originally, it works fine without a semicolon at the end of {} braces.
Be polite and use semicolons when omitting them.
If you use the arrow function, the this value that was outside when using the internal this value is used as it is.
When you write a function… I learned last time that the internal this value changes depending on where the function is written.
However, the arrow function does not change the internal this value wherever it is used.
So, a function that uses the meaning of this outside as it is inside is a function called arrow function.
(This is Advantage 4 and the key reason for using arrow functions.)
Let’s see an example.
var obj1 = {
fn: function () {
console.log(this);
},
};
obj1.fn();
The object holding fn(), obj1, will be printed to the console window.
How about this one?
var obj1 = {
fn: () => {
console.log(this);
},
};
obj1.fn();
If you run the above code…
window is displayed.
Here, this is window.
Why is obj1, the owner of the function, not output?
The this value always changes when it encounters a function, but inside the arrow function it does not change, and the outside this is used as it is.
(This, which was outside the object, is the window.)
This is because the arrow function is a function that uses the external this as it is.
Not always an advantage. It may be different from the this value I expected, so it can be a disadvantage.
As the meaning of this is different, because the general function and usage are not completely the same
Syntax is not always a substitute for a regular function. Let’s just pay attention to that.
