Operators, Expressions, and Comparison

An operator is a special symbol used to perform calculations or operations on values (operands). Expressions combine variables, values, and operators to evaluate to a single value.

1. Basic Operators

A. Arithmetic Operators

Used for math calculations:

• + (Addition / String Concatenation)
• - (Subtraction)
• * (Multiplication)
• / (Division)
• % (Remainder/Modulus)
• ** (Exponentiation)
• ++ (Increment), -- (Decrement)

console.log(10 % 3);   // 1 (Remainder)
console.log(2 ** 3);   // 8 (2 raised to the power 3)
console.log("Hello " + "World"); // "Hello World" (Concatenation)

B. Assignment Operators

Used to assign values to variables:

• = (Assignment)
• +=, -=, *=, /= (Compound Assignment)

let score = 10;
score += 5; // Equivalent to: score = score + 5

2. Comparisons: Loose vs. Strict Equality

Comparison operators evaluate expressions to a Boolean value (true or false).

• >, < (Greater / Less than)
• >=, <= (Greater / Less than or equal to)
• == (Loose equality - compares values after type conversion)
• === (Strict equality - compares values AND types without conversion)
• != (Loose inequality)
• !== (Strict inequality)

Strict Equality is Best Practice

Loose equality (==) performs Type Coercion (automatic conversion of data types), leading to unpredictable results:

console.log(5 == "5");   // true (String "5" converted to number 5)
console.log(5 === "5");  // false (Number vs String: types do not match)

console.log(null == undefined);   // true
console.log(null === undefined);  // false
console.log(0 == false);          // true
console.log(0 === false);         // false

Rule of thumb: Always use === and !== to avoid bugs.

3. Logical Operators & Short-Circuiting

Used to combine multiple logical statements:

• && (Logical AND): Returns true if both expressions are true.
• || (Logical OR): Returns true if at least one expression is true.
• ! (Logical NOT): Negates the boolean value.

Short-Circuit Evaluation

In JavaScript, && and || short-circuit. They stop evaluating as soon as the outcome is determined, and return the actual value of the last evaluated operand.

• || (OR): Returns the first truthy value.

let defaultUser = "Guest";
let username = null;
let activeName = username || defaultUser; // "Guest"

• && (AND): Returns the first falsy value, or the last value if all are truthy.

let loggedIn = true;
loggedIn && console.log("Welcome!"); // Triggers console.log because loggedIn is true

4. Modern JS Operators

A. Ternary Operator (Conditional Operator)

A shorthand for simple if-else statements.

let age = 20;
let status = age >= 18 ? "Adult" : "Minor"; // "Adult"

B. Nullish Coalescing Operator (??)

Returns its right-hand side operand when its left-hand side operand is null or undefined, otherwise returns its left-hand side operand.

let count = 0;
// || treats 0 as falsy, which may be unwanted:
let valueWithOr = count || 10; // 10
// ?? only falls back on null/undefined:
let valueWithNullish = count ?? 10; // 0

C. Optional Chaining (?.)

Allows reading the value of a property located deep within a chain of connected objects without having to check if each reference in the chain is valid.

let user = { profile: { name: "Alice" } };
console.log(user.address?.city); // undefined (does not throw error!)

In the next guide, we will learn how to write conditional statements and loops.