# Operators An **operator** is a symbol that performs an operation on one or more values (called **operands**) and produces a result. ```js 10 + 5 // + is the operator, 10 and 5 are operands, 15 is the result ``` JavaScript operators are grouped by what they do. This topic covers three categories: arithmetic, comparison, and logical. --- ## 1. Arithmetic Operators Arithmetic operators perform mathematical calculations on numbers. | Operator | Name | Example | Result | |---|---|---|---| | `+` | Addition | `10 + 3` | `13` | | `-` | Subtraction | `10 - 3` | `7` | | `*` | Multiplication | `10 * 3` | `30` | | `/` | Division | `10 / 3` | `3.333...` | | `%` | Modulus (remainder) | `10 % 3` | `1` | | `**` | Exponentiation | `2 ** 4` | `16` | | `++` | Increment | `x++` or `++x` | adds 1 | | `--` | Decrement | `x--` or `--x` | subtracts 1 | ### Basic Operations ```js let a = 10; let b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.3333333333333335 console.log(a % b); // 1 console.log(a ** b); // 1000 (10 to the power 3) ``` ### Modulus — Practical Use The `%` operator returns the **remainder** after division. It is commonly used to: - Check if a number is even or odd - Wrap around a range (e.g. circular arrays) ```js console.log(10 % 2); // 0 — even number console.log(7 % 2); // 1 — odd number console.log(15 % 4); // 3 — remainder when 15 is divided by 4 ``` ### Increment and Decrement These operators add or subtract 1 from a variable. They have two forms — prefix and postfix — which differ in when the change takes effect. **Postfix (`x++`, `x--`)** — returns the original value first, then changes it. ```js let x = 5; console.log(x++); // 5 — original value returned console.log(x); // 6 — now incremented ``` **Prefix (`++x`, `--x`)** — changes the value first, then returns it. ```js let y = 5; console.log(++y); // 6 — incremented first, then returned console.log(y); // 6 ``` ### The `+` Operator with Strings When `+` is used with a string, it performs **concatenation** instead of addition. ```js console.log("Hello" + " " + "World"); // Hello World console.log("Age: " + 25); // Age: 25 console.log(5 + 5 + "10"); // 1010 — 5+5=10, then "10"+"10" console.log("10" + 5 + 5); // 1055 — "10"+5="105", then "105"+5 ``` > JavaScript evaluates left to right. Once a string appears, all following `+` operations become concatenation. --- ## 2. Comparison Operators Comparison operators compare two values and always return a **boolean** (`true` or `false`). | Operator | Name | Example | Result | |---|---|---|---| | `==` | Loose equality | `5 == "5"` | `true` | | `===` | Strict equality | `5 === "5"` | `false` | | `!=` | Loose inequality | `5 != "5"` | `false` | | `!==` | Strict inequality | `5 !== "5"` | `true` | | `>` | Greater than | `10 > 5` | `true` | | `<` | Less than | `10 < 5` | `false` | | `>=` | Greater than or equal | `5 >= 5` | `true` | | `<=` | Less than or equal | `4 <= 5` | `true` | ### Loose Equality (`==`) vs Strict Equality (`===`) This is one of the most important distinctions in JavaScript. **Loose equality (`==`)** performs **type coercion** — it converts both values to the same type before comparing. ```js console.log(5 == "5"); // true — "5" is converted to number 5 console.log(0 == false); // true — false is converted to 0 console.log(0 == ""); // true — both coerced to 0 console.log(null == undefined); // true — special rule ``` **Strict equality (`===`)** compares **both value and type** — no conversion happens. ```js console.log(5 === "5"); // false — different types console.log(0 === false); // false — different types console.log(5 === 5); // true — same value, same type console.log(null === undefined); // false — different types ``` > Always use `===` in modern JavaScript. Loose equality (`==`) leads to unexpected bugs due to type coercion. ### Comparing Strings Strings are compared alphabetically based on Unicode character values. ```js console.log("apple" > "banana"); // false — a (97) < b (98) console.log("b" > "a"); // true console.log("ABC" < "abc"); // true — uppercase letters have smaller Unicode values ``` ### Comparing Different Types ```js console.log(null > 0); // false console.log(null == 0); // false console.log(null >= 0); // true — special case, null converts to 0 in relational comparisons console.log(undefined > 0); // false console.log(undefined < 0); // false console.log(undefined == 0); // false ``` > `null` and `undefined` behave inconsistently with comparison operators. This is a known quirk of JavaScript. --- ## 3. Logical Operators Logical operators work with boolean values and are used to combine or invert conditions. | Operator | Name | Description | |---|---|---| | `&&` | AND | Returns `true` only if both operands are true | | `\|\|` | OR | Returns `true` if at least one operand is true | | `!` | NOT | Inverts the boolean value | ### AND (`&&`) Returns `true` only when **both** conditions are true. ```js console.log(true && true); // true console.log(true && false); // false console.log(false && true); // false console.log(false && false); // false ``` ```js let age = 20; let hasID = true; if (age >= 18 && hasID) { console.log("Entry allowed"); // runs — both conditions true } ``` ### OR (`||`) Returns `true` when **at least one** condition is true. ```js console.log(true || false); // true console.log(false || false); // false console.log(false || true); // true ``` ```js let isAdmin = false; let isModerator = true; if (isAdmin || isModerator) { console.log("Access granted"); // runs — one condition is true } ``` ### NOT (`!`) Inverts a boolean value. `true` becomes `false` and `false` becomes `true`. ```js console.log(!true); // false console.log(!false); // true console.log(!0); // true — 0 is falsy, !falsy = true console.log(!""); // true — empty string is falsy console.log(!"hi"); // false — non-empty string is truthy ``` Double NOT (`!!`) converts any value to its boolean equivalent: ```js console.log(!!0); // false console.log(!!"hello"); // true console.log(!!null); // false console.log(!!1); // true ``` --- ## Short-circuit Evaluation JavaScript does not always evaluate both sides of a logical expression. It stops as soon as the result is determined. ### AND (`&&`) short-circuits on the first falsy value ```js console.log(false && console.log("runs")); // false — right side never evaluated console.log(true && "hello"); // "hello" — returns last evaluated value console.log(0 && "hello"); // 0 — 0 is falsy, stops here ``` ### OR (`||`) short-circuits on the first truthy value ```js console.log(true || console.log("runs")); // true — right side never evaluated console.log(false || "hello"); // "hello" — returns first truthy value console.log(0 || "default"); // "default" — 0 is falsy, moves to next ``` ### Practical use — default values ```js let username = ""; let display = username || "Guest"; console.log(display); // "Guest" — username is falsy, so fallback is used ``` ```js let user = { name: "Arjun" }; let name = user && user.name; console.log(name); // "Arjun" — user is truthy, so user.name is returned ``` --- ## Assignment Operators Assignment operators assign a value to a variable. Compound assignment operators combine an arithmetic operation with assignment. | Operator | Equivalent to | Example | Result (if x = 10) | |---|---|---|---| | `=` | assign | `x = 10` | `10` | | `+=` | `x = x + n` | `x += 5` | `15` | | `-=` | `x = x - n` | `x -= 3` | `7` | | `*=` | `x = x * n` | `x *= 2` | `20` | | `/=` | `x = x / n` | `x /= 4` | `2.5` | | `%=` | `x = x % n` | `x %= 3` | `1` | | `**=` | `x = x ** n` | `x **= 2` | `100` | ```js let score = 100; score += 50; // score is now 150 score -= 20; // score is now 130 score *= 2; // score is now 260 console.log(score); // 260 ``` --- ## Operator Precedence When multiple operators appear in an expression, JavaScript follows **precedence rules** — higher precedence operators run first, similar to BODMAS in mathematics. ```js console.log(2 + 3 * 4); // 14 — * runs before + console.log((2 + 3) * 4); // 20 — () forces addition first console.log(10 - 2 + 3); // 11 — left to right for same precedence ``` **General order (high to low):** ``` () — grouping (highest) ** — exponentiation *, /, % — multiplication, division, modulus +, - — addition, subtraction >, <, >=, <= — comparison ==, ===, !=, !== — equality && — logical AND || — logical OR =, +=, -=, ... — assignment (lowest) ``` --- ## Summary ``` Arithmetic → + - * / % ** ++ -- Comparison → == === != !== > < >= <= Logical → && || ! Assignment → = += -= *= /= %= **= ``` **Key rules to remember:** - Always use `===` over `==` - `%` gives the remainder, not the percentage - `++x` increments before returning, `x++` returns then increments - `&&` and `||` return values, not just booleans — they short-circuit - `!` inverts a boolean, `!!` converts any value to a boolean

Operators in Javascript

Introduction

Operators