Demystifying JavaScript Operators: What Does That Symbol Mean?

This article provides a comprehensive guide to JavaScript operators, categorized for clarity and enhanced understanding. We'll explore their functions and illustrate their usage with practical examples.

Key Concepts:

• Operators: Special symbols performing operations on variables and values, essential for computations and data manipulation.
• Operands: The values or variables on which operators act.
• Coercion: Implicit type conversion between data types (e.g., number to string).
• NaN: "Not a Number," representing an invalid numeric value.
• Truthy/Falsy: Values evaluating to true or false in a Boolean context.

1. Arithmetic Operators: These perform standard mathematical operations.

• Addition ( ): Adds numbers or concatenates strings. 'Hello' ' World!' results in 'Hello World!'. Note the behavior with objects: 1 {a:1} yields '1[object Object]'.
• Subtraction (-): Subtracts numbers. 10 - 5 equals 5.
• *Multiplication ():* Multiplies numbers. `5 2equals10`.
• Division (/): Divides numbers. 10 / 2 equals 5. Division by zero results in Infinity. BigInt division truncates the result.
• Modulus (%): Returns the remainder of a division. 10 % 3 equals 1.
• Increment ( ): Increases a variable's value by 1 (prefix x increments before use, postfix x increments after).
• Decrement (--): Decreases a variable's value by 1 (prefix --x, postfix x--).
• Unary Negation (-): Changes a number's sign. -5 negates 5.
• Unary Plus ( ): Explicitly converts a value to a number. '10' becomes 10.
• Exponentiation (): Raises a number to a power. `2 3equals8`.

2. Assignment Operators: Assign values to variables, often combining operations with assignment.

• Assignment (=): Basic assignment. x = 5;
• Addition Assignment ( =): x = 3; (equivalent to x = x 3;)
• Subtraction Assignment (-=): x -= 2;
• *Multiplication Assignment (=):* `x = 4;`
• Division Assignment (/=): x /= 2;
• Modulus Assignment (%=): x %= 3;
• Exponentiation Assignment (=): `x = 2;`
• (Bitwise Assignment Operators): Perform bitwise operations and assign the result (e.g., &=, |=, ^=, <<=, >>=, >>>=).

3. Comparison Operators: Compare values, returning a Boolean result.

• Equality (==): Loose equality (performs type coercion). 1 == '1' is true.
• Inequality (!=): Loose inequality. 1 != '2' is true.
• Strict Equality (===): Strict equality (no type coercion). 1 === '1' is false.
• Strict Inequality (!==): Strict inequality. 1 !== '1' is true.
• Greater Than (>): 5 > 2 is true.
• Less Than (<): 2 < 5 is true.
• Greater Than or Equal To (>=): 5 >= 5 is true.
• Less Than or Equal To (<=): 2 <= 5 is true.

4. Logical Operators: Combine or modify Boolean expressions.

• Logical AND (&&): Returns the first falsy value or the last truthy value. true && false is false. 'a' && 'b' is 'b'.
• Logical OR (||): Returns the first truthy value or the last falsy value. false || true is true. '' || 'a' is 'a'.
• Logical NOT (!): Inverts a Boolean value. !true is false.
• Nullish Coalescing (??): Returns the right operand only if the left operand is null or undefined. null ?? 'default' is 'default'. 0 ?? 'default' is 0.

5. Bitwise Operators: Operate on the binary representations of numbers.

• Bitwise AND (&): 5 & 3 (binary 101 & 011) equals 1 (binary 001).
• Bitwise OR (|): 5 | 3 (binary 101 | 011) equals 7 (binary 111).
• Bitwise XOR (^): 5 ^ 3 (binary 101 ^ 011) equals 6 (binary 110).
• Bitwise NOT (~): Inverts bits. ~5 (binary ~101) equals -6.
• Left Shift (<<): Shifts bits to the left.
• Right Shift (>>): Shifts bits to the right.
• Unsigned Right Shift (>>>): Shifts bits to the right, filling with zeros.

6. Other Operators:

• Conditional (Ternary) Operator (? :): Concise conditional expressions. age > 18 ? 'Adult' : 'Minor';
• Spread Operator (...): Expands iterable objects. [...array] creates a copy.
• Comma Operator (,): Evaluates multiple expressions sequentially.
• Optional Chaining Operator (?.): Safely accesses nested object properties. obj?.prop?.subprop
• Pipeline Operator (|>): (Stage 2 proposal) Improves readability of chained function calls.

Operator Precedence: JavaScript follows specific rules for the order of operations. Parentheses () can override precedence.

This detailed explanation provides a solid foundation for understanding and effectively utilizing JavaScript operators in your programming endeavors. Remember to consult the MDN Web Docs for the most up-to-date and comprehensive information.

The above is the detailed content of Demystifying JavaScript Operators: What Does That Symbol Mean?. For more information, please follow other related articles on the PHP Chinese website!