diff --git a/1-js/02-first-steps/07-operators/article.md b/1-js/02-first-steps/07-operators/article.md index 6a2121fb..4f2b70a8 100644 --- a/1-js/02-first-steps/07-operators/article.md +++ b/1-js/02-first-steps/07-operators/article.md @@ -1,15 +1,15 @@ # Operators -Many operators are known to us from school. They are addition `+`, a multiplication `*`, a subtraction `-` and so on. +We know many operators from school. They are things like addition `+`, multiplication `*`, subtraction `-`, and so on. -In this chapter we concentrate on aspects that are not covered by school arithmetic. +In this chapter, we'll concentrate on aspects of operators that are not covered by school arithmetic. ## Terms: "unary", "binary", "operand" -Before we move on, let's grasp the common terminology. +Before we move on, let's grasp some 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 operator is *unary* if it has a single operand. For example, the unary negation `-` reverses the sign of the number: +- *An operand* -- is what operators are applied to. For instance, in the multiplication of `5 * 2` there are two operands: the left operand is `5` and the right operand is `2`. Sometimes, people call these "arguments" instead of "operands". +- An operator is *unary* if it has a single operand. For example, the unary negation `-` reverses the sign of a number: ```js run let x = 1; @@ -19,29 +19,29 @@ Before we move on, let's grasp the common terminology. */!* 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 binary form as well: ```js run no-beautify let x = 1, y = 3; alert( y - x ); // 2, binary minus subtracts values ``` - Formally, we're talking about two different operators here: the unary negation (single operand, reverses the sign) and the binary subtraction (two operands, subtracts). + Formally, we're talking about two different operators here: the unary negation (single operand: reverses the sign) and the binary subtraction (two operands: subtracts). -## Strings concatenation, binary + +## String concatenation, binary + -Now let's see special features of JavaScript operators that are beyond school arithmetics. +Now, let's see special features of JavaScript operators that are beyond school arithmetics. -Usually the plus operator `+` sums numbers. +Usually, the plus operator `+` sums numbers. -But if the binary `+` is applied to strings, it merges (concatenates) them: +But, if the binary `+` is applied to strings, it merges (concatenates) them: ```js let s = "my" + "string"; alert(s); // mystring ``` -Note that if any of the operands is a string, then the other one is converted to a string too. +Note that if one of the operands is a string, the other one is converted to a string too. For example: @@ -50,7 +50,7 @@ alert( '1' + 2 ); // "12" alert( 2 + '1' ); // "21" ``` -See, it doesn't matter whether the first operand is a string or the second one. The rule is simple: if either operand is a string, then convert the other one into a string as well. +See, it doesn't matter whether the first operand is a string or the second one. The rule is simple: if either operand is a string, the other one is converted into a string as well. However, note that operations run from left to right. If there are two numbers followed by a string, the numbers will be added before being converted to a string: @@ -59,7 +59,7 @@ However, note that operations run from left to right. If there are two numbers f alert(2 + 2 + '1' ); // "41" and not "221" ``` -String concatenation and conversion is a special feature of the binary plus `+`. Other arithmetic operators work only with numbers. They always convert their operands to numbers. +String concatenation and conversion is a special feature of the binary plus `+`. Other arithmetic operators work only with numbers and always convert their operands to numbers. For instance, subtraction and division: @@ -70,9 +70,9 @@ alert( '6' / '2' ); // 3 ## Numeric conversion, unary + -The plus `+` exists in two forms. The binary form that we used above and the unary form. +The plus `+` exists in two forms: the binary form that we used above and the unary form. -The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything with numbers, but if the operand is not a number, then it is converted into it. +The unary plus or, in other words, the plus operator `+` applied to a single value, doesn't do anything to numbers. But if the operand is not a number, the unary plus converts it into a number. For example: @@ -91,9 +91,9 @@ alert( +"" ); // 0 */!* ``` -It actually does the same as `Number(...)`, but is shorter. +It actually does the same thing as `Number(...)`, but is shorter. -A need to convert strings to numbers arises very often. For example, if we are getting values from HTML form fields, then they are usually strings. +The need to convert strings to numbers arises very often. For example, if we are getting values from HTML form fields, they are usually strings. What if we want to sum them? @@ -106,7 +106,7 @@ let oranges = "3"; alert( apples + oranges ); // "23", the binary plus concatenates strings ``` -If we want to treat them as numbers, then we can convert and then sum: +If we want to treat them as numbers, we need to convert and then sum them: ```js run let apples = "2"; @@ -121,21 +121,21 @@ alert( +apples + +oranges ); // 5 // alert( Number(apples) + Number(oranges) ); // 5 ``` -From a mathematician's standpoint the abundance of pluses may seem strange. But from a programmer's standpoint, there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up. +From a mathematician's standpoint, the abundance of pluses may seem strange. But from a programmer's standpoint, there's nothing special: unary pluses are applied first, they convert strings to numbers, and then the binary plus sums them up. -Why are unary pluses applied to values before the binary one? As we're going to see, that's because of their *higher precedence*. +Why are unary pluses applied to values before the binary ones? As we're going to see, that's because of their *higher precedence*. -## Operators precedence +## Operator precedence -If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, there's an implicit priority order among the operators. +If an expression has more than one operator, the execution order is defined by their *precedence*, or, in other words, the implicit priority order of operators. -From school we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition. +From school, we all know that the multiplication in the expression `1 + 2 * 2` should be calculated before the addition. That's exactly the precedence thing. The multiplication is said to have *a higher precedence* than the addition. -Parentheses override any precedence, so if we're not satisfied with the order, we can use them, like: `(1 + 2) * 2`. +Parentheses override any precedence, so if we're not satisfied with the implicit order, we can use them to change it. For example: `(1 + 2) * 2`. -There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the bigger number executes first. If the precedence is the same, the execution order is from left to right. +There are many operators in JavaScript. Every operator has a corresponding precedence number. The one with the larger number executes first. If the precedence is the same, the execution order is from left to right. -An extract from the [precedence table](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): +Here's an extract from the [precedence table](https://developer.mozilla.org/en/JavaScript/Reference/operators/operator_precedence) (you don't need to remember this, but note that unary operators are higher than corresponding binary ones): | Precedence | Name | Sign | |------------|------|------| @@ -150,13 +150,13 @@ An extract from the [precedence table](https://developer.mozilla.org/en/JavaScri | 3 | assignment | `=` | | ... | ... | ... | -As we can see, the "unary plus" has a priority of `16`, which is higher than `13` for the "addition" (binary plus). That's why in the expression `"+apples + +oranges"` unary pluses work first, and then the addition. +As we can see, the "unary plus" has a priority of `16` which is higher than the `13` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition. ## Assignment Let's note that an assignment `=` is also an operator. It is listed in the precedence table with the very low priority of `3`. -That's why when we assign a variable, like `x = 2 * 2 + 1`, then the calculations are done first, and afterwards the `=` is evaluated, storing the result in `x`. +That's why, when we assign a variable, like `x = 2 * 2 + 1`, the calculations are done first and then the `=` is evaluated, storing the result in `x`. ```js let x = 2 * 2 + 1; @@ -178,14 +178,14 @@ alert( b ); // 4 alert( c ); // 4 ``` -Chained assignments evaluate from right to left. First the rightmost expression `2 + 2` is evaluated then assigned to the variables on the left: `c`, `b` and `a`. At the end, all variables share a single value. +Chained assignments evaluate from right to left. First, the rightmost expression `2 + 2` is evaluated and then assigned to the variables on the left: `c`, `b` and `a`. At the end, all the variables share a single value. ````smart header="The assignment operator `\"=\"` returns a value" -An operator always returns a value. That's obvious for most of them like an addition `+` or a multiplication `*`. But the assignment operator follows that rule too. +An operator always returns a value. That's obvious for most of them like addition `+` or multiplication `*`. But the assignment operator follows this rule too. The call `x = value` writes the `value` into `x` *and then returns it*. -Here's the demo that uses an assignment as part of a more complex expression: +Here's a demo that uses an assignment as part of a more complex expression: ```js run let a = 1; @@ -201,12 +201,12 @@ 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 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 see it in 3rd-party libraries, but shouldn't write anything like that ourselves. Such tricks definitely don't make code clearer or readable. ```` ## Remainder % -The remainder operator `%` despite its look does not have a relation to percents. +The remainder operator `%`, despite its appearance, is not related to percents. The result of `a % b` is the remainder of the integer division of `a` by `b`. @@ -232,7 +232,9 @@ alert( 2 ** 3 ); // 8 (2 * 2 * 2) alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2) ``` -The operator works for non-integer numbers of `a` and `b` as well, for instance: +The operator works for non-integer numbers of `a` and `b` as well. + +For instance: ```js run alert( 4 ** (1/2) ); // 2 (power of 1/2 is the same as a square root, that's maths) @@ -245,7 +247,7 @@ alert( 8 ** (1/3) ); // 2 (power of 1/3 is the same as a cubic root) Increasing or decreasing a number by one is among the most common numerical operations. -So, there are special operators for that: +So, there are special operators for it: - **Increment** `++` increases a variable by 1: @@ -263,21 +265,21 @@ So, there are special operators for that: ``` ```warn -Increment/decrement can be applied only to a variable. An attempt to use it on a value like `5++` will give an error. +Increment/decrement can only be applied to variables. Trying to use it on a value like `5++` will give an error. ``` -Operators `++` and `--` can be placed both after and before the variable. +The operators `++` and `--` can be placed either before or after a variable. -- When the operator goes after the variable, it is called a "postfix form": `counter++`. -- The "prefix form" is when the operator stands before the variable: `++counter`. +- When the operator goes after the variable, it is in "postfix form": `counter++`. +- The "prefix form" is when the operator goes before the variable: `++counter`. -Both of these records do the same: increase `counter` by `1`. +Both of these statements do the same thing: increase `counter` by `1`. Is there any difference? Yes, but we can only see it if we use the returned value of `++/--`. -Let's clarify. As we know, all operators return a value. Increment/decrement is not an exception here. The prefix form returns the new value, while the postfix form returns the old value (prior to increment/decrement). +Let's clarify. As we know, all operators return a value. Increment/decrement is no exception. The prefix form returns the new value while the postfix form returns the old value (prior to increment/decrement). -To see the difference, here's the example: +To see the difference, here's an example: ```js run let counter = 1; @@ -286,9 +288,9 @@ let a = ++counter; // (*) alert(a); // *!*2*/!* ``` -Here in the line `(*)` the prefix call `++counter` increments `counter` and returns the new value that is `2`. So the `alert` shows `2`. +In the line `(*)`, the *prefix* form `++counter` increments `counter` and returns the new value, `2`. So, the `alert` shows `2`. -Now let's use the postfix form: +Now, let's use the postfix form: ```js run let counter = 1; @@ -297,11 +299,11 @@ let a = counter++; // (*) changed ++counter to counter++ alert(a); // *!*1*/!* ``` -In the line `(*)` the *postfix* form `counter++` also increments `counter`, but returns the *old* value (prior to increment). So the `alert` shows `1`. +In the line `(*)`, the *postfix* form `counter++` also increments `counter` but returns the *old* value (prior to increment). So, the `alert` shows `1`. To summarize: -- If the result of increment/decrement is not used, then there is no difference in which form to use: +- If the result of increment/decrement is not used, there is no difference in which form to use: ```js run let counter = 0; @@ -309,13 +311,13 @@ To summarize: ++counter; alert( counter ); // 2, the lines above did the same ``` -- If we'd like to increase the value *and* use the result of the operator right now, then we need the prefix form: +- If we'd like to increase a value *and* immediately use the result of the operator, we need the prefix form: ```js run let counter = 0; alert( ++counter ); // 1 ``` -- If we'd like to increment, but use the previous value, then we need the postfix form: +- If we'd like to increment a value but use its previous value, we need the postfix form: ```js run let counter = 0; @@ -323,7 +325,7 @@ To summarize: ``` ````smart header="Increment/decrement among other operators" -Operators `++/--` can be used inside an expression as well. Their precedence is higher than most other arithmetical operations. +The operators `++/--` can be used inside expressions as well. Their precedence is higher than most other arithmetical operations. For instance: @@ -339,11 +341,11 @@ let counter = 1; alert( 2 * counter++ ); // 2, because counter++ returns the "old" value ``` -Though technically allowable, such notation usually makes the code less readable. One line does multiple things -- not good. +Though technically okay, such notation usually makes code less readable. One line does multiple things -- not good. -While reading the code, a fast "vertical" eye-scan can easily miss such `counter++`, and it won't be obvious that the variable increases. +While reading code, a fast "vertical" eye-scan can easily miss something like `counter++` and it won't be obvious that the variable increased. -The "one line -- one action" style is advised: +We advise a style of "one line -- one action": ```js run let counter = 1; @@ -368,11 +370,11 @@ The list of operators: - RIGHT SHIFT ( `>>` ) - ZERO-FILL RIGHT SHIFT ( `>>>` ) -These operators are used very rarely. To understand them, we should delve into low-level number representation, and it would not be optimal to do that right now. Especially because we won't need them any time soon. If you're curious, you can read the [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) article in MDN. It would be more practical to do that when a real need arises. +These operators are used very rarely. To understand them, we need to delve into low-level number representation and it would not be optimal to do that right now, especially since we won't need them any time soon. If you're curious, you can read the [Bitwise Operators](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators) article on MDN. It would be more practical to do that when a real need arises. ## Modify-in-place -We often need to apply an operator to a variable and store the new result in it. +We often need to apply an operator to a variable and store the new result in that same variable. For example: @@ -382,7 +384,7 @@ n = n + 5; n = n * 2; ``` -This notation can be shortened using operators `+=` and `*=`: +This notation can be shortened using the operators `+=` and `*=`: ```js run let n = 2; @@ -392,7 +394,7 @@ n *= 2; // now n = 14 (same as n = n * 2) alert( n ); // 14 ``` -Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=` etc. +Short "modify-and-assign" operators exist for all arithmetical and bitwise operators: `/=`, `-=`, etc. Such operators have the same precedence as a normal assignment, so they run after most other calculations: @@ -406,9 +408,9 @@ alert( n ); // 16 (right part evaluated first, same as n *= 8) ## Comma -The comma operator `,` is one of most rare and unusual operators. Sometimes it's used to write shorter code, so we need to know it in order to understand what's going on. +The comma operator `,` is one of the rarest and most unusual operators. Sometimes, it's used to write shorter code, so we need to know it in order to understand what's going on. -The comma operator allows us to evaluate several expressions, dividing them with a comma `,`. Each of them is evaluated, but the result of only the last one is returned. +The comma operator allows us to evaluate several expressions, dividing them with a comma `,`. Each of them is evaluated but only the result of the last one is returned. For example: @@ -420,17 +422,17 @@ let a = (1 + 2, 3 + 4); alert( a ); // 7 (the result of 3 + 4) ``` -Here, the first expression `1 + 2` is evaluated, and its result is thrown away, then `3 + 4` is evaluated and returned as the result. +Here, the first expression `1 + 2` is evaluated and its result is thrown away. Then, `3 + 4` is evaluated and returned as the result. ```smart header="Comma has a very low precedence" Please note that the comma operator has very low precedence, lower than `=`, so parentheses are important in the example above. -Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and then the number after the comma `7` is not processed anyhow, so it's ignored. +Without them: `a = 1 + 2, 3 + 4` evaluates `+` first, summing the numbers into `a = 3, 7`, then the assignment operator `=` assigns `a = 3`, and finally the number after the comma, `7`, is not processed so it's ignored. ``` -Why do we need such an operator which throws away everything except the last part? +Why do we need an operator that throws away everything except the last part? -Sometimes people use it in more complex constructs to put several actions in one line. +Sometimes, people use it in more complex constructs to put several actions in one line. For example: @@ -441,4 +443,4 @@ for (*!*a = 1, b = 3, c = a * b*/!*; a < 10; a++) { } ``` -Such tricks are used in many JavaScript frameworks, that's why we mention them. But usually they don't improve the code readability, so we should think well before writing like that. +Such tricks are used in many JavaScript frameworks. That's why we're mentioning them. But, usually, they don't improve code readability so we should think well before using them.