This commit is contained in:
Ilya Kantor 2017-07-03 21:56:36 +03:00
parent 7895f3d3ae
commit edfb8248f1
3 changed files with 30 additions and 19 deletions

View file

@ -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.
```` ````

View file

@ -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

View file

@ -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`.