JavaScript Operators: The Basics You Need to Know

What Are Operators?

Operators perform operations on values.

let sum = 5 + 3;  // + is an operator

They're symbols that tell JavaScript what to do with values.

Think of operators as instructions:

+ → "add these"
> → "is this greater?"
&& → "are both true?"

Let's explore the essential operators.

1. Arithmetic Operators

Do math operations.

Addition (+)

let sum = 10 + 5;
console.log(sum); // 15

let price = 100;
let tax = 18;
let total = price + tax;
console.log(total); // 118

Subtraction (-)

let difference = 10 - 3;
console.log(difference); // 7

let balance = 1000;
let spent = 250;
let remaining = balance - spent;
console.log(remaining); // 750

Multiplication (*)

let product = 5 * 4;
console.log(product); // 20

let price = 50;
let quantity = 3;
let total = price * quantity;
console.log(total); // 150

Division (/)

let quotient = 20 / 4;
console.log(quotient); // 5

let totalMarks = 450;
let subjects = 5;
let average = totalMarks / subjects;
console.log(average); // 90

Modulus (%) - Remainder

let remainder = 10 % 3;
console.log(remainder); // 1

// Check if number is even
let num = 8;
console.log(num % 2); // 0 (even)

let num2 = 7;
console.log(num2 % 2); // 1 (odd)

Quick reference:

console.log(10 + 3);  // 13
console.log(10 - 3);  // 7
console.log(10 * 3);  // 30
console.log(10 / 3);  // 3.333...
console.log(10 % 3);  // 1

2. Comparison Operators

Compare values. Return true or false.

Equal (==) - Loose equality

console.log(5 == 5);      // true
console.log(5 == "5");    // true (converts string to number)
console.log(10 == 5);     // false

Strict Equal (===) - Exact equality

console.log(5 === 5);     // true
console.log(5 === "5");   // false (different types)
console.log(10 === 10);   // true

Not Equal (!=) - Loose inequality

console.log(5 != 3);      // true
console.log(5 != "5");    // false (converts and compares)
console.log(10 != 10);    // false

Strict Not Equal (!==)

console.log(5 !== 3);     // true
console.log(5 !== "5");   // true (different types)
console.log(10 !== 10);   // false

Greater Than (>)

console.log(10 > 5);      // true
console.log(5 > 10);      // false
console.log(5 > 5);       // false

Greater Than or Equal (>=)

console.log(10 >= 5);     // true
console.log(5 >= 5);      // true
console.log(3 >= 5);      // false

Less Than (<)

console.log(3 < 5);       // true
console.log(5 < 3);       // false
console.log(5 < 5);       // false

Less Than or Equal (<=)

console.log(3 <= 5);      // true
console.log(5 <= 5);      // true
console.log(7 <= 5);      // false

== vs === (IMPORTANT)

// == converts types before comparing
console.log(5 == "5");    // true (string "5" becomes number 5)
console.log(0 == false);  // true (false becomes 0)
console.log(null == undefined); // true

// === checks type AND value
console.log(5 === "5");   // false (number vs string)
console.log(0 === false); // false (number vs boolean)
console.log(null === undefined); // false

Best practice: Always use === and !==

// Avoid
if (age == 18) { }

// Better
if (age === 18) { }

3. Logical Operators

Combine conditions.

AND (&&) - Both must be true

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

Real example:

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("Can drive");
}

Both conditions must be true.

OR (||) - At least one must be true

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

Real example:

let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("No work today!");
}

One true is enough.

NOT (!) - Flip the value

console.log(!true);   // false
console.log(!false);  // true

Real example:

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in");
}

Checks if NOT logged in.

Truth table:

AND (&&):
true  && true  = true
true  && false = false
false && true  = false
false && false = false

OR (||):
true  || true  = true
true  || false = true
false || true  = true
false || false = false

NOT (!):
!true  = false
!false = true

Combining logical operators:

let age = 25;
let hasTicket = true;
let hasID = true;

if (age >= 18 && (hasTicket || hasID)) {
  console.log("Entry allowed");
}

4. Assignment Operators

Assign values to variables.

Basic assignment (=)

let x = 10;
let name = "Alice";
let isActive = true;

Add and assign (+=)

let score = 50;
score += 10;  // Same as: score = score + 10
console.log(score); // 60

Subtract and assign (-=)

let balance = 1000;
balance -= 200;  // Same as: balance = balance - 200
console.log(balance); // 800

Multiply and assign (*=)

let price = 100;
price *= 2;  // Same as: price = price * 2
console.log(price); // 200

Divide and assign (/=)

let total = 100;
total /= 4;  // Same as: total = total / 4
console.log(total); // 25

Modulus and assign (%=)

let num = 10;
num %= 3;  // Same as: num = num % 3
console.log(num); // 1

Comparison:

// Long way
let score = 50;
score = score + 10;

// Short way
let score = 50;
score += 10;

Both do the same thing. Second is cleaner.

Practical Examples

Example 1: Shopping cart

let cartTotal = 0;

// Add items
cartTotal += 500;  // Added phone case
cartTotal += 1500; // Added charger
cartTotal += 300;  // Added cable

console.log("Cart total: ₹" + cartTotal); // ₹2300

// Apply discount
cartTotal -= 200;
console.log("After discount: ₹" + cartTotal); // ₹2100

Example 2: Age verification

let age = 20;

if (age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

// With multiple conditions
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Can enter");
} else {
  console.log("Entry denied");
}

Example 3: Grade calculator

let marks = 85;

if (marks >= 90) {
  console.log("Grade: A");
} else if (marks >= 75) {
  console.log("Grade: B");
} else if (marks >= 60) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}

Example 4: Even/Odd checker

let number = 7;

if (number % 2 === 0) {
  console.log("Even");
} else {
  console.log("Odd");
}

Practice Assignment

// 1. Arithmetic operations
let a = 15;
let b = 4;

console.log("Addition:", a + b);       // 19
console.log("Subtraction:", a - b);    // 11
console.log("Multiplication:", a * b); // 60
console.log("Division:", a / b);       // 3.75
console.log("Modulus:", a % b);        // 3

// 2. Comparison operators
let num1 = 10;
let num2 = "10";

console.log("\n== comparison:");
console.log(num1 == num2);   // true (converts type)

console.log("\n=== comparison:");
console.log(num1 === num2);  // false (strict, checks type)

// 3. Logical operators
let age = 25;
let hasLicense = true;
let hasInsurance = false;

console.log("\nCan drive?");
console.log(age >= 18 && hasLicense); // true

console.log("\nHas documents?");
console.log(hasLicense || hasInsurance); // true

console.log("\nNeeds insurance?");
console.log(!hasInsurance); // true

// 4. Assignment operators
let score = 100;
console.log("\nInitial score:", score);

score += 50;
console.log("After bonus:", score); // 150

score -= 20;
console.log("After penalty:", score); // 130

score *= 2;
console.log("After doubling:", score); // 260

Common Mistakes

❌ Using = instead of ==

if (age = 18) { } // Assignment, not comparison!

✅ Use == or === for comparison

if (age === 18) { } // Correct

❌ Using == instead of ===

if (value == "5") { } // May give unexpected results

✅ Always use strict equality

if (value === "5") { } // Better

❌ Wrong logical operator

// Want: age 18 OR older AND has license
if (age >= 18 || hasLicense) { } // Wrong! OR allows minors with license

✅ Correct logic

if (age >= 18 && hasLicense) { } // Both required

Quick Reference

Arithmetic:

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

Comparison:

==   // Equal (loose)
===  // Equal (strict) ← Use this
!=   // Not equal (loose)
!==  // Not equal (strict) ← Use this
>    // Greater than
>=   // Greater or equal
<    // Less than
<=   // Less or equal

Logical:

&&   // AND (both must be true)
||   // OR (at least one true)
!    // NOT (flip value)

Assignment:

=    // Assign
+=   // Add and assign
-=   // Subtract and assign
*=   // Multiply and assign
/=   // Divide and assign

You Now Understand JavaScript Operators

Arithmetic operators for math
Comparison operators for conditions
Difference between == and ===
Logical operators for combining conditions
Assignment operators for cleaner code

Best Practices

Always use === and !==
- Avoid type coercion bugs
- More predictable code

Use assignment shortcuts

score += 10; // Not: score = score + 10

Parentheses for clarity

if ((age >= 18) && (hasLicense || hasPermit)) { }

Modulus for patterns

if (num % 2 === 0) { } // Even
if (index % 3 === 0) { } // Every 3rd item

Operators are the building blocks of logic.

Master them, and you can build any condition or calculation.

Learning JavaScript fundamentals? Follow for more beginner-friendly tutorials.

JavaScript Operators: The Basics You Need to Know

Comments

More from this blog

The Magic of this, call(), apply(), and bind() in JavaScript

Function Declaration vs Function Expression: What's the Difference?

JavaScript Arrays 101

Understanding Objects in JavaScript

Command Palette

Comments

More from this blog