You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This document contains systematized concepts and patterns often used when naming variables.
11
-
12
-
## Summary
13
-
*[Guidelines](#guidelines)
14
-
*[HC/LC Pattern](#hclc-pattern)
15
-
***[Actions](#actions)**
16
-
*[get](#get)
17
-
*[set](#set)
18
-
*[reset](#reset)
19
-
*[fetch](#fetch)
20
-
*[remove](#remove)
21
-
*[delete](#delete)
22
-
*[compose](#compose)
23
-
*[handle](#handle)
24
-
***[Prefixes](#prefixes)**
25
-
*[is](#is)
26
-
*[has](#has)
27
-
*[should](#should)
28
-
*[min/max](#minmax)
29
-
*[prev/next](#prevnext)
30
-
31
-
## Guidelines
32
-
* Pick **one** naming convention and follow it. Whether it is `likeThis`, or `like_this`, or anyhow else, it does not matter. What matters is consistency in your code.
8
+
Naming things is hard. This sheet attempts to make it easier.
9
+
10
+
Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.
11
+
12
+
## Naming convention
13
+
Pick **one** naming convention and follow it. It may be `likeThis`, or `like_this`, or anyhow else, it does not matter. What matters is for it to remain consistent.
33
14
34
15
```js
35
16
/* Bad */
36
-
constpages_count=5;
37
-
constshouldUpdate=true;
17
+
constpages_count=5
18
+
constshouldUpdate=true
38
19
39
20
/* Good */
40
-
constpagesCount=5;
41
-
constshouldUpdate=true;
21
+
constpagesCount=5
22
+
constshouldUpdate=true
42
23
43
24
/* Good as well */
44
-
constpages_count=5;
45
-
constshould_update=true;
25
+
constpages_count=5
26
+
constshould_update=true
46
27
```
47
28
48
-
* Name, whether of a variable, method, or something else, should be *short*, *descriptive* and *intuitive*:
49
-
***Short**. Variable should not take long to type and, therefore, to remember,
50
-
***Descriptive**. Name of the variable should reflect what it does/possesses in the most efficient way,
51
-
***Intuitive**. Name of the variable should read naturally, as close to the common speach as possible
29
+
## S-I-D
30
+
31
+
A name must be *short*, *intuitive* and *descriptive*:
32
+
***Short**. A name must not take long to type and, therefore, to remember,
33
+
***Intuitive**. Name must read naturally, as close to the common speach as possible
34
+
***Descriptive**. Name must reflect what it does/possesses in the most efficient way,
constshouldPaginatize= (postsCount >10) // Made up verbs are so much fun!
58
41
59
42
/* Good */
60
-
constpostsCount=5;
61
-
constshouldDisplayPagination= (postsCount >10);
43
+
constpostsCount=5
44
+
constshouldDisplayPagination= (postsCount >10)
62
45
```
63
46
64
-
* Do *not* use contractions. The latter contribute to nothing but decreased code readability. Finding a short, descriptive name may be hard, but don't think contractions help you in any way.
47
+
## Avoid contractions
48
+
49
+
Do **not** use contractions. They contribute to nothing but decreased readability of your code. Finding a short, descriptive name may be hard, but contraction is not an excude to not doing so.
65
50
66
51
```js
67
52
/* Bad */
68
-
constonItmClck= () => {};
53
+
constonItmClk= () => {}
69
54
70
55
/* Good */
71
-
constonItemClick= () => {};
56
+
constonItemClick= () => {}
72
57
```
73
58
74
-
* Name should not duplicate the context when the latter is known, and when removing the context does not decrease the name's readability:
59
+
## Avoid context duplication
60
+
61
+
A name should not duplicate the context in which it is defined. Always remove the context from a name if that doesn't decrease its readability.
75
62
76
63
```js
77
64
classMenuItem {
78
-
/* Method name duplicates the context it is in (which is "MenuItem") */
65
+
/* Method name duplicates the context (which is "MenuItem") */
79
66
handleMenuItemClick= (event) => { ... }
80
67
81
-
/*This way it reads as MenuItem.handleClick() */
68
+
/*Reads nicely as `MenuItem.handleClick()`*/
82
69
handleClick= (event) => { ... }
83
70
}
84
71
```
85
-
* Name should reflect the expected result:
86
72
87
-
```js
73
+
## Reflect expected result
74
+
75
+
A name should reflect the expected result.
76
+
77
+
```jsx
88
78
/* Bad */
89
-
constisEnabled= (itemsCount >3);
90
-
return(<Button disabled={!isEnabled} />);
79
+
constisEnabled= (itemsCount >3)
80
+
return<Button disabled={!isEnabled} />
91
81
92
82
/* Good */
93
-
constisDisabled= (itemsCount <=3);
94
-
return(<Button disabled={isDisabled} />);
83
+
constisDisabled= (itemsCount <=3)
84
+
return<Button disabled={isDisabled} />)
95
85
```
96
86
97
87
---
98
88
99
-
## HC/LC Pattern
100
-
There is a useful pattern you may follow when naming your methods:
89
+
# Naming functions
90
+
91
+
## A/HC/LC Pattern
92
+
There is a useful pattern to follow when naming functions:
> **Note:**The order of the contexts affects the core meaning of a method. For example, `shouldUpdateComponent` means *you* are about to update a component, while `shouldComponentUpdate` tells you that *component* will update on itself, and you are but controlling whether it should do that right now.
116
-
In other words, **high context emphasizes the meaning of the variable**.
107
+
> **Note:**Context order affects the meaning of a method. For example, `shouldUpdateComponent` means *you* are about to update a component, while `shouldComponentUpdate` tells you that *component* will update on itself, and you are but controlling whether it should do that right now.
108
+
In other words, **high context emphasizes the meaning of a variable**.
117
109
118
110
---
119
111
120
112
## Actions
121
-
Chosing a proper action name may grant explicit descriptiveness to your methods. This is a good place to start when naming your methods.
113
+
114
+
The verb part of your function name. The most important part responsible for describing what the function *does*.
122
115
123
116
#### `get`
124
117
Accesses data immediately (i.e. shorthand getter of internal data).
@@ -132,38 +125,38 @@ function getFruitsCount() {
132
125
Declaratively sets a variable with value `A` to value `B`.
133
126
134
127
```js
135
-
constfruits=0;
128
+
constfruits=0
136
129
137
130
functionsetFruits(nextFruits) {
138
-
fruits = nextFruits;
131
+
fruits = nextFruits
139
132
}
140
133
141
-
setFruits(5);
134
+
setFruits(5)
142
135
console.log(fruits) // 5
143
136
```
144
137
145
138
#### `reset`
146
139
Sets a variable back to its initial value or state.
147
140
148
141
```js
149
-
constinitialFruits=5;
150
-
constfruits= initialFruits;
151
-
setFruits(10);
152
-
console.log(fruits);// 10
142
+
constinitialFruits=5
143
+
constfruits= initialFruits
144
+
setFruits(10)
145
+
console.log(fruits) // 10
153
146
154
147
functionresetFruits() {
155
-
fruits = initialFruits;
148
+
fruits = initialFruits
156
149
}
157
150
158
-
resetFruits();
159
-
console.log(fruits);// 5
151
+
resetFruits()
152
+
console.log(fruits) // 5
160
153
```
161
154
162
155
#### `fetch`
163
156
Requests for a data, which takes time (i.e. async request).
For example, if you have a collection of selected filters on a search page, removing one of them from the collection is `removeFilter`, **not**`deleteFilter` (and this is how you would naturally say it in English as well):
0 commit comments