JavaScript Operators and Expressions: Complete Guide

let a = 10;      // = is an assignment operator
let b = 5;
let sum = a + b; // + is an arithmetic operator

console.log(sum); // 15

let x = 5;

console.log(-x);     // -5 (unary negation)
console.log(++x);    // 6 (increment)
console.log(typeof x); // "number" (typeof operator)
console.log(!true);  // false (logical NOT)

let a = 10;
let b = 5;

console.log(a + b);  // 15 (addition)
console.log(a > b);  // true (comparison)
console.log(a && b); // 5 (logical AND)

let age = 18;
let status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

// condition ? valueIfTrue : valueIfFalse

let x = 10;
let y = 3;

console.log(x + y);  // 13 - Addition
console.log(x - y);  // 7  - Subtraction
console.log(x * y);  // 30 - Multiplication
console.log(x / y);  // 3.333... - Division
console.log(x % y);  // 1  - Modulus (remainder)
console.log(x ** y); // 1000 - Exponentiation (10³)

let count = 5;
count++;             // 6 - Increment by 1
count--;             // 5 - Decrement by 1

let x = 10;          // Simple assignment

x += 5;              // x = x + 5 → 15
x -= 3;              // x = x - 3 → 12
x *= 2;              // x = x * 2 → 24
x /= 4;              // x = x / 4 → 6
x %= 4;              // x = x % 4 → 2
x **= 3;             // x = x ** 3 → 8

let a = 10;
let b = 5;

console.log(a > b);   // true  - Greater than
console.log(a < b);   // false - Less than
console.log(a >= 10); // true  - Greater than or equal
console.log(a <= 5);  // false - Less than or equal
console.log(a == 10); // true  - Equal (with type coercion)
console.log(a === 10);// true  - Strict equal (no type coercion)
console.log(a != b);  // true  - Not equal
console.log(a !== b); // true  - Strict not equal

let isAdult = true;
let hasLicense = false;

console.log(isAdult && hasLicense); // false - AND (both must be true)
console.log(isAdult || hasLicense); // true  - OR (at least one must be true)
console.log(!isAdult);              // false - NOT (inverts boolean)

// With non-boolean values
console.log(5 && 10);               // 10 (returns last truthy value)
console.log(0 || "default");        // "default" (returns first truthy value)
console.log("" ?? "fallback");      // "fallback" - Nullish coalescing

let firstName = "John";
let lastName = "Doe";

// Concatenation with +
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"

// Concatenation with +=
let greeting = "Hello";
greeting += " World";
console.log(greeting); // "Hello World"

// Template literals (recommended)
let message = `${firstName} ${lastName}`;
console.log(message); // "John Doe"

// typeof - Returns type as string
console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof {});          // "object"

// instanceof - Checks if object is instance of class
let arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true

// Syntax: condition ? valueIfTrue : valueIfFalse

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

// Equivalent to:
let canVote2;
if (age >= 18) {
  canVote2 = "Yes";
} else {
  canVote2 = "No";
}

let user = { name: "John", address: { city: "NYC" } };

console.log(user?.name);           // "John"
console.log(user?.address?.city);  // "NYC"
console.log(user?.phone?.number);  // undefined (no error!)

// Without optional chaining (would throw error)
// console.log(user.phone.number);  // ❌ TypeError

let value1 = null ?? "default";      // "default"
let value2 = undefined ?? "default"; // "default"
let value3 = 0 ?? "default";         // 0 (0 is not null/undefined)
let value4 = "" ?? "default";        // "" (empty string is not null/undefined)

// Compare with OR operator
let value5 = 0 || "default";         // "default" (0 is falsy)
let value6 = "" || "default";        // "default" ("" is falsy)

// Array spreading
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

// Object spreading
let person = { name: "John", age: 30 };
let employee = { ...person, job: "Developer" };
console.log(employee); // { name: "John", age: 30, job: "Developer" }

// Simple expressions
5                    // → 5
"hello"              // → "hello"
true                 // → true

// Arithmetic expressions
5 + 3                // → 8
10 * 2               // → 20
(4 + 5) * 2          // → 18

// String expressions
"Hello" + " World"   // → "Hello World"

// Logical expressions
5 > 3                // → true
true && false        // → false

// Function call expressions
Math.max(10, 20)     // → 20

// Variable expressions
let x = 5;
x + 10               // → 15

// Complex expressions
(10 + 5) * 2 / (3 - 1)  // → 15

let result = 5 + 3;              // Expression: 5 + 3 → 8
let isValid = age >= 18;         // Expression: age >= 18 → true
let greeting = "Hello " + name;  // Expression: "Hello " + name → "Hello John"

// These are all expressions (produce values)
5 + 3
"hello".toUpperCase()
true && false
x > 10
Math.random()
age >= 18 ? "adult" : "minor"

// These are statements (perform actions)
let x = 5;                    // Variable declaration statement
if (x > 10) { }               // If statement
for (let i = 0; i < 10; i++) // For loop statement
function greet() { }          // Function declaration statement

// ✅ Expression can be used in assignments
let result = 5 + 3;           // 5 + 3 is an expression

// ❌ Statement cannot be used in assignments
let result = if (true) { 5 }; // ❌ Syntax Error - if is a statement

// ✅ Expression can be used as function argument
console.log(5 + 3);           // 5 + 3 is an expression

// ❌ Statement cannot be used as function argument
console.log(let x = 5);       // ❌ Syntax Error - let is a statement

EXPRESSION                    STATEMENT
──────────                    ─────────
Produces a value              Performs an action
Can be assigned              Cannot be assigned
5 + 3                        let x = 5;
"hello"                      if (condition) { }
true && false                for (;;) { }
x > 10                       function name() { }
Math.random()                return value;

// Expression used as a statement
5 + 3;                // Valid but useless (value not used)
console.log("Hi");    // Function call expression used as statement
x = 10;               // Assignment expression used as statement
counter++;            // Increment expression used as statement

// Literal values
42
"hello"
true
null
undefined

// Variable references
let x = 10;
x              // Expression that evaluates to 10

// this keyword
this

5 + 3          // 8
10 - 4         // 6
6 * 7          // 42
20 / 4         // 5
15 % 4         // 3
2 ** 8         // 256

// Complex arithmetic
(10 + 5) * 2   // 30
100 / (5 + 5)  // 10

"Hello" + " World"              // "Hello World"
"JavaScript".toUpperCase()      // "JAVASCRIPT"
`Total: ${price * quantity}`    // Template literal expression

5 > 3                // true
x === 10             // true or false
isLoggedIn && isAdmin // Boolean result
age >= 18 || hasPermission // Boolean result

let x = 10;          // Assignment expression (returns 10)
let y = x = 5;       // x = 5, then y = 5 (chained assignment)

// Assignment expressions return values
console.log(x = 20); // Logs 20 (x is also set to 20)

// Object literal expression
let person = {
  name: "John",
  age: 30
};

// Array literal expression
let numbers = [1, 2, 3, 4, 5];

// Property access expression
person.name        // "John"
numbers[0]         // 1

// Function expression
let greet = function(name) {
  return `Hello, ${name}!`;
};

// Arrow function expression
let add = (a, b) => a + b;

// Immediately Invoked Function Expression (IIFE)
(function() {
  console.log("I run immediately!");
})();

Math.max(10, 20)         // 20
console.log("Hello")     // undefined (but has side effect)
[1, 2, 3].map(x => x * 2) // [2, 4, 6]

age >= 18 ? "adult" : "minor"
score > 50 ? "Pass" : "Fail"
isLoggedIn ? dashboard() : login()

let x = 5;
let y = 10;

// Combining arithmetic expressions
let result = (x + y) * 2;         // (5 + 10) * 2 = 30

// Combining comparison expressions
let isValid = x > 0 && y < 20;    // true && true = true

let price = 100;
let quantity = 3;
let discount = 0.1;

// Complex expression combining multiple operations
let total = (price * quantity) * (1 - discount);
console.log(total); // 270

// Expression with conditional logic
let finalPrice = quantity > 5 
  ? price * quantity * 0.8  // 20% discount
  : price * quantity;

// Expressions within expressions
let result = Math.max(
  (10 + 5) * 2,              // Inner expression
  (20 - 5) + 10              // Inner expression
);
console.log(result);         // 30

// Function calls with expression arguments
console.log(
  `Total: ${(price * quantity).toFixed(2)}`
);

// Multiplication before addition (like PEMDAS/BODMAS)
let result = 5 + 3 * 2;
console.log(result);  // 11 (not 16!)
// Evaluated as: 5 + (3 * 2) = 5 + 6 = 11

// Division before subtraction
let result2 = 10 - 8 / 2;
console.log(result2); // 6 (not 1!)
// Evaluated as: 10 - (8 / 2) = 10 - 4 = 6

// Without parentheses (confusing)
let x = 10 + 5 * 2;          // 20

// With parentheses (clear intent)
let y = (10 + 5) * 2;        // 30
let z = 10 + (5 * 2);        // 20

// Complex expression (use parentheses!)
let price = 100;
let quantity = 3;
let tax = 0.1;

// Bad - hard to read
let total1 = price * quantity + price * quantity * tax;

// Good - clear intent
let total2 = (price * quantity) + (price * quantity * tax);

// Better - even clearer
let subtotal = price * quantity;
let taxAmount = subtotal * tax;
let total3 = subtotal + taxAmount;

// 1. Grouping: ()
(2 + 3) * 4                  // 20

// 2. Member access: . []
person.name
array[0]

// 3. Function calls: ()
Math.max(1, 2)

// 4. Postfix increment/decrement: x++ x--
count++

// 5. Prefix increment/decrement: ++x --x
++count

// 6. Logical NOT: ! Unary: + - typeof
!true
-5
typeof x

// 7. Exponentiation: **
2 ** 3                       // 8

// 8. Multiplication, Division, Modulus: * / %
10 * 2
20 / 4
15 % 4

// 9. Addition, Subtraction: + -
5 + 3
10 - 2

// 10. Comparison: < > <= >=
5 > 3

// 11. Equality: == === != !==
5 === 5

// 12. Logical AND: &&
true && false

// 13. Logical OR: ||
true || false

// 14. Nullish coalescing: ??
null ?? "default"

// 15. Conditional (Ternary): ? :
x > 5 ? "yes" : "no"

// 16. Assignment: = += -= *= /= etc.
x = 10
x += 5

let result = 2 + 3 * 4 ** 2 / 2 - 1;

// Step-by-step evaluation:
// 1. 4 ** 2 = 16              (Exponentiation first)
// 2. 3 * 16 = 48              (Multiplication)
// 3. 48 / 2 = 24              (Division)
// 4. 2 + 24 = 26              (Addition)
// 5. 26 - 1 = 25              (Subtraction)

console.log(result); // 25

// With parentheses to change order:
let result2 = ((2 + 3) * 4) ** 2 / (2 - 1);
// (5 * 4) ** 2 / 1 = 20 ** 2 / 1 = 400
console.log(result2); // 400

// Arithmetic operators evaluate left to right
let result = 10 - 5 - 2;
// (10 - 5) - 2 = 5 - 2 = 3
console.log(result); // 3

// Not: 10 - (5 - 2) = 10 - 3 = 7

// Assignment operators evaluate right to left
let a, b, c;
a = b = c = 5;
// c = 5, then b = 5, then a = 5
console.log(a, b, c); // 5 5 5

// Exponentiation evaluates right to left
let result = 2 ** 3 ** 2;
// 2 ** (3 ** 2) = 2 ** 9 = 512
console.log(result); // 512

// Not: (2 ** 3) ** 2 = 8 ** 2 = 64

let itemPrice = 29.99;
let quantity = 3;
let taxRate = 0.08;
let discountPercent = 10;

// Calculate subtotal
let subtotal = itemPrice * quantity;

// Calculate discount
let discountAmount = subtotal * (discountPercent / 100);
let afterDiscount = subtotal - discountAmount;

// Calculate tax
let taxAmount = afterDiscount * taxRate;

// Calculate final total
let total = afterDiscount + taxAmount;

console.log(`Subtotal: $${subtotal.toFixed(2)}`);
console.log(`Discount: -$${discountAmount.toFixed(2)}`);
console.log(`After Discount: $${afterDiscount.toFixed(2)}`);
console.log(`Tax: $${taxAmount.toFixed(2)}`);
console.log(`Total: $${total.toFixed(2)}`);

function validateAge(age) {
  // Complex expression combining multiple conditions
  let isValid = 
    age !== null &&                    // Not null
    age !== undefined &&               // Not undefined
    typeof age === "number" &&         // Is a number
    !isNaN(age) &&                     // Not NaN
    age >= 0 &&                        // Non-negative
    age <= 150 &&                      // Reasonable max
    Number.isInteger(age);             // Whole number
  
  return isValid;
}

console.log(validateAge(25));      // true
console.log(validateAge(-5));      // false
console.log(validateAge(25.5));    // false
console.log(validateAge("25"));    // false
console.log(validateAge(null));    // false

function calculatePrice(quantity, unitPrice) {
  // Ternary operator for tiered pricing
  let discount = 
    quantity >= 100 ? 0.2 :    // 20% off for 100+
    quantity >= 50 ? 0.15 :    // 15% off for 50+
    quantity >= 20 ? 0.1 :     // 10% off for 20+
    quantity >= 10 ? 0.05 :    // 5% off for 10+
    0;                         // No discount
  
  let subtotal = quantity * unitPrice;
  let discountAmount = subtotal * discount;
  let total = subtotal - discountAmount;
  
  return {
    subtotal: subtotal,
    discount: discountAmount,
    total: total,
    discountPercent: discount * 100
  };
}

console.log(calculatePrice(5, 10));    // No discount
console.log(calculatePrice(15, 10));   // 5% discount
console.log(calculatePrice(75, 10));   // 15% discount

// Using && for conditional execution
let user = { name: "John", age: 30 };

// Only log if user exists
user && console.log(user.name); // Logs "John"

// Using || for default values
let username = user.name || "Guest";
console.log(username); // "John"

let emptyName = "";
let displayName = emptyName || "Anonymous";
console.log(displayName); // "Anonymous"

// Using ?? for more precise defaults
let count = 0;
let displayCount1 = count || 10;   // 10 (0 is falsy)
let displayCount2 = count ?? 10;   // 0 (0 is not null/undefined)

console.log(displayCount1); // 10
console.log(displayCount2); // 0

// ❌ Bad - assignment in condition
let x = 10;
if (x = 5) {  // This assigns 5 to x, doesn't compare!
  console.log("This always runs");
}
console.log(x); // 5 (changed!)

// ✅ Good - comparison
let y = 10;
if (y === 5) {  // This compares
  console.log("This doesn't run");
}
console.log(y); // 10 (unchanged)

// ❌ Bad - unexpected result
let result = 10 + 5 * 2;
console.log(result); // 20 (expected 30?)

// ✅ Good - explicit with parentheses
let result2 = (10 + 5) * 2;
console.log(result2); // 30

// ❌ Problem
let a = "5";
let b = 3;
console.log(a + b); // "53" (concatenation!)

// ✅ Solution - convert to number
console.log(Number(a) + b); // 8
console.log(+a + b);        // 8

let x = 5;

// Postfix - returns old value, then increments
console.log(x++); // 5 (logs 5, then x becomes 6)
console.log(x);   // 6

let y = 5;

// Prefix - increments first, then returns new value
console.log(++y); // 6 (y becomes 6, then logs 6)
console.log(y);   // 6

// ❌ Bad - 0 is falsy but valid
function processCount(count) {
  if (!count) {
    console.log("No count provided");
    return;
  }
  console.log(`Count: ${count}`);
}

processCount(0); // "No count provided" (but 0 is valid!)

// ✅ Good - explicit check
function processCount(count) {
  if (count === undefined || count === null) {
    console.log("No count provided");
    return;
  }
  console.log(`Count: ${count}`);
}

processCount(0); // "Count: 0" ✅

// ❌ Hard to read
let result = a + b * c / d - e;

// ✅ Clear intent
let result = a + ((b * c) / d) - e;

// ❌ Avoid == (type coercion)
if (value == 0) { }

// ✅ Use === (strict equality)
if (value === 0) { }

// ❌ Relying on coercion
let total = "5" + 3; // "53"

// ✅ Explicit conversion
let total = Number("5") + 3; // 8

// ❌ Bad
let x = p * q * (1 - d);

// ✅ Good
let price = unitPrice * quantity * (1 - discountRate);

// ❌ Hard to understand
let result = ((a + b) * c - d) / (e + f) ** 2;

// ✅ Easier to understand
let sum = a + b;
let product = sum * c;
let difference = product - d;
let base = e + f;
let exponent = base ** 2;
let result = difference / exponent;

// ❌ Hard to read
let message = "Hello " + name + ", you have " + count + " new messages.";

// ✅ Clear and readable
let message = `Hello ${name}, you have ${count} new messages.`;

// Operators and Expressions Practice

// Exercise 1: Temperature Converter
function convertTemp(celsius) {
  // Convert Celsius to Fahrenheit: F = (C × 9/5) + 32
  // TODO: Write the conversion using arithmetic operators
}

console.log(convertTemp(0));    // Should be 32
console.log(convertTemp(100));  // Should be 212
console.log(convertTemp(-40));  // Should be -40

// Exercise 2: Discount Calculator
function calculateDiscount(price, quantity) {
  // Apply discount:
  // 10+ items: 10% off
  // 20+ items: 15% off
  // 50+ items: 20% off
  // TODO: Use ternary operator to calculate discount
}

console.log(calculateDiscount(100, 5));   // Should be 500 (no discount)
console.log(calculateDiscount(100, 15));  // Should be 1350 (10% off)
console.log(calculateDiscount(100, 25));  // Should be 2125 (15% off)

// Exercise 3: Complex Expression
let a = 5;
let b = 10;
let c = 2;

// Without running the code, what is the result of:
let result = a + b * c ** 2 / 4 - 3;

// Then run it and check if you were correct!
console.log(result);

// Exercise 4: Validate Email (simple)
function isValidEmail(email) {
  // Check if email contains @ and .
  // TODO: Use logical operators
}

console.log(isValidEmail("test@example.com"));  // true
console.log(isValidEmail("test@example"));      // false
console.log(isValidEmail("testexample.com"));   // false