Skip to content

Commit 39fa584

Browse files
committed
Provides grammar fixes
1 parent dbd554d commit 39fa584

File tree

1 file changed

+44
-40
lines changed

1 file changed

+44
-40
lines changed

README.md

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@
55
</p>
66

77
# Naming cheatsheet
8+
89
Naming things is hard. This sheet attempts to make it easier.
910

1011
Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.
1112

1213
## 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.
1416

1517
```js
1618
/* Bad */
@@ -28,21 +30,22 @@ const should_update = true
2830

2931
## S-I-D
3032

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.
3538

3639
```js
3740
/* Bad */
3841
const a = 5 // "a" could mean anything
39-
const isPaginatable = (postsCount > 10) // "Paginatable" sounds extremely unnatural
40-
const shouldPaginatize = (postsCount > 10) // Made up verbs are so much fun!
42+
const isPaginatable = postsCount > 10 // "Paginatable" sounds extremely unnatural
43+
const shouldPaginatize = postsCount > 10 // Made up verbs are so much fun!
4144

4245
/* Good */
4346
const postsCount = 5
44-
const hasPagination = (postsCount > 10)
45-
const shouldDisplayPagination = (postsCount > 10) // alternatively
47+
const hasPagination = postsCount > 10
48+
const shouldDisplayPagination = postsCount > 10 // alternatively
4649
```
4750

4851
## Avoid contractions
@@ -65,7 +68,7 @@ A name should not duplicate the context in which it is defined. Always remove th
6568
class MenuItem {
6669
/* Method name duplicates the context (which is "MenuItem") */
6770
handleMenuItemClick = (event) => { ... }
68-
71+
6972
/* Reads nicely as `MenuItem.handleClick()` */
7073
handleClick = (event) => { ... }
7174
}
@@ -77,11 +80,11 @@ A name should reflect the expected result.
7780

7881
```jsx
7982
/* Bad */
80-
const isEnabled = (itemsCount > 3)
83+
const isEnabled = itemsCount > 3
8184
return <Button disabled={!isEnabled} />
8285

8386
/* Good */
84-
const isDisabled = (itemsCount <= 3)
87+
const isDisabled = itemsCount <= 3
8588
return <Button disabled={isDisabled} />
8689
```
8790

@@ -99,28 +102,29 @@ prefix? + action (A) + high context (HC) + low context? (LC)
99102

100103
Take a look at how this pattern may be applied in the table below.
101104

102-
| Name | Prefix | Action (A) | High context (HC) | Low context (LC) |
103-
| ---- | ---- | ------ | ------------ | ----------- |
104-
| `getPost` | | `get` | `Post` | |
105-
| `getPostData` | | `get` | `Post` | `Data` |
106-
| `handleClickOutside` | | `handle` | `Click` | `Outside` |
107-
| `shouldDisplayMessage` | `should` | `Display` | `Message`| |
105+
| Name | Prefix | Action (A) | High context (HC) | Low context (LC) |
106+
| ---------------------- | -------- | ---------- | ----------------- | ---------------- |
107+
| `getPost` | | `get` | `Post` | |
108+
| `getPostData` | | `get` | `Post` | `Data` |
109+
| `handleClickOutside` | | `handle` | `Click` | `Outside` |
110+
| `shouldDisplayMessage` | `should` | `Display` | `Message` | |
108111

109-
> **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**.
111114
112115
---
113116

114117
## Actions
115118

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_.
117120

118121
### `get`
119122

120123
Accesses data immediately (i.e. shorthand getter of internal data).
124+
121125
```js
122126
function getFruitsCount() {
123-
return this.fruits.length;
127+
return this.fruits.length
124128
}
125129
```
126130

@@ -162,6 +166,7 @@ console.log(fruits) // 5
162166
### `fetch`
163167

164168
Requests for a data, which takes time (i.e. async request).
169+
165170
```js
166171
function fetchPosts(postCount) {
167172
return fetch('https://api.dev/posts', {...})
@@ -170,13 +175,13 @@ function fetchPosts(postCount) {
170175

171176
### `remove`
172177

173-
Removes something *from* somewhere.
178+
Removes something _from_ somewhere.
174179

175180
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):
176181

177182
```js
178183
function removeFilter(filterName, filters) {
179-
return filters.filter(name => name !== filterName)
184+
return filters.filter((name) => name !== filterName)
180185
}
181186

182187
const selectedFilters = ['price', 'availability', 'size']
@@ -193,15 +198,15 @@ Imagine you are a content editor, and there is that notorious post you wish to g
193198

194199
```js
195200
function deletePost(id) {
196-
return database.find({ id }).delete()
201+
return database.find({ id }).delete()
197202
}
198203
```
199204

200205
> See also [remove](#remove).
201206
202207
### `compose`
203208

204-
Creates a new data from the existing one. Mostly applicable to strings, objects, or functions.
209+
Creates new data from the existing one. Mostly applicable to strings, objects, or functions.
205210

206211
```js
207212
function composePageUrl(pageName, pageId) {
@@ -229,7 +234,7 @@ link.addEventListener('click', handleLinkClick)
229234

230235
A domain that a function operates on.
231236

232-
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.
233238

234239
```js
235240
/* A pure function operating with primitives */
@@ -243,7 +248,7 @@ function getRecentPosts(posts) {
243248
}
244249
```
245250

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.
247252
248253
---
249254

@@ -257,7 +262,7 @@ Describes a characteristic or state of the current context (usually `boolean`).
257262

258263
```js
259264
const color = 'blue'
260-
const isBlue = (color === 'blue') // characteristic
265+
const isBlue = color === 'blue' // characteristic
261266
const isPresent = true // state
262267

263268
if (isBlue && isPresent) {
@@ -271,11 +276,11 @@ Describes whether the current context possesses a certain value or state (usuall
271276

272277
```js
273278
/* Bad */
274-
const isProductsExist = (productsCount > 0)
275-
const areProductsPresent = (productsCount > 0)
279+
const isProductsExist = productsCount > 0
280+
const areProductsPresent = productsCount > 0
276281

277282
/* Good */
278-
const hasProducts = (productsCount > 0)
283+
const hasProducts = productsCount > 0
279284
```
280285

281286
### `should`
@@ -284,11 +289,12 @@ Reflects a positive conditional statement (usually `boolean`) coupled with a cer
284289

285290
```js
286291
function shouldUpdateUrl(url, expectedUrl) {
287-
return (url !== expectedUrl)
292+
return url !== expectedUrl
288293
}
289294
```
290295

291296
### `min`/`max`
297+
292298
Represent minimum or maximum value. Used when describing boundaries or limits.
293299

294300
```js
@@ -308,7 +314,7 @@ Indicate the previous or the next state of a variable in the current context. Us
308314
```jsx
309315
function fetchPosts() {
310316
const prevPosts = this.state.posts
311-
317+
312318
const fetchedPosts = fetch('...')
313319
const nextPosts = concat(prevPosts, fetchedPosts)
314320

@@ -320,14 +326,12 @@ function fetchPosts() {
320326

321327
Like a prefix, variable names can be made singular or plural depending on whether they hold a single value or multiple values.
322328

323-
324329
```js
325330
/* Bad */
326-
const friends = 'Bob';
327-
const friend = ['Bob', 'Tony', 'Tanya'];
331+
const friends = 'Bob'
332+
const friend = ['Bob', 'Tony', 'Tanya']
328333

329334
/* Good */
330-
const friend = 'Bob';
331-
const friends = ['Bob', 'Tony', 'Tanya'];
335+
const friend = 'Bob'
336+
const friends = ['Bob', 'Tony', 'Tanya']
332337
```
333-

0 commit comments

Comments
 (0)