JavaScript Basics Chapter 3: The Operator Guild

The Journey Continues: Chapter 3

After exploring the Data Type Kingdom, we now enter the workshop of the Operator Guild, where skilled craftsmen transform and manipulate our data with precision tools.

Chapter 3: The Operator Guild

In JavaScript Land, operators are like tools in a craftsman's workshop. Each has its purpose and peculiarities.

The Arithmetic Workers

let a = 10, 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

// The tricky + operator
console.log("5" + 3);   // "53" - string concatenation
console.log(5 + "3");   // "53" - still string concatenation
console.log(+"5" + 3);  // 8 - unary + converts to number

The Comparison Detectives

// The notorious == vs === case
console.log(5 == "5");   // true  - loose equality (type coercion)
console.log(5 === "5");  // false - strict equality (no coercion)

console.log(null == undefined);  // true  - special case
console.log(null === undefined); // false - different types

// Other comparisons
console.log(10 > 5);   // true
console.log(10 >= 10); // true
console.log("a" < "b"); // true - lexicographic comparison

The Logical Philosophers

// && (AND) - returns first falsy value or last value
console.log(true && false);     // false
console.log("hello" && "world"); // "world"
console.log("" && "world");     // "" (empty string is falsy)

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

// ! (NOT) - flips truthiness
console.log(!true);    // false
console.log(!"hello"); // false
console.log(!!"hello"); // true (double negation converts to boolean)

The Assignment Helpers

let score = 10;
score += 5;  // score = score + 5 → 15
score -= 3;  // score = score - 3 → 12
score *= 2;  // score = score * 2 → 24
score /= 4;  // score = score / 4 → 6
score %= 4;  // score = score % 4 → 2

The Ternary Operator - The Quick Decision Maker

let weather = "sunny";

// Basic ternary
let clothing = weather === "sunny" ? "t-shirt" : "jacket";

// Nested ternary (use sparingly - can get confusing!)
let activity = weather === "sunny" ? "beach" 
             : weather === "rainy" ? "reading"
             : "staying in";

// More readable alternative
let mood;
if (weather === "sunny") {
    mood = "happy";
} else if (weather === "rainy") {
    mood = "contemplative";
} else if (weather === "stormy") {
    mood = "dramatic";
} else {
    mood = "confused"; // What kind of weather is this?
}

The Mysterious Type Coercion

// When operators force type conversions
console.log("5" - 3);    // 2 (string converted to number)
console.log("5" * "2");  // 10 (both strings converted to numbers)
console.log("5" / "abc"); // NaN (can't convert "abc" to number)

// Boolean conversions
console.log(true + 1);   // 2 (true becomes 1)
console.log(false + 1);  // 1 (false becomes 0)

// The infamous examples
console.log([] + []);    // "" (empty arrays become empty strings)
console.log({} + []);    // "[object Object]" (object becomes string)
console.log([] + {});    // "[object Object]"

Operator Precedence - The Order of Operations

// Just like in math, operators have precedence
let result = 2 + 3 * 4;  // 14, not 20 (multiplication first)

// Use parentheses to override precedence
let result2 = (2 + 3) * 4; // 20

// Assignment vs comparison
let x = 5;
let y = x = 10;  // y gets 10, x gets 10 (assignment returns the value)

// Careful with logical operators
let a = true;
let b = false;
let c = a && b || true;  // true (AND has higher precedence than OR)
let d = a && (b || true); // true (same result, but clearer intent)

The Adventure Grows

With the tools of the Operator Guild now in our arsenal, we're ready to tackle the next chapter of our journey: The Control Flow Chronicles. Here we'll learn how to make decisions and repeat actions in our JavaScript adventures.

Continue the quest:

• Previous: Chapter 2: The Data Type Kingdom
• Next: Chapter 4: The Control Flow Chronicles
• Table of Contents: JavaScript Guide - Table of Contents

"In the Operator Guild's workshop, every symbol has a purpose, every comparison tells a story, and type coercion works in mysterious ways!"