Operators in JavaScript

JavaScript operators are symbols or keywords used to perform operations on values and variables.
They are the building blocks of JavaScript expressions and can manipulate data in various ways.

1. Arithmetic Operator

Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.

Addition operator (+)
The addition operator returns the sum of two values. For example, the following uses the addition operator to calculate the sum of two numbers:

let sum = 10 + 20;
console.log(sum); // 30

You can also use the addition operator with two variables. For example:

let netPrice    = 9.99,
    shippingFee = 1.99;
let grossPrice  = netPrice + shippingFee;

console.log(grossPrice);   // 11.98

If either value is a string, the addition operator uses the following rules:

If both values are strings, it concatenates the second string to the first one.
If one value is a string, it implicitly converts the numeric value into a string and concatenates two strings.

For example, the following uses the addition operator to concatenate two strings:

let x = '10',
    y = '20';
let result = x + y;   // 1020

The following example shows how to use the addition operator to calculate the sum of a number and a string:

let result = 10 + '20';  // 1020

In this example, JavaScript converts the number 10 into a string '10' and concatenates the second string '20' to it.

Subtraction operator (-)

The subtraction operator (-) subtracts one number from another. For example:

let result = 30 - 10;
console.log(result); // 20

If a value is a string, a boolean, null, or undefined, the JavaScript engine will:

First, convert the value to a number using the Number() function.
Second, perform the subtraction.

Multiplication operator (*)

JavaScript uses the asterisk (*) to represent the multiplication operator. The multiplication operator multiplies two numbers and returns a single value. For example:

let result = 2 * 3;
console.log(result);  // 6

If either value is not a number, the JavaScript engine implicitly converts it into a number using the Number() function and perform the multiplication. For example:

let result = '5' * 2;

console.log(result);   // 10

Divide operator (/)

Javascript uses the slash (/) character to represent the divide operator. The divide operator divides the first value by the second one. For example:

let result = 20 / 10;

console.log(result); // 2

If either value is not a number, the JavaScript engine converts it into a number for division. For example:

let result = '20' / 2;
console.log(result); // 10;

Remainder Operator (%)

JavaScript uses the (%) to represent the remainder operator. The remainder operator returns the remainder left over when one value is divided by another value. For example:

The following example shows how to use the remainder operator with a positive dividend:

let remainder = 5 % -2;
console.log(remainder); // 1

remainder = 5 % 2;
console.log(remainder); // 1

The following example uses the remainder operator with a negative dividend:

let remainder = -5 % 3;
console.log(remainder); // -2

remainder = -5 % -3;
console.log(remainder); // -2

2. Assignment Operators

Assignment operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.

+= operator

The following example uses the += operator to add one to variable x:

let x = 10;
x += 1;
console.log(x); // 11

-= operator

The following example uses the -= operator to minus one from the variable x:

let x = 10;
x -= 1;
console.log(x); // 9

(*=) operator

The following example uses the *= operator to multiply 10 with the variable x:

let x = 10;
x *= 10;
console.log(x); // 100

/= operator

The following example uses the /= operator to divide x by 2 and assign the result back to x:

let x = 10;
x /= 2;
console.log(x); // 5

%= operator

The following example uses the %= operator to get the remainder of x is divided by 2 and assigns the remainder back to x:

let x = 5;
x = x % 2;

console.log(x);  // 1

Chaining JavaScript assignment operator

If you want to assign a single value to multiple variables, you can chain the assignment operators. For example:

let a = 10, b = 20, c = 30;
a = b = c; // all variables are 30

In this example, JavaScript evaluates from right to left. Therefore, it does the following:

let a = 10, b = 20, c = 30;

b = c; // b is 30
a = b; // a is also 30

3. Comparison / Relational operators

Comparison operators compare two values and return a boolean (true or false). They are useful for making decisions in conditional statements.

See the following example:

let r1 = 20 > 10; // true
let r2 = 20 < 10; // false
let r3 = 10 == 10; // true

Compare numbers

If values are numbers, the comparison operators perform a numerical comparison. For example:

let a = 10, 
    b = 20; 

console.log(a >= b);  // false
console.log(a == 10); // true

This example is straightforward. The variable a is 10, b is 20. The expression a >= b expression returns false and the expression a == 10 expression returns true.

Compare strings

If the operands are strings, JavaScript compares the character codes numerically one by one in the string.

let name1 = 'alice',
    name2 = 'bob';    

let result = name1 < name2;
console.log(result); // true
console.log(name1 == 'alice'); // true

Since JavaScript compares the character codes in the strings numerically, you may receive an unexpected result, for example:

let f1 = 'apple',
    f2 = 'Banana';
let result = f2 < f1;
console.log(result); // true

In this example, f2 is less than f1 because the letter B has the character code 66 while the letter a has the character code 97.

To fix this, you need to:

First, convert the strings into a common format, either lowercase or uppercase
Second, compare the converted values

For example:

let f1 = 'apple',
    f2 = 'Banana';

let result = f2.toLowerCase() < f1.toLowerCase();
console.log(result); // false

Note that the toLowerCase() is a method of the String object that converts the string to lowercase.

4. Strict equal (===) and not strict equal (!==)

The strict equal and not strict equal operators behave like the equal and not equal operators except that they don’t convert the operand before comparison.

See the following example:

console.log("10" == 10); // true
console.log("10" === 10); // false

In the first comparison, since we use the equality operator, JavaScript converts the string into a number and performs the comparison.

However, in the second comparison, we use the strict equal operator (===), JavaScript doesn’t convert the string before comparison, therefore the result is false.

https://www.geeksforgeeks.org/javascript/javascript-operators/
https://www.javascripttutorial.net/javascript-unary-operators/

推荐订阅源

DEV Community