Skip to content

Commit c14f447

Browse files
committed
fixes
1 parent a23882d commit c14f447

File tree

1 file changed

+40
-22
lines changed

1 file changed

+40
-22
lines changed

‎1-js/03-code-quality/02-coding-style/article.md

+40-22
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
Our code must be as clean and easy to read as possible.
44

5-
That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable.
5+
That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable. A good code style greatly assists in that.
66

77
## Syntax
88

9-
Here is a cheatsheet with some suggested rules (see below for more details):
9+
Here is a cheat sheet with some suggested rules (see below for more details):
1010

1111
![](code-style.png)
1212
<!--
@@ -36,7 +36,7 @@ if (n < 0) {
3636

3737
Now let's discuss the rules and reasons for them in detail.
3838

39-
```warn header="Irony Detected"
39+
```warn header="There are no \"you must\" rules"
4040
Nothing is set in stone here. These are style preferences, not religious dogmas.
4141
```
4242

@@ -52,7 +52,7 @@ if (condition) {
5252
}
5353
```
5454

55-
A single-line construct is an important edge case. Should we use brackets at all? If yes, then where?
55+
A single-line construct, such as `if (condition) doSomething()`, is an important edge case. Should we use braces at all?
5656

5757
Here are the annotated variants so you can judge their readability for yourself:
5858

@@ -72,13 +72,31 @@ if (n < 0) {
7272
-->
7373
![](figure-bracket-style.png)
7474

75-
In summary:
76-
- For very short code, one line is acceptable. For example: `if (cond) return null`.
77-
- But a separate line for each statement in brackets is usually easier to read.
78-
7975
### Line Length
8076

81-
No one likes to read a long horizontal line of code. It's best practice to split them up and limit the length of your lines.
77+
No one likes to read a long horizontal line of code. It's best practice to split them.
78+
79+
For example:
80+
```js
81+
// backtick quotes ` allow to split the string into multiple lines
82+
let str = `
83+
Ecma International's TC39 is a group of JavaScript developers,
84+
implementers, academics, and more, collaborating with the community
85+
to maintain and evolve the definition of JavaScript.
86+
`;
87+
```
88+
89+
And, for `if` statements:
90+
91+
```js
92+
if (
93+
id === 123 &&
94+
moonPhase === 'Waning Gibbous' &&
95+
zodiacSign === 'Libra'
96+
) {
97+
letTheSorceryBegin();
98+
}
99+
```
82100

83101
The maximum line length should be agreed upon at the team-level. It's usually 80 or 120 characters.
84102

@@ -127,15 +145,15 @@ There are two types of indents:
127145

128146
A semicolon should be present after each statement, even if it could possibly be skipped.
129147

130-
There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors.
148+
There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors. See more about that in the chapter <info:structure#semicolon>.
131149

132-
As you become more mature as a programmer, you may choose a no-semicolon style like [StandardJS](https://standardjs.com/). Until then, it's best to use semicolons to avoid possible pitfalls.
150+
If you're an experienced JavaScript programmer, you may choose a no-semicolon code style like [StandardJS](https://standardjs.com/). Otherwise, it's best to use semicolons to avoid possible pitfalls. The majority of developers put semicolons.
133151

134152
### Nesting Levels
135153

136154
Try to avoid nesting code too many levels deep.
137155

138-
Sometimes it's a good idea to use the ["continue"](info:while-for#continue) directive in a loop to avoid extra nesting.
156+
For example, in the loop, it's sometimes a good idea to use the ["continue"](info:while-for#continue) directive to avoid extra nesting.
139157
140158
For example, instead of adding a nested `if` conditional like this:
141159
@@ -197,13 +215,13 @@ function pow(x, n) {
197215
}
198216
```
199217
200-
The second one is more readable because the "edge case" of `n < 0` is handled early on. Once the check is done we can move on to the "main" code flow without the need for additional nesting.
218+
The second one is more readable because the "special case" of `n < 0` is handled early on. Once the check is done we can move on to the "main" code flow without the need for additional nesting.
201219
202220
## Function Placement
203221
204222
If you are writing several "helper" functions and the code that uses them, there are three ways to organize the functions.
205223
206-
1. Functions declared above the code that uses them:
224+
1. Declare the functions *above* the code that uses them:
207225
208226
```js
209227
// *!*function declarations*/!*
@@ -249,15 +267,15 @@ If you are writing several "helper" functions and the code that uses them, there
249267

250268
Most of time, the second variant is preferred.
251269

252-
That's because when reading code, we first want to know *what it does*. If the code goes first, then it provides that information. Then, maybe we won't need to read the functions at all, especially if their names are descriptive of what they actually do.
270+
That's because when reading code, we first want to know *what it does*. If the code goes first, then it becomes clear from the start. Then, maybe we won't need to read the functions at all, especially if their names are descriptive of what they actually do.
253271

254272
## Style Guides
255273

256274
A style guide contains general rules about "how to write" code, e.g. which quotes to use, how many spaces to indent, where to put line breaks, etc. A lot of minor things.
257275

258276
When all members of a team use the same style guide, the code looks uniform, regardless of which team member wrote it.
259277

260-
Of course, a team can always write their own style guide. Most of the time though, there's no need to. There are many existing tried and true options to choose from, so adopting one of these is usually your best bet.
278+
Of course, a team can always write their own style guide, but usually there's no need to. There are many existing guides to choose from.
261279
262280
Some popular choices:
263281
@@ -267,15 +285,15 @@ Some popular choices:
267285
- [StandardJS](https://standardjs.com/)
268286
- (plus many more)
269287
270-
If you're a novice developer, start with the cheatsheet at the beginning of this chapter. Once you've mastered that you can browse other style guides to pick up common principles and decide which one you like best.
288+
If you're a novice developer, start with the cheat sheet at the beginning of this chapter. Then you can browse other style guides to pick up more ideas and decide which one you like best.
271289

272290
## Automated Linters
273291

274-
Linters are tools that can automatically check the style of your code and make suggestions for refactoring.
292+
Linters are tools that can automatically check the style of your code and make improving suggestions.
275293

276-
The great thing about them is that style-checking can also find some bugs, like typos in variable or function names. Because of this feature, installing a linter is recommended even if you don't want to stick to one particular "code style".
294+
The great thing about them is that style-checking can also find some bugs, like typos in variable or function names. Because of this feature, using a linter is recommended even if you don't want to stick to one particular "code style".
277295

278-
Here are the most well-known linting tools:
296+
Here are some well-known linting tools:
279297

280298
- [JSLint](http://www.jslint.com/) -- one of the first linters.
281299
- [JSHint](http://www.jshint.com/) -- more settings than JSLint.
@@ -317,8 +335,8 @@ Also certain IDEs have built-in linting, which is convenient but not as customiz
317335
318336
## Summary
319337
320-
All syntax rules described in this chapter (and in the style guides referenced) aim to increase the readability of your code, but all of them are debatable.
338+
All syntax rules described in this chapter (and in the style guides referenced) aim to increase the readability of your code. All of them are debatable.
321339
322-
When we think about writing "better" code, the questions we should ask are, "What makes the code more readable and easier to understand?" and "What can help us avoid errors?" These are the main things to keep in mind when choosing and debating code styles.
340+
When we think about writing "better" code, the questions we should ask ourselves are: "What makes the code more readable and easier to understand?" and "What can help us avoid errors?" These are the main things to keep in mind when choosing and debating code styles.
323341
324342
Reading popular style guides will allow you to keep up to date with the latest ideas about code style trends and best practices.

0 commit comments

Comments
 (0)