Operators in JavaScript Tutorial: Types, Examples & Best Practices
Operators in JavaScript:
The Complete Guide
Every JavaScript operator explained clearly — arithmetic, assignment, comparison, logical, ternary, bitwise, and more — with real code examples, common mistakes, and practice questions.
What Are Operators in JavaScript?
An operator in JavaScript is a special symbol or keyword that performs an operation on one or more values (called operands) and produces a result. Think of operators as the action words of programming — they tell JavaScript what to do with the data you give it.
For example, the + operator adds two numbers. The === operator checks if two values are equal. The ! operator flips a true/false value. Operators are used in literally every JavaScript program ever written — you cannot write meaningful code without them.
JavaScript has 8 categories of operators, each serving a different purpose. Understanding all of them deeply will make you a dramatically better developer because you will be able to write cleaner, shorter, and more powerful code. Let's go through every single one — completely from A to Z.
Arithmetic Operators — Performing Math Operations
Arithmetic operators are used to perform mathematical calculations. These are the most familiar operators because they work exactly like the math you learned in school — addition, subtraction, multiplication, division, and more.
let a = 20, b = 6; console.log(a + b); // 26 — Addition console.log(a - b); // 14 — Subtraction console.log(a * b); // 120 — Multiplication console.log(a / b); // 3.33— Division console.log(a % b); // 2 — Modulus (remainder) console.log(a ** 2); // 400 — Exponent (power) // Increment and Decrement let x = 5; console.log(x++); // 5 — post-increment (returns then adds) console.log(x); // 6 — x is now 6 console.log(++x); // 7 — pre-increment (adds then returns) console.log(x--); // 7 — post-decrement console.log(x); // 6 — x is back to 6
26 14 120 3.333... 2 400
5 6 7 7 6% operator returns the remainder after division. It is incredibly useful — use num % 2 === 0 to check if a number is even, and num % 2 !== 0 to check if it is odd.Assignment Operators — Storing and Updating Values
Assignment operators assign a value to a variable. The basic one is =. But JavaScript also has compound assignment operators that combine a math operation with assignment — making your code shorter and cleaner.
let score = 50; score += 10; // score = score + 10 → 60 score -= 5; // score = score - 5 → 55 score *= 2; // score = score * 2 → 110 score /= 11; // score = score / 11 → 10 score %= 3; // score = score % 3 → 1 score **= 3; // score = score ** 3 → 1 console.log(score); // 1 // Practical example let total = 0; total += 100; // add item 1 total += 250; // add item 2 total += 75; // add item 3 console.log("Cart Total: $" + total); // $425
1
Cart Total: $425Comparison Operators — Comparing Two Values
Comparison operators compare two values and always return a Boolean — either true or false. They are used in every if statement, every loop condition, and every decision your code makes. The most important distinction for beginners is between == (loose) and === (strict).
| Operator | Name | Example | Result |
|---|---|---|---|
| == | Loose Equal | "5" == 5 | true ⚠️ |
| === | Strict Equal | "5" === 5 | false ✅ |
| != | Loose Not Equal | "5" != 5 | false |
| !== | Strict Not Equal | "5" !== 5 | true ✅ |
| > | Greater Than | 10 > 5 | true |
| < | Less Than | 3 < 7 | true |
| >= | Greater or Equal | 5 >= 5 | true |
| <= | Less or Equal | 4 <= 3 | false |
=== and !== in your code. The loose operators == and != perform type conversion and produce unexpected results that cause very hard-to-find bugs.Logical Operators — Combining Conditions
Logical operators allow you to combine multiple conditions together and make more complex decisions. There are three logical operators: AND (&&), OR (||), and NOT (!). They return Boolean values and are used in every real-world JavaScript application.
let age = 20; let hasTicket = true; let isVIP = false; // AND (&&) — BOTH must be true console.log(age >= 18 && hasTicket); // true (both true) console.log(age >= 18 && isVIP); // false (isVIP is false) // OR (||) — at LEAST ONE must be true console.log(hasTicket || isVIP); // true (hasTicket is true) console.log(false || false); // false (both false) // NOT (!) — reverses the boolean console.log(!hasTicket); // false console.log(!isVIP); // true // Practical use — entry check if (age >= 18 && hasTicket) { console.log("✅ Entry allowed!"); } else { console.log("❌ Entry denied."); } // Short-circuit evaluation — very useful! let username = null; let display = username || "Guest"; // if null, use "Guest" console.log(display); // Guest
true false true false false true
✅ Entry allowed!
GuestUnary Operators — Operating on a Single Value
Unary operators work on only one operand (unlike binary operators that need two). JavaScript has several important unary operators that every developer uses regularly:
// typeof — check the data type console.log(typeof "Hello"); // "string" console.log(typeof 42); // "number" console.log(typeof true); // "boolean" console.log(typeof undefined);// "undefined" // Unary + — convert to number console.log(+"42"); // 42 (string → number) console.log(+true); // 1 (boolean → number) console.log(+false); // 0 console.log(+"abc"); // NaN (can't convert) // Unary - — negate a number console.log(-10); // -10 console.log(-(-5)); // 5 // delete — remove an object property const user = { name: "Sara", age: 22 }; delete user.age; console.log(user); // { name: "Sara" } // void — evaluates expression, returns undefined console.log(void 0); // undefined
"string" "number" "boolean" "undefined"
42 1 0 NaN
-10 5
{ name: "Sara" }
undefinedTernary Operator — The Shortcut for if/else
The ternary operator is JavaScript's only operator that takes three operands. It is a compact, one-line alternative to an if/else statement. The syntax is: condition ? valueIfTrue : valueIfFalse. When the condition is true, it returns the first value; when false, it returns the second.
let age = 20; // Ternary vs if/else — same result, shorter code // Long way: let access1; if (age >= 18) { access1 = "Adult"; } else { access1 = "Minor"; } // Short way — ternary: let access2 = age >= 18 ? "Adult" : "Minor"; console.log(access1); // Adult console.log(access2); // Adult // Practical examples let score = 75; let grade = score >= 90 ? "A" : score >= 70 ? "B" : score >= 50 ? "C" : "F"; console.log("Grade: " + grade); // Grade: B // Use in template literals let items = 1; console.log(`You have ${items} ${items === 1 ? "item" : "items"}`); // You have 1 item
Adult Adult
Grade: B
You have 1 itemBitwise Operators — Working at the Binary Level
Bitwise operators work directly on the binary (0s and 1s) representation of numbers. They are advanced operators used in low-level programming, cryptography, and performance-critical applications. As a beginner, you will not use these often — but knowing they exist and understanding their basic behavior is important for a complete JavaScript education.
// 5 in binary = 0101 // 3 in binary = 0011 console.log(5 & 3); // 1 — AND (0101 & 0011 = 0001) console.log(5 | 3); // 7 — OR (0101 | 0011 = 0111) console.log(5 ^ 3); // 6 — XOR (0101 ^ 0011 = 0110) console.log(~5); // -6 — NOT (inverts all bits) console.log(5 << 1); // 10 — Left shift (multiply by 2) console.log(5 >> 1); // 2 — Right shift (divide by 2) // Practical tip: check if number is even using bitwise AND console.log(4 & 1); // 0 — even number console.log(7 & 1); // 1 — odd number
1 7 6 -6 10 2
0 1Operator Precedence — Which Operator Runs First?
Operator precedence determines which operator is evaluated first when an expression has multiple operators. Just like in mathematics where multiplication happens before addition, JavaScript follows a specific order of operations. Understanding precedence helps you write correct expressions and avoid confusing bugs.
// Precedence in action — higher precedence runs first console.log(2 + 3 * 4); // 14 (* before +) console.log((2 + 3) * 4); // 20 (parentheses first) console.log(10 - 2 * 3 + 1); // 5 (* first, then left-to-right) // Logical operator precedence console.log(true || false && false); // true (&& before ||) console.log(!false && true); // true (! first) // Comparison before logical let a = 5, b = 10, c = 3; console.log(a > c && b > c); // true (> first, then &&) console.log(a + b > 10 || c < 1); // true (+ first, then >, then ||)
14 20 5
true true
true true( ) → ! → ** → * / % → + - → > < >= <= → === !== → && → || → ?:When in doubt — use parentheses ( ) to force the order you want!
🧠 Practice Questions — Test Your Knowledge
✅ Complete Summary — JavaScript Operators
🟢 Assignment (=,+=,-=,*=): Store and update variable values — compound operators save code
🟡 Comparison (===,!==,>,<): Compare values — always returns true or false — use === always
🟠 Logical (&&,||,!): Combine conditions — AND, OR, NOT — used in every real program
🩷 Unary (typeof,+,-,!): Operate on one value — check types, negate, convert
🩵 Ternary (?:): Short if/else — condition ? trueValue : falseValue
🟣 Bitwise (&,|,^,~): Binary-level operations — advanced use cases
⭐ Precedence: ( ) runs first — use parentheses when unsure of order
The three most important operators to master first are === (strict equality), && and || (logical), and the ?: ternary. These appear in virtually every JavaScript program. Practice them daily and they will become second nature within a week of consistent coding!
Comments
Post a Comment