IT Course JavaScript Basics 040_Operators

JavaScript operators are used to perform mathematical operations, comparisons, logical operations, and return results.

Arithmetic Operators

• +: Addition
• -: Subtraction
• *: Multiplication
• /: Division
• %: Modulus (remainder)
• **: Exponentiation

Example:

1
let a = 5;
2
let b = 2;
3

4
console.log(a + b);  // Output 7
5
console.log(a - b);  // Output 3
6
console.log(a * b);  // Output 10
7
console.log(a / b);  // Output 2.5
8
console.log(a % b);  // Output 1
9
console.log(a**b);  // Output 25

Assignment Operators

• =: Assignment
• +=: Addition assignment
• -=: Subtraction assignment
• *=: Multiplication assignment
• /=: Division assignment
• %=: Modulus assignment
• **=: Exponentiation assignment
• ??=: Nullish assignment, assigns only when the variable value is null or undefined

Example:

1
let x = 5;
2
x += 2;  // x = x + 2; Output 7
3
x -= 2;  // x = x - 2; Output 3
4
x *= 2;  // x = x * 2; Output 10
5
x /= 2;  // x = x / 2; Output 2.5
6
x %= 2;  // x = x % 2; Output 1
7
x **= 2;  // x = x ** 2; Output 25
8
x ??= 2;  // Output 5, assigns 2 when x is null or undefined
9
console.log(x);

Comparison Operators

• ==: Equal (type is automatically converted)
• ===: Strict equal (both value and type are equal)
• !=: Not equal
• !==: Strict not equal
• >: Greater than
• <: Less than
• >=: Greater than or equal
• <=: Less than or equal

When encountering non-numeric values, they are first converted to numeric values before comparison. When encountering strings, the Unicode encoding of characters is compared bit by bit.

Example:

1
let a = 5;
2
let b = '5';
3
let c = 10;
4

5
console.log(a == b);   // Output true, values are equal
6
console.log(a === b);  // Output false, types are not equal
7
console.log(a != b);   // Output false, values are equal
8
console.log(a !== b);  // Output true, types are not equal
9
console.log(a > c);  // Output false, 5 < 10
10
console.log(a < c);  // Output true, 5 < 10
11
console.log(a >= c);  // Output false, 5 <= 10
12
console.log(a <= c);  // Output true, 5 <= 10

Logical Operators

When processing operands, logical operators convert them to boolean values and return the original value of the operand.

&&: Logical AND

Used to determine if conditions are simultaneously true. If all conditions are true, the result of the entire expression is true; otherwise, the result is false. The AND operation searches from left to right for the first false. If false is found, it stops calculation and returns the original value of this operand (short-circuit evaluation). If there is no false at the end, it returns the last true.

||: Logical OR

Used to determine if at least one condition is true. If at least one condition is true, the result of the entire expression is true; if all conditions are false, the result is false. The OR operation searches from left to right for the first true. If true is found, it stops calculation and returns the original value of this operand (short-circuit evaluation). If there is no true at the end, it returns the last false.

!: Logical NOT

Used to negate a boolean value. If a value is true, using the logical NOT operator negates it to false; if a value is false, it is negated to true. Logical NOT can also be used to convert non-boolean values to boolean values. It converts any value that is not null, undefined, 0, NaN, "" (empty string) to true, while these values themselves are converted to false.

Example:

1
let a = true;
2
let b = false;
3
let c = "hello";
4
let d = null;
5

6
console.log(a && b);  // Output false
7
console.log(c && d);  // Output null
8
console.log(a || b);  // Output true
9
console.log(c || d);  // Output hello
10
console.log(!a);      // Output false
11
console.log(!d);      // Output true

Ternary Operator

• condition ? expr1 : expr2: If the condition is true, return expr1, otherwise return expr2.

Example:

1
let age = 18;
2
let status = (age >= 18) ? 'Adult' : 'Minor';
3
console.log(status);  // Output 'Adult'

Nullish Coalescing Operator

The Nullish Coalescing Operator is an operator used to handle default values, typically used to ensure a variable has a non-null (not null and not undefined) value. The syntax of this operator is ??.

When using the nullish coalescing operator, it returns the first defined (not null and not undefined) operand. If the first operand is null or undefined, it returns the second operand.

Example:

1
let num1 = 0;
2
let num2 = 1;
3
let result = num1 ?? num2;
4
console.log(result);  // Output 0, because num is not null or undefined
5

6
let user;
7
console.log(user ?? "Anonymous"); // Output Anonymous, because user is undefined

Bitwise Operators

• &: Bitwise AND
• |: Bitwise OR
• ^: Bitwise XOR
• ~: Bitwise NOT
• <<: Left shift
• >>: Right shift
• >>>: Unsigned right shift

Example:

1
let a = 5;  // Binary: 0101
2
let b = 3;  // Binary: 0011
3

4
console.log(a & b);   // Output 1 (Bitwise AND)
5
console.log(a | b);   // Output 7 (Bitwise OR)
6
console.log(a ^ b);   // Output 6 (Bitwise XOR)
7
console.log(~a);      // Output -6 (Bitwise NOT)
8
console.log(a << 1);  // Output 10 (Left shift)
9
console.log(a >> 1);  // Output 2 (Right shift)

Other Operators

• typeof: Returns a string indicating the type of the unevaluated operand.
• instanceof: Used to test whether an object is an instance of a specified type.

Example:

1
let str = 'Hello';
2
console.log(typeof str);  // Output 'string'
3

4
let arr = [1, 2, 3];
5
console.log(arr instanceof Array);  // Output true

+ (Plus Sign)

In JavaScript, the plus sign + has multiple uses, including mathematical operations, string concatenation, and unary operations.

Mathematical Operation

Example:

1
let a = 5;
2
let b = 3;
3
let result = a + b;
4
console.log(result);  // Output 8

If both are numbers, + is used to perform mathematical addition.

String Concatenation

Example:

1
let str1 = 'Hello';
2
let str2 = ' World';
3
let result = str1 + str2;
4
console.log(result);  // Output 'Hello World'

If one of the operands is a string, + will perform string concatenation.

Unary Plus Operator

Example:

1
let str = '42';
2
let num = +str;
3
console.log(num);  // Output 42

Using + before a single operand can convert the operand to a number, which is the function of the unary plus operator.

Type Conversion

Example:

1
let num = 42;
2
let str = '10';
3
let result = num + str;  // Implicit type conversion (type coercion)
4
console.log(result);  // Output '4210'

If one of the operands is a string, + performs type conversion, converting other operands to strings, then performs string concatenation.

Concatenating Arrays

Example:

1
let arr1 = [1, 2, 3];
2
let arr2 = [4, 5, 6];
3
let result = arr1 + arr2;
4
console.log(result);  // Output '1,2,34,5,6'

When one operand is an array, + converts the array to a string and then performs string concatenation.

Special Cases

Example:

1
let specialResult1 = '1' + 2 + 3;
2
console.log(specialResult1);  // Output '123'
3

4
let specialResult2 =  2 + 3 + '1';
5
console.log(specialResult2);  // Output '51'

specialResult1, because the string appears on the leftmost side of +, subsequent numbers are treated as strings for concatenation. specialResult2, because the string appears on the rightmost side of +, the previous numbers perform mathematical operations first and then concatenate.

- (Minus Sign)

In JavaScript, the minus sign - is an operator used to perform mathematical subtraction.

Mathematical Subtraction

Example:

1
let a = 5;
2
let b = 3;
3
let result = a - b;
4
console.log(result);  // Output 2

If both are numbers, - is used to perform mathematical subtraction.

Unary Minus Operator

Example:

1
let num = 42;
2
let result = -num;
3
console.log(result);  // Output -42

Using - before a single operand can perform unary negation, turning the operand into its opposite number.

Type Conversion

Example:

1
let num1 = 42;
2
let str = '10';
3
let result = num1 - str;
4
console.log(result);  // Output 32

If one of the operands is a string, - performs type conversion, converting other operands to numbers, then performs mathematical subtraction.

Special Cases

Example:

1
let specialResult = '10' - 2;
2
console.log(specialResult);  // Output 8

In this special case, because the content in the string can be successfully converted to a number, - performs mathematical subtraction.

=, ==, === (Assignment, Loose Equality, Strict Equality)

In JavaScript, the equals sign = is an assignment operator, while == and === are comparison operators. Loose equality converts both operands to the same type before comparison. In conditional judgments, === is typically used for strict equality comparison because it does not perform type conversion.

Assignment Operator

= is used to assign the value on the right to the variable on the left.

Example:

1
let x = 5;
2
let y = 'Hello';
3
console.log(x);  // Output 5
4
console.log(y);  // Output 'Hello'

In this example, = assigns the value on the right to the variables x and y on the left.

Comparison Operators

== and === are used to compare the equality of two values.

Example:

1
let a = 5;
2
let b = '5';
3

4
console.log(a == b);   // Output true
5
console.log(a === b);  // Output false

== performs type conversion when comparing equality, null == undefined outputs true. === requires both value and type to be equal when comparing equality, null === undefined outputs false. NaN is not equal to any value, including NaN itself.

++, -- (Increment, Decrement)

In JavaScript, increment (++) and decrement (--) are operators used to increase or decrease the value of a variable.

Increment Operator (++)

After use, the original variable immediately increases by 1. Prefix increment returns the value after increment (new value); Postfix increment returns the value before increment (old value);

Prefix increment example:

1
let a = 5;
2
// Prefix increment, first increase by 1, then use the new value
3
let b = ++a;
4
console.log(b);  // Output 6
5
console.log(a);  // Output 6

In this example, a first increased by 1, then b got the new a value (6).

Postfix increment example:

1
let x = 5;
2
// Postfix increment, first use the current value, then increase by 1
3
let y = x++;
4
console.log(y);  // Output 5
5
console.log(x);  // Output 6

In this example, y first got the current value of x (5), then x increased by 1.

Decrement Operator (—)

After use, the original variable immediately decreases by 1. Prefix decrement returns the value after decrement (new value); Postfix decrement returns the value before decrement (old value);

Prefix decrement example:

1
let p = 10;
2
// Prefix decrement, first decrease by 1, then use the new value
3
let q = --p;
4
console.log(q);  // Output 9
5
console.log(p);  // Output 9

In this example, p first decreased by 1, then q got the new p value (9).

Postfix decrement example:

1
let m = 8;
2
// Postfix decrement, first use the current value, then decrease by 1
3
let n = m--;
4
console.log(n);  // Output 8
5
console.log(m);  // Output 7

In this example, n first got the current value of m (8), then m decreased by 1.

Operator Precedence:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence