minor
This commit is contained in:
parent
7895f3d3ae
commit
edfb8248f1
3 changed files with 30 additions and 19 deletions
|
@ -1,6 +1,6 @@
|
||||||
# Operators
|
# Operators
|
||||||
|
|
||||||
Many operators are known to us from school. It is an addition `+`, a multiplication `*`, a substraction `-` and so on.
|
Many operators are known to us from school. It is an addition `+`, a multiplication `*`, a subtraction `-` and so on.
|
||||||
|
|
||||||
In this chapter we concentrate on aspects that are not covered by the school arithmetic.
|
In this chapter we concentrate on aspects that are not covered by the school arithmetic.
|
||||||
|
|
||||||
|
@ -11,7 +11,7 @@ In this chapter we concentrate on aspects that are not covered by the school ari
|
||||||
Before we move on, let's grasp the common terminology.
|
Before we move on, let's grasp the common terminology.
|
||||||
|
|
||||||
- *An operand* -- is what operators are applied to. For instance in multiplication `5 * 2` there are two operands: the left operand is `5`, and the right operand is `2`. Sometimes people say "arguments" instead of "operands".
|
- *An operand* -- is what operators are applied to. For instance in multiplication `5 * 2` there are two operands: the left operand is `5`, and the right operand is `2`. Sometimes people say "arguments" instead of "operands".
|
||||||
- An operator is *unary* if it has a single operand. For example, the unary minus `"-"` reverses the sign of the number:
|
- An operator is *unary* if it has a single operand. For example, the unary negation `"-"` reverses the sign of the number:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let x = 1;
|
let x = 1;
|
||||||
|
@ -19,16 +19,16 @@ Before we move on, let's grasp the common terminology.
|
||||||
*!*
|
*!*
|
||||||
x = -x;
|
x = -x;
|
||||||
*/!*
|
*/!*
|
||||||
alert( x ); // -1, unary minus was applied
|
alert( x ); // -1, unary negation was applied
|
||||||
```
|
```
|
||||||
- An operator is *binary* if it has two operands. The same minus exists in the binary form as well:
|
- An operator is *binary* if it has two operands. The same minus exists in the binary form as well:
|
||||||
|
|
||||||
```js run no-beautify
|
```js run no-beautify
|
||||||
let x = 1, y = 3;
|
let x = 1, y = 3;
|
||||||
alert( y - x ); // 2, binary minus substracts values
|
alert( y - x ); // 2, binary minus subtracts values
|
||||||
```
|
```
|
||||||
|
|
||||||
Formally, we're talking about the two different operators here: the unary minus (single operand, reverses the sign) and the binary minus (two operands, substracts).
|
Formally, we're talking about the two different operators here: the unary negation (single operand, reverses the sign) and the binary subtraction (two operands, subtracts).
|
||||||
|
|
||||||
## Strings concatenation, binary +
|
## Strings concatenation, binary +
|
||||||
|
|
||||||
|
@ -135,11 +135,11 @@ An extract from the [precedence table](https://developer.mozilla.org/en/JavaScri
|
||||||
| Precedence | Name | Sign |
|
| Precedence | Name | Sign |
|
||||||
|------------|------|------|
|
|------------|------|------|
|
||||||
| ... | ... | ... |
|
| ... | ... | ... |
|
||||||
| 15 | unary plus | `+` |
|
| 16 | unary plus | `+` |
|
||||||
| 15 | unary minus | `-` |
|
| 16 | unary negation | `-` |
|
||||||
| 14 | multiplication | `*` |
|
| 14 | multiplication | `*` |
|
||||||
| 14 | division | `/` |
|
| 14 | division | `/` |
|
||||||
| 13 | addition (binary) | `+` |
|
| 13 | addition | `+` |
|
||||||
| 13 | subtraction | `-` |
|
| 13 | subtraction | `-` |
|
||||||
| ... | ... | ... |
|
| ... | ... | ... |
|
||||||
| 3 | assignment | `=` |
|
| 3 | assignment | `=` |
|
||||||
|
@ -194,7 +194,7 @@ alert( a ); // 3
|
||||||
alert( c ); // 0
|
alert( c ); // 0
|
||||||
```
|
```
|
||||||
|
|
||||||
In the example above, the result of `(a = b + 1)` is the value which is assigned to `a` (that is `3`). It is then used to substract from `3`.
|
In the example above, the result of `(a = b + 1)` is the value which is assigned to `a` (that is `3`). It is then used to subtract from `3`.
|
||||||
|
|
||||||
Funny code, isn't it? We should understand how it works, because sometimes we can see it in 3rd-party libraries, but shouldn't write anything like that ourselves. Such tricks definitely don't make the code clearer and readable.
|
Funny code, isn't it? We should understand how it works, because sometimes we can see it in 3rd-party libraries, but shouldn't write anything like that ourselves. Such tricks definitely don't make the code clearer and readable.
|
||||||
````
|
````
|
||||||
|
|
|
@ -46,7 +46,17 @@ Nothing is "carved in stone" here. Everything is optional and can be changed: th
|
||||||
|
|
||||||
In most JavaScript projects figure brackets are written on the same line, not on the new line. A so-called "egyptian" style. There's also a space before an opening bracket.
|
In most JavaScript projects figure brackets are written on the same line, not on the new line. A so-called "egyptian" style. There's also a space before an opening bracket.
|
||||||
|
|
||||||
An edge case is a single-line `if/for`. Should we use brackets at all? If yes, then where?
|
Like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
if (condition) {
|
||||||
|
// do this
|
||||||
|
// ...and that
|
||||||
|
// ...and that
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
A single-line construct is an important edge case. Should we use brackets at all? If yes, then where?
|
||||||
|
|
||||||
Here are the annotated variants, so you can judge about their readability on your own:
|
Here are the annotated variants, so you can judge about their readability on your own:
|
||||||
|
|
||||||
|
@ -82,9 +92,9 @@ There are two types of indents:
|
||||||
|
|
||||||
- **A horizontal indent: 2(4) spaces.**
|
- **A horizontal indent: 2(4) spaces.**
|
||||||
|
|
||||||
A horizantal identation is made using either 2 or 4 spaces or the "Tab" symbol. Which one to choose is a kind of an old holy war. Spaces are more common nowadays.
|
A horizantal identation is made using either 2 or 4 spaces or the "Tab" symbol. Which one to choose is an old holy war. Spaces are more common nowadays.
|
||||||
|
|
||||||
One of advantages of spaces over tabs is that they allow more flexible configurations of indents than the "Tab" symbol.
|
One of advantages of spaces over tabs is that spaces allow more flexible configurations of indents than the "Tab" symbol.
|
||||||
|
|
||||||
For instance, we can align the arguments with the opening bracket, like this:
|
For instance, we can align the arguments with the opening bracket, like this:
|
||||||
|
|
||||||
|
@ -99,7 +109,7 @@ There are two types of indents:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- **A vertical indent: empty lines for splitting the code in logical blocks.**
|
- **A vertical indent: empty lines for splitting code into logical blocks.**
|
||||||
|
|
||||||
Even a single function can often be divided in logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically:
|
Even a single function can often be divided in logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically:
|
||||||
|
|
||||||
|
@ -121,9 +131,9 @@ There are two types of indents:
|
||||||
|
|
||||||
A semicolon should be present after each statement. Even if it could be possibly be skipped.
|
A semicolon should be present after each statement. Even if it could be possibly be skipped.
|
||||||
|
|
||||||
There are languages where a semicolon is truly optional. It's rarely used there.
|
There are languages where a semicolon is truly optional. It's rarely used there. But in JavaScript there are few cases when a line break is sometimes not interpreted as a semicolon. That leaves a place for programming errors.
|
||||||
|
|
||||||
But in JavaScript there are few cases when a line break is sometimes not interpreted as a semicolon. That leaves a place for programming errors, so semicolons should be at place.
|
As you become more mature as a programmer, you may choose a no-semicolon style, like [StandardJS](https://standardjs.com/), but that's only when you know JavaScript well and understand possible pitfalls.
|
||||||
|
|
||||||
### Nesting levels
|
### Nesting levels
|
||||||
|
|
||||||
|
@ -240,7 +250,7 @@ If you are writing several "helper" functions and the code to use them, then the
|
||||||
...
|
...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
3. Mixed, a function is described where it's first used.
|
3. Mixed: a function is described where it's first used.
|
||||||
|
|
||||||
Most of time, the second variant is preferred.
|
Most of time, the second variant is preferred.
|
||||||
|
|
||||||
|
@ -259,6 +269,7 @@ For instance:
|
||||||
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
|
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
|
||||||
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
|
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
|
||||||
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
|
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
|
||||||
|
- [StandardJS](https://standardjs.com/)
|
||||||
- (there are more)
|
- (there are more)
|
||||||
|
|
||||||
If you're a novice developer, then you could start with the cheatsheet above in the chapter, and later browse the style guides to pick up the common principles and maybe choose one.
|
If you're a novice developer, then you could start with the cheatsheet above in the chapter, and later browse the style guides to pick up the common principles and maybe choose one.
|
||||||
|
@ -267,7 +278,7 @@ If you're a novice developer, then you could start with the cheatsheet above in
|
||||||
|
|
||||||
There are tools that can check the code style automatically. They are called "linters".
|
There are tools that can check the code style automatically. They are called "linters".
|
||||||
|
|
||||||
The great thing about them is that style-checking also finds some bugs, like a typo in variable name or a function.
|
The great thing about them is that style-checking also finds some bugs, like a typo in a variable or function name.
|
||||||
|
|
||||||
So it's recommended to install one, even if you don't want to stick to a "code style". They help to find typos -- and that's already good enough.
|
So it's recommended to install one, even if you don't want to stick to a "code style". They help to find typos -- and that's already good enough.
|
||||||
|
|
||||||
|
@ -314,7 +325,7 @@ Using a linter has the great side-effect. Linters catch typos. For instance, whe
|
||||||
|
|
||||||
For that reason even if you're not concerned about styles, using a linter is highly recommended.
|
For that reason even if you're not concerned about styles, using a linter is highly recommended.
|
||||||
|
|
||||||
Also certain IDEs support built-in linting, but not so tunable as ESLint.
|
Also certain IDEs support built-in linting, that also may be good, but not so tunable as ESLint.
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
|
|
|
@ -169,7 +169,7 @@ There are two official terms that look similar, but are very different. Please m
|
||||||
|
|
||||||
Naturally, these properties can combine. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`).
|
Naturally, these properties can combine. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`).
|
||||||
|
|
||||||
But an iterable may be not array-like and vice versa.
|
But an iterable may be not array-like. And vice versa an array-like may be not iterable.
|
||||||
|
|
||||||
For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`.
|
For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`.
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue