Arithmetic Operator

Operators are the basic method of processing data and are used to obtain new values ​​from existing values. JavaScript provides a variety of operators, covering all major operations.

Overview

JavaScript provides a total of 10 arithmetic operators to complete basic arithmetic operations.

-Addition operator: x + y -Subtraction operator: x-y -Multiplication Operator: x * y -Division Operator: x / y -Exponential Operator: x ** y -Remainder Operator: x% y -Increment operator: ++x or x++ -Decrement operator: --x or x-- -Numeric Operator: +x -Negative numeric operator: -x

The operations of subtraction, multiplication, and division are relatively simple, that is, the corresponding mathematical operations are performed. Here are a few other arithmetic operators, focusing on the addition operator.

addition operator

basic rules

The addition operator (+) is the most common operator used to sum two numbers.

1 + 1; // 2

JavaScript allows non-numerical addition.

true + true; // 2
1 + true; // 2

In the above code, the first line is the addition of two boolean values, and the second line is the addition of numeric values ​​and boolean values. In both cases, the Boolean value will be automatically converted to a numeric value, and then added.

The special thing is that if two strings are added together, the addition operator will become a concatenation operator, returning a new string and concatenating the two original strings together.

"a" + "bc"; // "abc"

If one operator is a string and the other is a non-string, then the non-string will be converted into a string and then concatenated together.

1 + "a"; // "1a"
false + "a"; // "falsea"

The addition operator decides at runtime whether to perform addition or concatenation. In other words, the difference in operators leads to different grammatical behaviors. This phenomenon is called "overload". Due to the overloading of the addition operator, two operations may be performed, so you must be careful when using it.

"3" + 4 + 5; // "345"
3 + 4 + "5"; // "75"

In the above code, due to the order of operations from left to right, the position of the string will lead to different results.

Except for the addition operator, other arithmetic operators (such as subtraction, division, and multiplication) will not be overloaded. Their rule is: all operators are converted to numeric values, and then the corresponding mathematical operations are performed.

1 - "2"; // -1
1 * "2"; // 2
1 / "2"; // 0.5

In the above code, the subtraction, division, and multiplication operators all automatically convert a string to a number, and then perform operations.

Addition of objects

If the operator is an object, it must first be converted to a value of the original type, and then added.

var obj = { p: 1 };
obj + 2; // "[object Object]2"

In the above code, the value of the object obj converted to the original type is [object Object], plus 2 to get the above result.

The rules for converting objects into primitive values ​​are as follows.

First, the object's valueOf method is automatically called.

var obj = { p: 1 };
obj.valueOf(); // {p: 1}

Generally speaking, the valueOf method of an object always returns the object itself, and then the toString method of the object is automatically called to convert it to a string.

var obj = { p: 1 };
obj.valueOf().toString(); // "[object Object]"

The object's toString method returns [object Object] by default, so the result of the previous example is obtained.

After knowing this rule, you can define the valueOf method or the toString method yourself to get the desired result.

var obj = {
  valueOf: function () {
    return 1;
  },
};

obj + 2; // 3

In the above code, we define the valueOf method of the obj object to return 1, so obj + 2 gets 3. In this example, because the valueOf method directly returns a primitive type value, the toString method is no longer called.

The following is an example of customizing the toString method.

var obj = {
  toString: function () {
    return "hello";
  },
};

obj + 2; // "hello2"

In the above code, the toString method of the object obj returns the string hello. As mentioned earlier, as long as one of the operators is a string, the addition operator becomes a concatenation operator, and the concatenated string is returned.

There is a special case, if the operator is an instance of a Date object, then the toString method will be executed first.

var obj = new Date();
obj.valueOf = function () {
  return 1;
};
obj.toString = function () {
  return "hello";
};

obj + 2; // "hello2"

In the above code, the object obj is an instance of the Date object, and the valueOf method and the toString method are customized. As a result, the toString method is executed first.

remainder operator

The remainder operator (%) returns the remainder obtained by dividing the previous operator by the next operator.

12 % 5; // 2

It should be noted that the sign of the operation result is determined by the sign of the first operator.

-1 % 2; // -1
1 % -2; // 1

Therefore, in order to get the correct remainder value of a negative number, you can first use the absolute value function.

// wrong way
function isOdd(n) {
  return n % 2 === 1;
}
isOdd(-5); // false
isOdd(-4); // false

// correct writing
function isOdd(n) {
  return Math.abs(n % 2) === 1;
}
isOdd(-5); // true
isOdd(-4); // false

The remainder operator can also be used for floating-point operations. However, since floating-point numbers are not precise values, completely accurate results cannot be obtained.

6.5 % 2.1;
// 0.19999999999999973

Increment and decrement operators

The increment and decrement operators are unary operators and only need one operator. Their function is to first convert the operator to a value, and then add or subtract 1 from it. They modify the original variables.

var x = 1;
++x; // 2
x; // 2

--x; // 1
x; // 1

After the variable x in the above code is incremented, it returns to 2, and then decrements again to return to 1. In both cases, the value of the original variable x will change.

After the operation, the value of the variable changes. This effect is called the side effect of the operation. The increment and decrement operators are the only two operators with side effects, and none of the other operators will change the value of the variable.

One thing that needs to be paid attention to in the increment and decrement operators is that when placed after the variable, the value before the variable operation will be returned first, and then the increment/decrement operation will be performed; if placed before the variable, the increment/self decrement will be performed first. Subtract operation, and then return the value after the variable operation.

var x = 1;
var y = 1;

x++; // 1
++y; // 2

In the above code, x returns the current value first, and then increments, so it gets 1; y increments first, then returns the new value, so it gets 2.

Numerical Operator, Negative Numerical Operator

The numeric operator (+) also uses the plus sign, but it is a unary operator (requiring only one operand), while the addition operator is a binary operator (requiring two operands).

The function of numerical operators is to convert any value to a number (the same function as the Number function).

+true + // 1
  [] + // 0
  {}; // NaN

The above code indicates that after the non-numerical value is passed through the numerical operator, it becomes a value (the last line of NaN is also a number). For specific type conversion rules, see the chapter "Data Type Conversion".

The negative numeric operator (-) also has the function of converting a value into a numeric value, but the obtained value is opposite in positive and negative. Using two negative numeric operators together is equivalent to a numeric operator.

var x = 1;
-x - // -1
  -x; // 1

The parentheses in the last line of the above code are indispensable, otherwise it will become a decrement operator.

Both the numeric operation symbol and the negative numeric operator return a new value without changing the value of the original variable.

Exponential operator

The exponent operator (**) completes exponential calculations, the former operator is the base, and the latter operator is the exponent.

2 ** 4; // 16

Note that the exponent operator is right associative, not left associative. That is, when multiple exponential operators are used together, the rightmost calculation is performed first.

// equivalent to 2 ** (3 ** 2)
2 ** (3 ** 2);
// 512

In the above code, since the exponent operator is right associative, the second exponent operator is calculated first instead of the first.

Assignment operator

Assignment Operators are used to assign values ​​to variables.

The most common assignment operator, of course, is the equal sign (=).

// Assign 1 to the variable x
var x = 1;

// Assign the value of variable y to variable x
var x = y;

Assignment operators can also be combined with other operators to form variants. The following is a combination with arithmetic operators.

// equivalent to x = x + y
x += y;

// equivalent to x = x-y
x -= y;

// equivalent to x = x * y
x *= y;

// equivalent to x = x / y
x /= y;

// equivalent to x = x% y
x %= y;

// equivalent to x = x ** y
x **= y;

The following is the combination with bit operators (for bit operators, please see the introduction below).

// equivalent to x = x >> y
x >>= y;

// equivalent to x = x << y
x <<= y;

// equivalent to x = x >>> y
x >>>= y;

// equivalent to x = x & y
x &= y;

// equivalent to x = x | y
x |= y;

// equivalent to x = x ^ y
x ^= y;

These compound assignment operators first perform the specified operation, and then return the value to the variable on the left.