JavaScript ES6Summary of Attention Details of Arrow Functions

Introduction

ES6The standard has added a new type of function: Arrow Function (箭头函数).

Why is it called Arrow Function? Because its definition uses an arrow:

x => x * x

The above arrow function is equivalent to:

function (x) {
return x * x;
}

But arrow functions have brought some problems, let's take a look together below.

Regarding {}

The first question is about arrow functions and {}.

Arrow functions, at first glance, seem quite simple to use, for example, as shown below, they are used to multiply each item in an array by2:

const numbers = [1 2 3;
 const result = numbers.map(n => n * 2);
 // produces [246]

However, if used improperly, it may cause unexpected problems. For example, the following attempt to generate object literals for each item in the array, which looks like a simple map operation, still resulted in an unexpected outcome.

const numbers = [1 2 3;
 const result = numbers.map(n => { value: n });
 // produces [undefined], [undefined], [undefined]

What is the cause of this?

A slight analysis shows that the cause of the above problem lies in the fact that the code enclosed in curly braces inside the arrow function is considered a separate code block rather than an object literal, therefore, when executed independently, the result is obviously an array full of undefined values.
So, in this case, the code must have an explicit return statement or use parentheses () to enclose the object literal.

const result = numbers.map(n => ({ value: n }));
 // [{value: 1}, {value:2}, {value:3}]

About 'this'

The second question is about arrow functions and 'this'.

With arrow functions, you can write code like this without storing 'this' in a local scope:

const adder = {
  sum: 0,
  add(numbers) {
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 });
 adder.add([1 2 3]
 // adder.sum === 6

However, many times you might mistakenly think that you are writing code without realizing it. As shown in the following code, 'this' does not point to the 'adder' object, but to the scope where the 'adder' object is located:

const adder = {
  sum: 0,
  add: (numbers) => { // scope here is important
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 });
 adder.add([1 2 3]
 // adder.sum === 0

Finally, remember one point: the 'this' in arrow functions inherits the value from the outer scope, so we cannot change its direction.

Summary

That's all for this article. I hope the content of this article can bring some help to everyone's learning or work. If you have any questions, you can leave a message for communication.

Statement: The content of this article is from the network, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, does not edit the content manually, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (when sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the suspected infringing content.)