JavaScript Operators

Operators are special symbols or keywords that perform operations on one, two, or three operands. JavaScript has a rich set of operators categorized by their functionality.

1. Arithmetic Operators

Arithmetic operators perform mathematical calculations.

• + (Addition): Adds values. Can also concatenate strings.
• - (Subtraction): Subtracts the right operand from the left.
• * (Multiplication): Multiplies values.
• / (Division): Divides the left operand by the right.
• % (Remainder/Modulo): Returns the integer remainder of a division.
• ** (Exponentiation): Raises the left operand to the power of the right operand (ES2016).
• ++ (Increment): Increases a numeric value by 1.
• -- (Decrement): Decreases a numeric value by 1.

let a = 10, b = 3;
console.log(a + b); // 13
console.log(a % b); // 1
console.log(a ** b); // 1000

2. Assignment Operators

These operators assign values to variables.

• = (Simple Assignment): x = y
• += (Addition Assignment): x += y is equivalent to x = x + y
• -= (Subtraction Assignment): x -= y
• *= (Multiplication Assignment): x *= y
• /= (Division Assignment): x /= y
• %= (Remainder Assignment): x %= y

3. Comparison Operators

Comparison operators compare two values and evaluate to a boolean (true or false).

• == (Loose Equality): Checks for value equality, performing type coercion if necessary. (Generally avoid)
• === (Strict Equality): Checks for value AND type equality. (Preferred)
• != (Loose Inequality): Checks if values are not equal (coerces types).
• !== (Strict Inequality): Checks if values or types are not equal.
• > (Greater than), < (Less than)
• >= (Greater than or equal), <= (Less than or equal)

console.log(5 == "5");  // true (type coercion)
console.log(5 === "5"); // false (strict type check)

4. Logical Operators

Logical operators are typically used with boolean values to perform logical operations.

• && (Logical AND): Returns true if both operands are truthy.
• || (Logical OR): Returns true if at least one operand is truthy.
• ! (Logical NOT): Reverses the boolean state of an operand.

Short-Circuit Evaluation

JavaScript logical operators short-circuit. For &&, if the first operand is falsy, it evaluates and returns the first operand without checking the second. For ||, if the first operand is truthy, it returns it immediately.

const user = { name: "John" };
const name = user.name || "Anonymous"; // Fallback value
const hasAccount = true;
const isVerified = true;
const isValid = hasAccount && isVerified; // Both must be true

5. Bitwise Operators

Bitwise operators treat their operands as a sequence of 32 bits and operate on them bit by bit. They are less common in standard web development but crucial for performance-critical logic or systems programming.

• & (AND), | (OR), ^ (XOR), ~ (NOT)
• << (Left shift), >> (Sign-propagating right shift), >>> (Zero-fill right shift)

6. The Ternary Operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands. It is frequently used as a shortcut for if...else statements.

Syntax: condition ? exprIfTrue : exprIfFalse

const age = 20;
const canDrink = age >= 21 ? "No" : "Yes (in some countries)";

7. Unary Operators

Operators that take a single operand.

• typeof: Returns a string indicating the type of the unevaluated operand.
• delete: Deletes a property from an object.
• void: Evaluates the given expression and then returns undefined.
• + (Unary plus): Attempts to convert the operand to a number.

console.log(typeof "Hello"); // "string"
console.log(+"42");          // 42 (number)

8. Nullish Coalescing Operator (??)

Introduced in ES2020, ?? returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand. It is safer than || when you want to allow falsy values like 0 or "".

const count = 0;
console.log(count || 10); // 10 (because 0 is falsy)
console.log(count ?? 10); // 0  (because 0 is not null/undefined)