JavaScript Operators

JavaScript operators are special symbols used to perform operations on values and variables. These operations can range from simple arithmetic and assignment to comparison and logical evaluations.

Operators are categorized based on the type of operation they perform and the number of operands they take. An operand is the value or variable that the operator acts upon.

📊 Operator Categories

Arithmetic

Mathematical operations

+ - * / % **

Assignment

Assign values

= += -= *= /=

Comparison

Compare values

== === != !== > <

Logical

Combine booleans

&& || ! ??

Ternary

Conditional operator

? :

Bitwise

Binary operations

& | ^ ~ << >>

Type

Type checking

typeof instanceof

Other

Miscellaneous

, void delete in

➕ Arithmetic Operators

Mathematical Operations

Arithmetic operators perform mathematical calculations on numbers. JavaScript follows standard mathematical order of operations (PEMDAS).

Operator	Name	Example	Result
`+`	Addition	`5 + 3`	8
`-`	Subtraction	`10 - 4`	6
`*`	Multiplication	`6 * 7`	42
`/`	Division	`15 / 3`	5
`%`	Modulus	`17 % 5`	2
`**`	Exponentiation	`2 ** 3`	8
`++`	Increment	`x++`	x + 1
`--`	Decrement	`x--`	x - 1

🎯 Operator Precedence

JavaScript evaluates expressions in this order:

Parentheses ()
Exponentiation **
Multiplication/Division/Modulus * / %
Addition/Subtraction + -

💡 String Concatenation

The + operator also concatenates strings. When one operand is a string, JavaScript converts the other to a string and concatenates them.

Try Arithmetic Operations:

JavaScript Editor

// Arithmetic Operators - Perform mathematical operations

let a = 15;
let b = 4;

console.log("a =", a, ", b =", b);
console.log("--- Arithmetic Operations ---");

// Addition
let sum = a + b;
console.log("a + b =", sum);

// Subtraction
let difference = a - b;
console.log("a - b =", difference);

// Multiplication
let product = a * b;
console.log("a * b =", product);

// Division
let quotient = a / b;
console.log("a / b =", quotient);

// Modulus (Remainder)
let remainder = a % b;
console.log("a % b =", remainder);

// Exponentiation (ES6)
let power = a ** b;
console.log("a ** b =", power);

// Increment and Decrement
let count = 5;
console.log("\n--- Increment/Decrement ---");
console.log("Initial count:", count);

count++; // Post-increment
console.log("After count++:", count);

++count; // Pre-increment
console.log("After ++count:", count);

count--; // Post-decrement
console.log("After count--:", count);

--count; // Pre-decrement
console.log("After --count:", count);

// Special cases
console.log("\n--- Special Cases ---");
console.log("10 + '5' =", 10 + '5'); // String concatenation
console.log("10 - '5' =", 10 - '5'); // Numeric subtraction
console.log("10 * '5' =", 10 * '5'); // Numeric multiplication
console.log("10 / '5' =", 10 / '5'); // Numeric division

🔄 Assignment Operators

Assigning Values

Assignment operators assign values to variables. Compound assignment operators perform an operation and assignment in one step.

Operator	Example	Equivalent To	Description
`=`	`x = 5`	`x = 5`	Simple assignment
`+=`	`x += 3`	`x = x + 3`	Add and assign
`-=`	`x -= 2`	`x = x - 2`	Subtract and assign
`*=`	`x *= 4`	`x = x * 4`	Multiply and assign
`/=`	`x /= 2`	`x = x / 2`	Divide and assign
`%=`	`x %= 3`	`x = x % 3`	Modulus and assign
`**=`	`x **= 2`	`x = x ** 2`	Exponentiate and assign

⚠️ Chained Assignment

Multiple assignments like a = b = c = 5 are possible but can be confusing. The assignment is processed from right to left.

🎯 Destructuring Assignment (ES6)

Extract values from arrays or properties from objects into distinct variables.

const [a, b] = [1, 2];
const {x, y} = {x: 10, y: 20};

JavaScript Editor

// Assignment Operators - Assign values to variables

let x = 10;
console.log("Initial x =", x);

// Basic assignment
x = 20;
console.log("After x = 20:", x);

// Addition assignment
x += 5; // equivalent to x = x + 5
console.log("After x += 5:", x);

// Subtraction assignment
x -= 3; // equivalent to x = x - 3
console.log("After x -= 3:", x);

// Multiplication assignment
x *= 2; // equivalent to x = x * 2
console.log("After x *= 2:", x);

// Division assignment
x /= 4; // equivalent to x = x / 4
console.log("After x /= 4:", x);

// Modulus assignment
x %= 3; // equivalent to x = x % 3
console.log("After x %= 3:", x);

// Exponentiation assignment
x **= 2; // equivalent to x = x ** 2
console.log("After x **= 2:", x);

// String assignment operators
let text = "Hello";
console.log("\nInitial text =", text);

text += " World"; // equivalent to text = text + " World"
console.log("After text += ' World':", text);

// Multiple assignments
let p, q, r;
p = q = r = 100; // All variables get value 100
console.log("\nMultiple assignment:");
console.log("p =", p, ", q =", q, ", r =", r);

// Destructuring assignment (ES6)
const [first, second] = [10, 20];
console.log("Destructuring: first =", first, ", second =", second);

const {name, age} = {name: "John", age: 30};
console.log("Object destructuring: name =", name, ", age =", age);

⚖️ Comparison Operators

Comparing Values

Comparison operators compare two values and return a boolean (true or false). They're essential for conditional statements and loops.

Operator	Name	Example	Description
`==`	Equal to	`5 == '5'`	True (type coercion)
`===`	Strict equal	`5 === '5'`	False (different types)
`!=`	Not equal	`5 != '6'`	True
`!==`	Strict not equal	`5 !== '5'`	True
`>`	Greater than	`10 > 5`	True
`<`	Less than	`10 < 5`	False
`>=`	Greater or equal	`10 >= 10`	True
`<=`	Less or equal	`10 <= 5`	False

🚫 Avoid Loose Equality

Always use === and !== instead of == and !=. Strict comparison prevents unexpected type coercion bugs.

🔍 Type Coercion Quirks

Loose equality can produce surprising results:

0 == false → true
'' == false → true
null == undefined → true
'0' == false → true

JavaScript Editor

// Comparison Operators - Compare values and return boolean

let num1 = 10;
let num2 = 5;
let strNum = "10";

console.log("num1 =", num1, ", num2 =", num2, ', strNum = "10"');
console.log("--- Comparison Operations ---");

// Equal to (value only)
console.log("num1 == strNum:", num1 == strNum);   // true (type coercion)
console.log("num1 == num2:", num1 == num2);       // false

// Not equal to (value only)
console.log("num1 != strNum:", num1 != strNum);   // false
console.log("num1 != num2:", num1 != num2);       // true

// Strict equal to (value and type)
console.log("num1 === strNum:", num1 === strNum); // false
console.log("num1 === num1:", num1 === num1);     // true

// Strict not equal to (value and type)
console.log("num1 !== strNum:", num1 !== strNum); // true
console.log("num1 !== num1:", num1 !== num1);     // false

// Greater than
console.log("num1 > num2:", num1 > num2);         // true
console.log("num2 > num1:", num2 > num1);         // false

// Less than
console.log("num1 < num2:", num1 < num2);         // false
console.log("num2 < num1:", num2 < num1);         // true

// Greater than or equal to
console.log("num1 >= num2:", num1 >= num2);       // true
console.log("num1 >= 10:", num1 >= 10);           // true

// Less than or equal to
console.log("num1 <= num2:", num1 <= num2);       // false
console.log("num1 <= 10:", num1 <= 10);           // true

// Special comparison cases
console.log("\n--- Special Cases ---");
console.log("null == undefined:", null == undefined);     // true
console.log("null === undefined:", null === undefined);   // false
console.log("0 == false:", 0 == false);                   // true
console.log("0 === false:", 0 === false);                 // false
console.log("'' == false:", '' == false);                 // true
console.log("'' === false:", '' === false);               // false

🔗 Logical Operators

Boolean Logic

Logical operators combine boolean values and return a boolean result. They're fundamental for conditional logic and flow control.

Operator	Name	Example	Description
`&&`	Logical AND	`a && b`	True if both are true
`\|\|`	Logical OR	`a \|\| b`	True if at least one is true
`!`	Logical NOT	`!a`	True if operand is false
`??`	Nullish Coalescing	`a ?? b`	Returns b if a is null/undefined

⚡ Short-circuit Evaluation

JavaScript stops evaluating logical expressions as soon as the result is determined. This is used for conditional execution and default values.

🎯 Truthy and Falsy Values

In logical operations, values are converted to booleans:

Falsy:

false
0
""
null
undefined
NaN

Truthy:

Everything else!
"hello"
42
[]
true

JavaScript Editor

// Logical Operators - Combine boolean values

let isLoggedIn = true;
let hasPermission = false;
let age = 25;
let score = 85;

console.log("isLoggedIn =", isLoggedIn, ", hasPermission =", hasPermission);
console.log("age =", age, ", score =", score);
console.log("--- Logical Operations ---");

// Logical AND (&&) - returns true if both operands are true
console.log("isLoggedIn && hasPermission:", isLoggedIn && hasPermission);
console.log("(age >= 18) && (score > 80):", (age >= 18) && (score > 80));

// Logical OR (||) - returns true if at least one operand is true
console.log("isLoggedIn || hasPermission:", isLoggedIn || hasPermission);
console.log("(age < 18) || (score < 60):", (age < 18) || (score < 60));

// Logical NOT (!) - inverts the boolean value
console.log("!isLoggedIn:", !isLoggedIn);
console.log("!hasPermission:", !hasPermission);
console.log("!(age < 18):", !(age < 18));

// Short-circuit evaluation
console.log("\n--- Short-circuit Evaluation ---");

// AND short-circuit: if first is false, second isn't evaluated
let result1 = false && console.log("This won't be printed");
console.log("result1:", result1);

// OR short-circuit: if first is true, second isn't evaluated
let result2 = true || console.log("This won't be printed either");
console.log("result2:", result2);

// Practical use cases
console.log("\n--- Practical Use Cases ---");

// Default values with OR
let userName = "";
let displayName = userName || "Guest";
console.log("Display name:", displayName);

// Conditional execution with AND
let user = { name: "John" };
user.isAdmin && console.log("Admin access granted");

// Nullish coalescing (ES2020) - better for null/undefined
let count = 0;
let defaultCount = count || 10; // 0 is falsy, so uses 10
let safeCount = count ?? 10;    // 0 is not null/undefined, so uses 0
console.log("count || 10:", defaultCount);
console.log("count ?? 10:", safeCount);

❓ Ternary Operator

Conditional Operator

The ternary operator is a compact way to write simple if-else statements. It takes three operands and returns one of two values based on a condition.

Syntax	Equivalent If-Else	Description
`condition ? expr1 : expr2`	`if (condition) { expr1 } else { expr2 }`	Returns expr1 if true, expr2 if false

Best Practices:

Use for simple, single-line conditions
Avoid complex nested ternary operators
Keep expressions simple and readable
Use parentheses for complex conditions

💡 When to Use Ternary

Perfect for: variable assignments, return statements, and simple conditional rendering. Use if-else for complex logic with multiple statements.

🚫 Avoid This (Too Complex):

const result = a > b ? (c < d ? e : f) : (g > h ? i : j);

Instead, use if-else for complex nested conditions.

JavaScript Editor

// Ternary Operator - Compact if-else statement

let age = 20;
let temperature = 25;
let isMember = true;
let points = 120;

console.log("age =", age, ", temperature =", temperature);
console.log("isMember =", isMember, ", points =", points);
console.log("--- Ternary Operator Examples ---");

// Basic ternary operator
let canVote = age >= 18 ? "Yes, can vote" : "No, cannot vote";
console.log("Can vote?", canVote);

// Multiple conditions
let weather = temperature > 30 ? "Hot" : 
              temperature > 20 ? "Warm" : 
              temperature > 10 ? "Cool" : "Cold";
console.log("Weather:", weather);

// Practical examples
// 1. User status
let userStatus = isMember ? (points > 100 ? "Premium" : "Basic") : "Guest";
console.log("User status:", userStatus);

// 2. Price calculation
let basePrice = 100;
let discount = isMember ? 0.2 : 0; // 20% discount for members
let finalPrice = basePrice * (1 - discount);
console.log("Final price: $" + finalPrice);

// 3. Message display
let message = age >= 21 
  ? "Welcome! You can enter and drink."
  : age >= 18 
    ? "Welcome! You can enter but cannot drink."
    : "Sorry, you're too young to enter.";
console.log("Club entry:", message);

// 4. Inline usage
console.log("You have " + (points > 100 ? "enough" : "insufficient") + " points");

// Nested ternary (use sparingly for readability)
let grade = score => 
  score >= 90 ? "A" :
  score >= 80 ? "B" :
  score >= 70 ? "C" :
  score >= 60 ? "D" : "F";

console.log("Score 85 gets grade:", grade(85));
console.log("Score 72 gets grade:", grade(72));

🔢 Bitwise Operators

Binary Operations

Bitwise operators work on 32-bit binary representations of numbers. They're less common in web development but useful for performance optimization and low-level programming.

Operator	Name	Example	Description
`&`	AND	`5 & 3`	1 (0101 & 0011 = 0001)
`\|`	OR	`5 \| 3`	7 (0101 \| 0011 = 0111)
`^`	XOR	`5 ^ 3`	6 (0101 ^ 0011 = 0110)
`~`	NOT	`~5`	-6 (~0101 = 1010)
`<<`	Left shift	`5 << 1`	10 (0101 << 1 = 1010)
`>>`	Right shift	`5 >> 1`	2 (0101 >> 1 = 0010)
`>>>`	Zero-fill right shift	`5 >>> 1`	2 (0101 >>> 1 = 0010)

🎯 Practical Uses

Bitwise operators are great for: flags/permissions, color manipulation, cryptography, and performance-critical calculations.

💡 Common Bitwise Tricks

n & 1 - Check if number is odd
n & (n-1) === 0 - Check if power of 2
n << 1 - Multiply by 2
n >> 1 - Divide by 2 (floor)
a ^ b ^ b - Swap numbers

JavaScript Editor

// Bitwise Operators - Work on binary representations

let a = 5;  // Binary: 0101
let b = 3;  // Binary: 0011

console.log("a =", a, "(binary: " + a.toString(2) + ")");
console.log("b =", b, "(binary: " + b.toString(2) + ")");
console.log("--- Bitwise Operations ---");

// Bitwise AND
let andResult = a & b; // 0101 & 0011 = 0001 (1)
console.log("a & b =", andResult, "(binary: " + andResult.toString(2) + ")");

// Bitwise OR
let orResult = a | b; // 0101 | 0011 = 0111 (7)
console.log("a | b =", orResult, "(binary: " + orResult.toString(2) + ")");

// Bitwise XOR
let xorResult = a ^ b; // 0101 ^ 0011 = 0110 (6)
console.log("a ^ b =", xorResult, "(binary: " + xorResult.toString(2) + ")");

// Bitwise NOT
let notResult = ~a; // ~0101 = 1010 (-6 in two's complement)
console.log("~a =", notResult, "(binary: " + (notResult >>> 0).toString(2) + ")");

// Left shift
let leftShift = a << 1; // 0101 << 1 = 1010 (10)
console.log("a << 1 =", leftShift, "(binary: " + leftShift.toString(2) + ")");

// Right shift
let rightShift = a >> 1; // 0101 >> 1 = 0010 (2)
console.log("a >> 1 =", rightShift, "(binary: " + rightShift.toString(2) + ")");

// Zero-fill right shift
let zeroFillRight = a >>> 1; // 0101 >>> 1 = 0010 (2)
console.log("a >>> 1 =", zeroFillRight, "(binary: " + zeroFillRight.toString(2) + ")");

// Practical use cases
console.log("\n--- Practical Use Cases ---");

// 1. Check if number is even/odd
function isEven(num) {
  return (num & 1) === 0;
}
console.log("5 is even?", isEven(5));
console.log("8 is even?", isEven(8));

// 2. Swap numbers without temporary variable
let x = 10, y = 20;
console.log("Before swap: x =", x, ", y =", y);
x = x ^ y;
y = x ^ y;
x = x ^ y;
console.log("After swap: x =", x, ", y =", y);

// 3. Multiply/divide by powers of 2
let number = 7;
console.log(number + " * 4 =", number << 2); // Multiply by 4
console.log(number + " / 2 =", number >> 1); // Divide by 2

🔍 Type Operators

Type Checking

Type operators help determine the type of values, which is crucial in JavaScript's dynamically typed environment.

Operator	Name	Example	Description
`typeof`	Type of	`typeof 42`	"number"
`instanceof`	Instance of	`arr instanceof Array`	true

`typeof` Return Values:

"undefined" - for undefined values
"boolean" - for boolean values
"number" - for numbers (including NaN)
"string" - for strings
"symbol" - for symbols (ES6)
"function" - for functions
"object" - for objects, arrays, and null

⚠️ `typeof` Quirks

typeof null returns "object" (historical bug)
typeof NaN returns "number"
typeof [] returns "object"
Use Array.isArray() for array detection

🎯 `instanceof` Usage

Checks if an object is an instance of a constructor function. Works with built-in types (Array, Date, RegExp) and custom constructors.

🔧 Better Type Checking

function getType(value) {
  if (value === null) return "null";
  if (Array.isArray(value)) return "array";
  return typeof value;
}

JavaScript Editor

// Type Operators - Check types of values

let values = [
  42,
  "Hello",
  true,
  null,
  undefined,
  [1, 2, 3],
  {name: "John"},
  function() {},
  Symbol("id"),
  new Date()
];

console.log("--- Type Checking with typeof ---");

// Check types of various values
values.forEach(value => {
  console.log(value + " -> " + typeof value);
});

// Special cases
console.log("\n--- Special Type Cases ---");
console.log("typeof null:", typeof null);           // "object" (historical bug)
console.log("typeof [1,2,3]:", typeof [1,2,3]);     // "object"
console.log("typeof NaN:", typeof NaN);             // "number"
console.log("typeof function(){}:", typeof function(){}); // "function"

// instanceof operator
console.log("\n--- instanceof Operator ---");

let arr = [1, 2, 3];
let date = new Date();
let regex = /pattern/;

console.log("arr instanceof Array:", arr instanceof Array);
console.log("date instanceof Date:", date instanceof Date);
console.log("regex instanceof RegExp:", regex instanceof RegExp);
console.log("arr instanceof Object:", arr instanceof Object);

// Custom constructor
function Person(name) {
  this.name = name;
}
let john = new Person("John");
console.log("john instanceof Person:", john instanceof Person);

// Type checking utility functions
console.log("\n--- Type Checking Utilities ---");

function getType(value) {
  if (value === null) return "null";
  if (Array.isArray(value)) return "array";
  return typeof value;
}

console.log("getType(null):", getType(null));
console.log("getType([1,2,3]):", getType([1,2,3]));
console.log("getType(42):", getType(42));

// Practical type checking
function processValue(value) {
  if (typeof value === 'number') {
    return value * 2;
  } else if (typeof value === 'string') {
    return value.toUpperCase();
  } else if (Array.isArray(value)) {
    return value.length;
  } else {
    return "Unknown type";
  }
}

console.log("\n--- Type-based Processing ---");
console.log("processValue(10):", processValue(10));
console.log("processValue('hello'):", processValue('hello'));
console.log("processValue([1,2,3]):", processValue([1,2,3]));

🎮 Practice: Build Utility Functions

Apply all the operators you've learned by implementing these utility functions. Each function uses different types of operators to solve common programming problems.

JavaScript Editor

// Practice: Calculator and Validator Functions
// Implement the following functions using different operators

// 1. Arithmetic Calculator
function calculate(a, b, operator) {
  switch(operator) {
    case '+': return a + b;
    case '-': return a - b;
    case '*': return a * b;
    case '/': return b !== 0 ? a / b : "Error: Division by zero";
    case '%': return a % b;
    case '**': return a ** b;
    default: return "Error: Invalid operator";
  }
}

// 2. Age Validator
function validateAge(age) {
  return age >= 0 && age <= 150 ? "Valid age" : "Invalid age";
}

// 3. Login System
function canLogin(username, password, isActive) {
  return username && password && isActive;
}

// 4. Grade Calculator
function calculateGrade(score) {
  return score >= 90 ? "A" :
         score >= 80 ? "B" :
         score >= 70 ? "C" :
         score >= 60 ? "D" : "F";
}

// 5. Discount Calculator
function calculateDiscount(price, isMember, hasCoupon) {
  let discount = 0;
  if (isMember) discount += 0.1; // 10% member discount
  if (hasCoupon) discount += 0.05; // 5% coupon discount
  return price * (1 - discount);
}

// Test the functions
console.log("=== CALCULATOR TESTS ===");
console.log("5 + 3 =", calculate(5, 3, '+'));
console.log("10 - 4 =", calculate(10, 4, '-'));
console.log("6 * 7 =", calculate(6, 7, '*'));
console.log("15 / 3 =", calculate(15, 3, '/'));
console.log("15 / 0 =", calculate(15, 0, '/'));
console.log("2 ** 8 =", calculate(2, 8, '**'));

console.log("\n=== VALIDATION TESTS ===");
console.log("Age 25:", validateAge(25));
console.log("Age -5:", validateAge(-5));
console.log("Age 200:", validateAge(200));

console.log("\n=== LOGIN TESTS ===");
console.log("Login (user, pass, active):", canLogin("john", "secret", true));
console.log("Login (user, '', active):", canLogin("john", "", true));

console.log("\n=== GRADE TESTS ===");
console.log("Score 85:", calculateGrade(85));
console.log("Score 72:", calculateGrade(72));
console.log("Score 95:", calculateGrade(95));

console.log("\n=== DISCOUNT TESTS ===");
console.log("$100, member, no coupon:", calculateDiscount(100, true, false));
console.log("$100, not member, with coupon:", calculateDiscount(100, false, true));
console.log("$100, member, with coupon:", calculateDiscount(100, true, true));

// Your Challenge: Create a function that uses bitwise operators to check if a number is a power of 2
function isPowerOfTwo(num) {
  // Implement this function using bitwise operators
  return num > 0 && (num & (num - 1)) === 0;
}

console.log("\n=== BITWISE CHALLENGE ===");
console.log("8 is power of 2?", isPowerOfTwo(8));
console.log("7 is power of 2?", isPowerOfTwo(7));
console.log("16 is power of 2?", isPowerOfTwo(16));

💪 Additional Challenges:

Create a function that validates email format
Build a simple calculator with all operations
Create a password strength checker

Implement a temperature converter
Create a function that formats currency
Build a random number generator with range

📚 Operator Summary

Key Takeaways:

Use appropriate operators for different tasks
Always prefer strict equality (===/!==)
Understand operator precedence for complex expressions
Use ternary operator for simple conditional assignments

Best Practices:

Use parentheses to clarify complex expressions
Avoid nested ternary operators for readability
Use logical operators for default values and conditional execution
Understand truthy/falsy values in logical operations

Now that you understand operators, you're ready to learn how to control the flow of your programs!

Next: Control Flow →

📋 Operators Quick Reference

Arithmetic:

+ - * / % ** ++ --

Assignment:

= += -= *= /= %= **=

Comparison:

== === != !== > < >= <=

Logical:

&& || ! ??

Bitwise:

& | ^ ~ << >> >>>

Other:

? : typeof instanceof

← Data Types Control Flow →

JavaScript Tutorial

JavaScript Operators

📊 Operator Categories

Arithmetic

Assignment

Comparison

Logical

Ternary

Bitwise

Type

Other

➕ Arithmetic Operators

Mathematical Operations

🎯 Operator Precedence

💡 String Concatenation

Try Arithmetic Operations:

🔄 Assignment Operators

Assigning Values

⚠️ Chained Assignment

🎯 Destructuring Assignment (ES6)

⚖️ Comparison Operators

Comparing Values

🚫 Avoid Loose Equality

🔍 Type Coercion Quirks

🔗 Logical Operators

Boolean Logic

⚡ Short-circuit Evaluation

🎯 Truthy and Falsy Values

❓ Ternary Operator

Conditional Operator

Best Practices:

💡 When to Use Ternary

🚫 Avoid This (Too Complex):

🔢 Bitwise Operators

Binary Operations

🎯 Practical Uses

💡 Common Bitwise Tricks

🔍 Type Operators

Type Checking

typeof Return Values:

⚠️ typeof Quirks

🎯 instanceof Usage

🔧 Better Type Checking

🎮 Practice: Build Utility Functions

💪 Additional Challenges:

📚 Operator Summary

Key Takeaways:

Best Practices:

📋 Operators Quick Reference

Arithmetic:

Assignment:

Comparison:

Logical:

Bitwise:

Other:

Follow Us

Our Tools

Our Company

Special Tools

`typeof` Return Values:

⚠️ `typeof` Quirks

🎯 `instanceof` Usage