7. Operators

Arithmetic Operators

let a = 10;
let b = 3;

console.log(a + b);  // 13 (Addition)
console.log(a - b);  // 7  (Subtraction)
console.log(a * b);  // 30 (Multiplication)
console.log(a / b);  // 3.333... (Division)
console.log(a % b);  // 1  (Modulus/Remainder)
console.log(a ** b); // 1000 (Exponentiation - ES7+)

Assignment Operators

let x = 5;

x += 3;  // x = x + 3;  // 8
x -= 2;  // x = x - 2;  // 6
x *= 4;  // x = x * 4;  // 24
x /= 3;  // x = x / 3;  // 8
x %= 5;  // x = x % 5;  // 3
x **= 2; // x = x ** 2; // 9

Comparison Operators

let a = 5;
let b = "5";

console.log(a == b);   // true  (loose equality)
console.log(a === b);  // false (strict equality)
console.log(a != b);   // false (loose inequality)
console.log(a !== b);  // true  (strict inequality)
console.log(a > 3);    // true
console.log(a < 10);   // true
console.log(a >= 5);   // true
console.log(a <= 5);   // true

Logical Operators

let x = true;
let y = false;

console.log(x && y); // false (AND)
console.log(x || y); // true  (OR)
console.log(!x);     // false (NOT)

Short-Circuit Evaluation

// AND (&&) - returns first falsy value or last truthy value
console.log(false && "hello"); // false
console.log(true && "hello");  // "hello"
console.log("hello" && 0);     // 0

// OR (||) - returns first truthy value or last falsy value
console.log(false || "hello"); // "hello"
console.log(true || "hello");  // true
console.log(0 || "hello");     // "hello"
console.log(0 || false);       // false

Bitwise Operators

let a = 5;  // Binary: 101
let b = 3;  // Binary: 011

console.log(a & b);  // 1  (AND: 001)
console.log(a | b);  // 7  (OR:  111)
console.log(a ^ b);  // 6  (XOR: 110)
console.log(~a);     // -6 (NOT)
console.log(a << 1); // 10 (Left shift: 1010)
console.log(a >> 1); // 2  (Right shift: 10)
console.log(a >>> 1);// 2  (Unsigned right shift)

String Operators

let str1 = "Hello";
let str2 = "World";

console.log(str1 + str2);     // "HelloWorld"
console.log(str1 + " " + str2); // "Hello World"

// Template literals (ES6+)
let name = "John";
console.log(`Hello, ${name}!`); // "Hello, John!"

Conditional (Ternary) Operator

let age = 18;
let canVote = age >= 18 ? "Yes" : "No";
console.log(canVote); // "Yes"

// Nested ternary
let score = 85;
let grade = score >= 90 ? "A" :
           score >= 80 ? "B" :
           score >= 70 ? "C" : "F";
console.log(grade); // "B"

Nullish Coalescing Operator (ES11+)

let user = null;
let defaultName = "Guest";

let name = user ?? defaultName; // "Guest"
let name2 = "John" ?? defaultName; // "John"

Optional Chaining Operator (ES11+)

let user = {
    profile: {
        name: "John"
    }
};

console.log(user.profile?.name);    // "John"
console.log(user.address?.street);  // undefined (no error)
console.log(user.profile?.age ?? 25); // 25

Logical Assignment Operators (ES12+)

let a = null;
let b = "default";

// Old way
a = a || b;  // "default"

// New way
a ||= b;     // "default"

let c = "";
c &&= "updated"; // "" (short-circuits)

let d = undefined;
d ??= "fallback"; // "fallback"

Operator Precedence

Order of operations (highest to lowest):

  1. Grouping: ()
  2. Member access: . []
  3. Function call: ()
  4. New: new
  5. Postfix: ++ --
  6. Prefix: ++ -- + - ~ !
  7. Exponentiation: **
  8. Multiplication/Division/Modulus: * / %
  9. Addition/Subtraction: + -
  10. Bitwise shift: << >> >>>
  11. Relational: < <= > >=
  12. Equality: == != === !==
  13. Bitwise AND: &
  14. Bitwise XOR: ^
  15. Bitwise OR: |
  16. Logical AND: &&
  17. Logical OR: ||
  18. Conditional: ?:
  19. Assignment: = += -= *= /= %= **= <<= >>= >>>= &= ^= |= &&= ||= ??=
  20. Comma: ,

Next Steps

Operators are the building blocks of expressions. Next, let's explore control structures that use these operators.

← Previous Next →