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
Copy file name to clipboardExpand all lines: README.md
+44-40Lines changed: 44 additions & 40 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,12 +5,14 @@
5
5
</p>
6
6
7
7
# Naming cheatsheet
8
+
8
9
Naming things is hard. This sheet attempts to make it easier.
9
10
10
11
Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.
11
12
12
13
## 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.
14
+
15
+
Pick **one** naming convention and follow it. It may be `cammelCase`, or `snake_case`, or anyhow else, it does not matter. What matters is for it to remain consistent.
14
16
15
17
```js
16
18
/* Bad */
@@ -28,21 +30,22 @@ const should_update = true
28
30
29
31
## S-I-D
30
32
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.
33
+
A name must be _short_, _intuitive_ and _descriptive_:
34
+
35
+
-**Short**. A name must not take long to type and, therefore, remember;
36
+
-**Intuitive**. A name must read naturally, as close to the common speech as possible;
37
+
-**Descriptive**. A name must reflect what it does/possesses in the most efficient way.
> **Note:** The order of context affects the meaning of a variable. 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.
110
-
In other words, **high context emphasizes the meaning of a variable**.
112
+
> **Note:** The order of context affects the meaning of a variable. 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.
113
+
> In other words, **high context emphasizes the meaning of a variable**.
111
114
112
115
---
113
116
114
117
## Actions
115
118
116
-
The verb part of your function name. The most important part responsible for describing what the function *does*.
119
+
The verb part of your function name. The most important part responsible for describing what the function _does_.
117
120
118
121
### `get`
119
122
120
123
Accesses data immediately (i.e. shorthand getter of internal data).
124
+
121
125
```js
122
126
functiongetFruitsCount() {
123
-
returnthis.fruits.length;
127
+
returnthis.fruits.length
124
128
}
125
129
```
126
130
@@ -162,6 +166,7 @@ console.log(fruits) // 5
162
166
### `fetch`
163
167
164
168
Requests for a data, which takes time (i.e. async request).
169
+
165
170
```js
166
171
functionfetchPosts(postCount) {
167
172
returnfetch('https://api.dev/posts', {...})
@@ -170,13 +175,13 @@ function fetchPosts(postCount) {
170
175
171
176
### `remove`
172
177
173
-
Removes something *from* somewhere.
178
+
Removes something _from_ somewhere.
174
179
175
180
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):
176
181
177
182
```js
178
183
functionremoveFilter(filterName, filters) {
179
-
returnfilters.filter(name=> name !== filterName)
184
+
returnfilters.filter((name)=> name !== filterName)
A function is often an action on *something*. It is important to state what is its operable domain, or at least an expected data type.
237
+
A function is often an action on _something_. It is important to state what is its operable domain, or at least an expected data type.
233
238
234
239
```js
235
240
/* A pure function operating with primitives */
@@ -243,7 +248,7 @@ function getRecentPosts(posts) {
243
248
}
244
249
```
245
250
246
-
> Some language-specific assumptions may allow to omit the context. For example, in JavaScript it is common that `filter` operates on Array. Adding explicit `filterArray` would be unnecessary.
251
+
> Some language-specific assumptions may allow omitting the context. For example, in JavaScript, it's common that `filter` operates on Array. Adding explicit `filterArray` would be unnecessary.
247
252
248
253
---
249
254
@@ -257,7 +262,7 @@ Describes a characteristic or state of the current context (usually `boolean`).
257
262
258
263
```js
259
264
constcolor='blue'
260
-
constisBlue=(color ==='blue')// characteristic
265
+
constisBlue= color ==='blue'// characteristic
261
266
constisPresent=true// state
262
267
263
268
if (isBlue && isPresent) {
@@ -271,11 +276,11 @@ Describes whether the current context possesses a certain value or state (usuall
271
276
272
277
```js
273
278
/* Bad */
274
-
constisProductsExist=(productsCount >0)
275
-
constareProductsPresent=(productsCount >0)
279
+
constisProductsExist= productsCount >0
280
+
constareProductsPresent= productsCount >0
276
281
277
282
/* Good */
278
-
consthasProducts=(productsCount >0)
283
+
consthasProducts= productsCount >0
279
284
```
280
285
281
286
### `should`
@@ -284,11 +289,12 @@ Reflects a positive conditional statement (usually `boolean`) coupled with a cer
284
289
285
290
```js
286
291
functionshouldUpdateUrl(url, expectedUrl) {
287
-
return(url !== expectedUrl)
292
+
return url !== expectedUrl
288
293
}
289
294
```
290
295
291
296
### `min`/`max`
297
+
292
298
Represent minimum or maximum value. Used when describing boundaries or limits.
293
299
294
300
```js
@@ -308,7 +314,7 @@ Indicate the previous or the next state of a variable in the current context. Us
308
314
```jsx
309
315
functionfetchPosts() {
310
316
constprevPosts=this.state.posts
311
-
317
+
312
318
constfetchedPosts=fetch('...')
313
319
constnextPosts=concat(prevPosts, fetchedPosts)
314
320
@@ -320,14 +326,12 @@ function fetchPosts() {
320
326
321
327
Like a prefix, variable names can be made singular or plural depending on whether they hold a single value or multiple values.
0 commit comments