-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathArrow-function.js
More file actions
143 lines (108 loc) · 3.39 KB
/
Arrow-function.js
File metadata and controls
143 lines (108 loc) · 3.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//: 8.1 => /* When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint:prefer=arrow-function, arrow-spacing */
/* Why? It creates a version of the function that executes in the context of this, which is usually what you want, and is a more concise syntax.
Why not? If you have a fairly complicated function, you might move that logic out into its own named function expression. */
// bad
[1, 2, 3, 4].map(function (x) {
console.log(x);
});
// good
[1, 2, 3, 4, 5].map((x) => {
console.log(x);
});
//: 8.2 => /* If the funtion body consist of a single statement returning an expression without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a return statement. eslint: arrow-parens, arrow-body-style */
/* Why? Syntatic sugar. It reads well when multiple functions are chained together. */
// bad
[1, 2, 3, 4].map((number) => {
const nextNumber = number + 1;
`A string containing the ${nextNumber}`;
});
// good
[1, 2, 3].map((number) => `A string containing the ${number + 1}`);
// good
[1, 2, 3].map((number) => {
const nextNumber = number + 1;
return `A string containing the ${nextNumber}.`;
});
// good
[1, 2, 3].map((number, index) => ({
[index]: number,
}));
// No implicit return with side effects
function foo(callback) {
const val = callback();
if (val === true) {
// Do something if callback returns true
}
}
let bool = false;
// bad
foo(() => (bool = true));
// good
foo(() => {
bool = true;
});
//: 8.3 => In case the expression spans over multiple lines, wrap it in parentheses for better readability.
/* Why? It shows clearly where the function starts and ends. */
// bad
["get", "post", "put"].map((httpMethod) =>
Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod
)
);
// good
["get", "post", "put"].map((httpMethod) =>
Object.prototype.hasOwnProperty.call(
httpMagicObjectWithAVeryLongName,
httpMethod
)
);
//: 8.4 => Always include parentheses around arguments for clarity and consistency. eslint: arrow-parens
/* Why? Minimizes diff churn when adding or removing arguments. */
// bad
[1, 2, 3].map((x) => x * x);
// good
[1, 2, 3].map((x) => x * x);
// bad
[1, 2, 3].map(
(number) =>
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
);
// good
[1, 2, 3].map(
(number) =>
`A long string with the ${number}. It’s so long that we don’t want it to take up space on the .map line!`
);
// bad
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
// good
[1, 2, 3].map((x) => {
const y = x + 1;
return x * y;
});
//: 8.5 => Avoid confusing arrow function syntax (=>) with comparison operators (<=, >=). eslint: no-confusing-arrow
// bad
const itemHeight = (item) =>
item.height <= 256 ? item.largeSize : item.smallSize;
// bad
const itemHeight2 = (item) =>
item.height >= 256 ? item.largeSize : item.smallSize;
// good
const itemHeight3 = (item) =>
item.height <= 256 ? item.largeSize : item.smallSize;
// good
const itemHeight4 = (item) => {
const { height, largeSize, smallSize } = item;
return height <= 256 ? largeSize : smallSize;
};
//: 8.6 => Enforce the location of arrow function bodies with implicit returns. eslint: implicit-arrow-linebreak
// bad
(foo) => bar;
(foo) => bar;
// good
(foo) => bar;
(foo) => bar;
(foo) => bar;