# JavaScript Operators: The Basics You Need to Know

## **Introduction**

Think about using a calculator. You input numbers and use buttons like +, -, \*, and / to perform calculations. Operators in programming work the same way. They are symbols that tell JavaScript to perform specific actions on values.

In JavaScript, operators are tools that help you perform calculations, make comparisons, and combine conditions. In this blog, we will learn about the most important operators you will use every day: arithmetic operators, comparison operators, logical operators, and assignment operators.

* * *

## **1\. What Are Operators?**

An **operator** is a symbol that performs an action on one or more values. The values that operators work on are called **operands**.

### **Simple Analogy**

Imagine you are in a shop buying notebooks:

*   5 notebooks (operand) + 3 notebooks (operand) = 8 notebooks (result)
    
*   The "+" is the operator
    

For example:

```javascript
10 + 5  // 10 and 5 are operands, + is the operator
```

### **Types of Operators**

JavaScript has several types of operators:

1.  Arithmetic operators (for math)
    
2.  Comparison operators (for comparing)
    
3.  Logical operators (for combining conditions)
    
4.  Assignment operators (for assigning values)
    

Each type serves a different purpose, and we will learn about all of them in this blog.

* * *

## **2\. Arithmetic Operators**

Arithmetic operators perform mathematical calculations. They work just like the math you learned in school.

### **The Five Main Arithmetic Operators**

#### **Addition (+)**

Adds two numbers together.

```javascript
let a = 10;
let b = 5;
let sum = a + b;

console.log(sum); // Output: 15
```

You can also use it with strings (we will learn about this later):

```javascript
let firstName = "Ashish";
let lastName = "Saini";
let fullName = firstName + " " + lastName;

console.log(fullName); // Output: Ashish Saini
```

#### **Subtraction (-)**

Subtracts the second number from the first number.

```javascript
let price = 500;
let discount = 100;
let finalPrice = price - discount;

console.log(finalPrice); // Output: 400
```

#### **Multiplication (\*)**

Multiplies two numbers.

```javascript
let quantity = 5;
let pricePerUnit = 20;
let totalCost = quantity * pricePerUnit;

console.log(totalCost); // Output: 100
```

#### **Division (/)**

Divides the first number by the second number.

```javascript
let totalMarks = 480;
let numberOfSubjects = 6;
let marksPerSubject = totalMarks / numberOfSubjects;

console.log(marksPerSubject); // Output: 80
```

#### **Modulus (%)**

Returns the remainder after division. This is very useful for checking if a number is even or odd.

```javascript
let number = 10;
let remainder = number % 3;

console.log(remainder); // Output: 1
```

Why? Because 10 divided by 3 equals 3 with a remainder of 1.

### **Arithmetic Operators Table**

| **Operator** | **Name** | **Example** | **Result** |
| --- | --- | --- | --- |
| + | Addition | 10 + 5 | 15 |
| \- | Subtraction | 10 - 5 | 5 |
| \* | Multiplication | 10 \* 5 | 50 |
| / | Division | 10 / 5 | 2 |
| % | Modulus (Remainder) | 10 % 3 | 1 |

* * *

## **3\. Comparison Operators**

Comparison operators compare two values and return either `true` or `false`. They are useful for making decisions in your code.

### **The Main Comparison Operators**

#### **Greater Than (>)**

Checks if the first value is greater than the second value.

```javascript
let age = 20;
let minAge = 18;

console.log(age > minAge); // Output: true
```

```javascript
let score = 75;
console.log(score > 80); // Output: false
```

#### **Less Than (<)**

Checks if the first value is less than the second value.

```javascript
let temperature = 10;
console.log(temperature < 15); // Output: true
```

```javascript
let price = 500;
console.log(price < 300); // Output: false
```

#### **Greater Than or Equal To (>=)**

Checks if the first value is greater than or equal to the second value.

```javascript
let age = 18;
console.log(age >= 18); // Output: true
```

```javascript
let marks = 75;
console.log(marks >= 80); // Output: false
```

#### **Less Than or Equal To (<=)**

Checks if the first value is less than or equal to the second value.

```javascript
let speed = 60;
console.log(speed <= 80); // Output: true
```

```javascript
let weight = 100;
console.log(weight <= 90); // Output: false
```

#### **Equal To (==)**

Checks if two values are equal. This operator does type coercion, meaning it converts types to compare values.

```javascript
let a = 5;
let b = "5";

console.log(a == b); // Output: true
```

Even though `a` is a number and `b` is a string, JavaScript converts one to match the other and returns true.

More examples:

```javascript
let x = 10;
let y = 10;
console.log(x == y); // Output: true

let name1 = "Ashish";
let name2 = "Ashish";
console.log(name1 == name2); // Output: true
```

#### **Strict Equal To (===)**

Checks if two values are equal AND if they are the same type. This is the recommended way to compare values.

```javascript
let a = 5;
let b = "5";

console.log(a === b); // Output: false
```

Now the result is false because 5 (number) and "5" (string) are different types.

More examples:

```javascript
let x = 10;
let y = 10;
console.log(x === y); // Output: true

let c = 5;
let d = 5.0;
console.log(c === d); // Output: true (both are numbers)
```

#### **Not Equal To (!=)**

Checks if two values are NOT equal. Like ==, it does type coercion.

```javascript
let a = 5;
let b = "5";

console.log(a != b); // Output: false (they are equal after type coercion)
```

```javascript
let x = 10;
let y = 20;
console.log(x != y); // Output: true
```

#### **Strict Not Equal To (!==)**

Checks if two values are NOT equal OR if they are different types. This is the recommended way.

```javascript
let a = 5;
let b = "5";

console.log(a !== b); // Output: true (different types)
```

```javascript
let x = 10;
let y = 10;
console.log(x !== y); // Output: false (same value and type)
```

### **Important: == vs ===**

This is a very important concept. Let's understand it with more examples:

```javascript
// Using == (loose equality)
console.log(0 == false);      // Output: true
console.log("" == false);     // Output: true
console.log(null == undefined); // Output: true
console.log("5" == 5);        // Output: true

// Using === (strict equality)
console.log(0 === false);      // Output: false
console.log("" === false);     // Output: false
console.log(null === undefined); // Output: false
console.log("5" === 5);        // Output: false
```

### **Best Practice**

Always use `===` and `!==` in JavaScript. They are safer and more predictable because they do not do type coercion. Using `==` can lead to unexpected results.

### **Comparison Operators Table**

| **Operator** | **Name** | **Example** | **Result** |
| --- | --- | --- | --- |
| \> | Greater than | 10 > 5 | true |
| < | Less than | 10 < 5 | false |
| \>= | Greater than or equal | 10 >= 10 | true |
| <= | Less than or equal | 10 <= 5 | false |
| \== | Equal (loose) | "5" == 5 | true |
| \=== | Equal (strict) | "5" === 5 | false |
| != | Not equal (loose) | "5" != 5 | false |
| !== | Not equal (strict) | "5" !== 5 | true |

* * *

## **4\. Logical Operators**

Logical operators combine multiple conditions to make more complex decisions. They return `true` or `false` based on the conditions.

### **The Three Main Logical Operators**

#### **AND (&&)**

The AND operator returns `true` only if BOTH conditions are true. If even one condition is false, the result is false.

Think of it like this: "I will go to the movie IF I have time AND I have money".

```javascript
let hasTime = true;
let hasMoney = true;

if (hasTime && hasMoney) {
  console.log("Let's go to the movie!");
}
// Output: Let's go to the movie!
```

```javascript
let hasTime = true;
let hasMoney = false;

if (hasTime && hasMoney) {
  console.log("Let's go to the movie!");
} else {
  console.log("I cannot go because I don't have money");
}
// Output: I cannot go because I don't have money
```

#### **OR (||)**

The OR operator returns `true` if AT LEAST ONE condition is true. It returns false only if both conditions are false.

Think of it like this: "I will have tea OR coffee" (I am satisfied with either one).

```javascript
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("No college today!");
}
// Output: No college today!
```

Even though `isHoliday` is false, `isWeekend` is true, so the overall condition is true.

#### **NOT (!)**

The NOT operator reverses the boolean value. If a condition is true, NOT makes it false. If a condition is false, NOT makes it true.

Think of it like this: "NOT raining" means it is sunny.

```javascript
let isRaining = true;

if (!isRaining) {
  console.log("Let's play outside");
} else {
  console.log("Let's stay inside");
}
// Output: Let's stay inside
```

Since `isRaining` is true, `!isRaining` is false.

```javascript
let isRaining = false;

if (!isRaining) {
  console.log("Let's play outside");
} else {
  console.log("Let's stay inside");
}
// Output: Let's play outside
```

Now `isRaining` is false, so `!isRaining` is true.

### **Combining Multiple Logical Operators**

You can combine multiple logical operators to create complex conditions:

```javascript
let age = 22;
let hasLicense = true;
let isInsured = true;

if (age >= 18 && hasLicense && isInsured) {
  console.log("You can drive safely");
} else {
  console.log("You cannot drive");
}
// Output: You can drive safely
```

All three conditions must be true for the message to print.

### **Truth Table for Logical Operators**

#### **AND (&&) Truth Table**

| **A** | **B** | **A && B** |
| --- | --- | --- |
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |

Remember: AND returns true only when both are true.

#### **OR (||) Truth Table**

| **A** | **B** | **A || B** |
| --- | --- | --- |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |

Remember: OR returns false only when both are false.

#### **NOT (!) Truth Table**

| **A** | **!A** |
| --- | --- |
| true | false |
| false | true |

Remember: NOT flips the value.

### **Logical Operators Table**

| **Operator** | **Name** | **Example** | **Result** |
| --- | --- | --- | --- |
| && | AND | true && false | false |
| || | OR | true || false | true |
| ! | NOT | !true | false |

* * *

## **5\. Assignment Operators**

Assignment operators assign values to variables. The most basic one is `=`, but there are others that combine assignment with other operations.

### **Basic Assignment (=)**

The `=` operator assigns a value to a variable.

```javascript
let name = "Ashish";
let age = 20;
let score = 95;

console.log(name); // Output: Ashish
console.log(age);  // Output: 20
console.log(score); // Output: 95
```

### **Addition Assignment (+=)**

Adds a value to the variable and assigns the result back to the variable. It is a shorthand for `x = x + y`.

```javascript
let count = 10;
count += 5; // Same as: count = count + 5

console.log(count); // Output: 15
```

Step by step:

*   count is 10
    
*   count += 5 means count = count + 5, which is count = 10 + 5
    
*   count becomes 15
    

### **Subtraction Assignment (-=)**

Subtracts a value from the variable and assigns the result back. Shorthand for `x = x - y`.

```javascript
let money = 100;
money -= 30; // Same as: money = money - 30

console.log(money); // Output: 70
```

### **Multiplication Assignment (\*=)**

Multiplies the variable by a value and assigns the result back. Shorthand for `x = x * y`.

```javascript
let price = 50;
price *= 2; // Same as: price = price * 2

console.log(price); // Output: 100
```

### **Division Assignment (/=)**

Divides the variable by a value and assigns the result back. Shorthand for `x = x / y`.

```javascript
let total = 100;
total /= 5; // Same as: total = total / 5

console.log(total); // Output: 20
```

### **When to Use Assignment Operators**

Assignment operators are useful when you want to update a variable based on its current value.

Without assignment operators:

```javascript
let score = 10;
score = score + 5;
score = score + 3;
score = score - 2;

console.log(score); // Output: 16
```

With assignment operators (cleaner):

```javascript
let score = 10;
score += 5;
score += 3;
score -= 2;

console.log(score); // Output: 16
```

### **Assignment Operators Table**

| **Operator** | **Same As** | **Example** | **Result** |
| --- | --- | --- | --- |
| \= | Assignment | x = 10 | x is 10 |
| += | x = x + y | x = 5; x += 3 | x is 8 |
| \-= | x = x - y | x = 10; x -= 4 | x is 6 |
| \*= | x = x \* y | x = 5; x \*= 2 | x is 10 |
| /= | x = x / y | x = 20; x /= 4 | x is 5 |

* * *

## **Operator Categories Summary Table**

| **Category** | **Operators** | **Purpose** | **Example** |
| --- | --- | --- | --- |
| **Arithmetic** | +, -, \*, /, % | Perform math | 10 + 5 = 15 |
| **Comparison** | \>, <, >=, <=, ===, !== | Compare values | 10 > 5 = true |
| **Logical** | &&, ||, ! | Combine conditions | true && false = false |
| **Assignment** | \=, +=, -=, \*=, /= | Assign values | x += 5 |

* * *

## **Common Mistakes to Avoid**

### **Mistake 1: Using == Instead of ===**

```javascript
// Wrong
if (userInput == 5) { // Dangerous!
  // Code here
}

// Correct
if (userInput === 5) { // Safe!
  // Code here
}
```

Always use `===` for comparisons.

### **Mistake 2: Forgetting Parentheses with Logical Operators**

JavaScript

```javascript
// Confusing
let result = age > 18 && hasLicense || hasMoney;

// Clear
let result = (age > 18 && hasLicense) || hasMoney;
```

Use parentheses to make your intent clear.

### **Mistake 3: Using = Instead of ==**

```javascript
// Wrong
if (age = 18) { // This assigns 18 to age instead of comparing
  // Code here
}

// Correct
if (age === 18) { // This compares
  // Code here
}
```

Be careful not to confuse assignment (=) with comparison (=== or ==).

* * *

## **Summary**

1.  **Operators** are symbols that perform actions on values
    
2.  **Arithmetic operators** (+, -, \*, /, %) perform math calculations
    
3.  **Comparison operators** (>, <, >=, <=, ===, !==) compare values and return true or false
    
4.  **Always use ===** instead of == for safer comparisons
    
5.  **Logical operators** (&&, ||, !) combine conditions
    
    *   AND (&&) returns true only if both conditions are true
        
    *   OR (||) returns true if at least one condition is true
        
    *   NOT (!) reverses the boolean value
        
6.  **Assignment operators** (=, +=, -=, \*=, /=) assign or update values
    
7.  Use parentheses to make complex conditions clear