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: 1-js/03-code-quality/03-comments/article.md
+39-10
Original file line number
Diff line number
Diff line change
@@ -1,14 +1,28 @@
1
1
# Comments
2
2
3
-
Comments are generally a good thing. But novices in programming generally get that wrong. They write comments explaining "what is going on in the code".
3
+
As we know from the chapter <info:structure>, comments can be single-line: starting with `//` and multiline: `/* ... */`.
4
4
5
-
But the amount of such "explanatory" comments should be minimal.
5
+
We normally use them to describe how and why the code works.
6
6
7
-
Seriously, good code should be easy to understand without them.
7
+
From the first sight, commenting might be obvious, but novices in programming usually get it wrong.
8
+
9
+
## Bad comments
10
+
11
+
Novices tend to use comments to explain "what is going on in the code". Like this:
12
+
13
+
```js
14
+
// This code will do this thing (...) and that thing (...)
15
+
// ...and who knows what else...
16
+
very;
17
+
complex;
18
+
code;
19
+
```
20
+
21
+
But in a good code the amount of such "explanatory" comments should be minimal. Seriously, a code should be easy to understand without them.
8
22
9
23
There's a great rule about that: "if the code is so unclear that it requires a comment, then maybe it should be rewritten instead".
10
24
11
-
[cut]
25
+
### Recipe: factor out functions
12
26
13
27
Sometimes it's beneficial to replace a code piece with a function, like here:
14
28
@@ -29,7 +43,7 @@ function showPrimes(n) {
29
43
}
30
44
```
31
45
32
-
The better variant:
46
+
The better variant, with a factored out function `isPrime`:
33
47
34
48
35
49
```js
@@ -50,7 +64,9 @@ function isPrime(n) {
50
64
}
51
65
```
52
66
53
-
Now we can understand the code easily without the comment. Such code is called *self-descriptive*.
67
+
Now we can understand the code easily. The function itself becomes the comment. Such code is called *self-descriptive*.
68
+
69
+
### Recipe: create functions
54
70
55
71
And if we have a long "code sheet" like this:
56
72
@@ -94,13 +110,13 @@ function addJuice(container) {
94
110
}
95
111
```
96
112
97
-
That's readable without comments. And also the code structure is better when split. It's clear what every function does, what it takes and what it returns.
113
+
Once again, functions themselves tell what's going on. There's nothing to comment. And also the code structure is better when split. It's clear what every function does, what it takes and what it returns.
98
114
99
115
In reality, we can't totally evade "explanatory" comments. There are complex algorithms. And there are smart "tweaks" for purposes of optimization. But generally we should try to keep the code simple and self-descriptive.
100
116
101
117
## Good comments
102
118
103
-
Which comments are good?
119
+
So, explanatory comments are usually bad. Which comments are good?
104
120
105
121
Describe the architecture
106
122
: Provide a high-level overview of components, how they interact, what's the control flow in various situations... In short -- the bird's eye view of the code. There's a special diagram language [UML](http://wikipedia.org/wiki/Unified_Modeling_Language) for high-level architecture diagrams. Definitely worth studying.
@@ -145,6 +161,19 @@ Any subtle features of the code? Where they are used?
145
161
146
162
## Summary
147
163
148
-
One sign of a good developer is his comments. Good comments allow us to maintain the code well, return to it after a long delay and use features more effectively.
164
+
An important sign of a good developer is comments: their presence and even their absense.
165
+
166
+
Good comments allow us to maintain the code well, come back to it after a delay and use it more effectively.
167
+
168
+
**Comment this:**
169
+
170
+
- Overall architecture, high-level view.
171
+
- Function usage.
172
+
- Important solutions, especially when not immediately obvious.
173
+
174
+
**Evade comments:**
175
+
176
+
- That tell "how code works" and "what it does".
177
+
- Put them only if it's impossible to make the code so simple and self-descriptive that it doesn't require those.
149
178
150
-
Comments are also used for auto-documenting tools: they read them and generate HTML-docs (or in another format).
179
+
Comments are also used for auto-documenting tools like JSDoc3: they read them and generate HTML-docs (or docs in another format).
0 commit comments