# JavaScript Operators: The Basics You Need to Know

### Introduction

When you begin learning JavaScript, one of the most important concepts you encounter is **operators**. Operators are fundamental because they allow your program to perform actions such as calculations, comparisons, and logical decisions.

Every real-world application—whether it is an e-commerce website, authentication system, or dashboard relies heavily on operators.

In this blog, we will move step by step:

*   From basic understanding
    
*   To real-world usage
    
*   To practical coding patterns
    

### What Are Operators?

Operators are **symbols used to perform operations on values (operands)**.

```javascript
let result = 10 + 5;
```

In this example:

*   `10` and `5` are operands
    
*   `+` is the operator
    
*   The result is `15`
    

Operators tell JavaScript what action needs to be performed.

### 1\. Arithmetic Operators

Arithmetic operators are used for mathematical calculations.

| Operator | Meaning |
| --- | --- |
| + | Addition |
| \- | Subtraction |
| \* | Multiplication |
| / | Division |
| % | Modulus (remainder) |

### Basic Example

```javascript
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.33
console.log(a % b); // 1
```

### Real-World Example: Shopping Cart Calculation

In an e-commerce application, arithmetic operators are used to calculate total price:

```js
let price = 499;
let quantity = 2;
let discount = 100;

let total = (price * quantity) - discount;

console.log("Total price:", total);
```

This is exactly how most online platforms calculate totals before checkout.

### Modulus Operator in Real Use

```javascript
console.log(10 % 2); // 0
console.log(7 % 2);  // 1
```

Use cases:

*   Checking even or odd numbers
    
*   Alternating UI elements (for example, table rows)
    
*   Pagination logic
    

### 2\. Comparison Operators

Comparison operators compare two values and return a boolean (`true` or `false`).

| Operator | Meaning |
| --- | --- |
| \== | Equal (loose comparison) |
| \=== | Strict equal |
| != | Not equal |
| \> | Greater than |
| < | Less than |

### Basic Example

```js
console.log(5 > 3); // true
console.log(2 < 1); // false
```

* * *

### Critical Concept: `==` vs `===`

```js
console.log(5 == "5");   // true
console.log(5 === "5");  // false
```

*   `==` performs type conversion
    
*   `===` checks both value and type
    

* * *

### Real-World Problem

```javascript
let input = "0";

if (input == 0) {
  console.log("Accepted");
}
```

This may lead to unexpected behavior because `"0"` is converted to `0`.

### Best Practice

Always prefer strict comparison:

```js
if (input === 0) {
  // safer comparison
}
```

### Real-World Example: Authentication

```javascript
let enteredPassword = "1234";
let actualPassword = 1234;

if (enteredPassword === actualPassword) {
  console.log("Login successful");
} else {
  console.log("Invalid credentials");
}
```

This prevents logical and security issues.

## 3\. Logical Operators

Logical operators are used to combine multiple conditions.

| Operator | Meaning |  |  |
| --- | --- | --- | --- |
| && | AND |  |  |
|  |  |  | OR |
| ! | NOT |  |  |

### AND Operator (`&&`)

All conditions must be true.

```javascript
let age = 20;
let hasID = true;

if (age > 18 && hasID) {
  console.log("Access granted");
}
```

Real-world usage:

*   Verification systems
    
*   Entry conditions
    
*   Form validation
    

### OR Operator (`||`)

At least one condition must be true.

```javascript
let isAdmin = false;
let isEditor = true;

if (isAdmin || isEditor) {
  console.log("Access granted");
}
```

Real-world usage:

*   Role-based permissions
    
*   Feature access control
    

### NOT Operator (`!`)

Reverses a boolean value.

```javascript
let isLoggedIn = false;

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

## Truth Tables

### AND (`&&`)

| A | B | Result |
| --- | --- | --- |
| true | true | true |
| true | false | false |
| false | true | false |
| false | false | false |

### OR (`||`)

| A | B | Result |
| --- | --- | --- |
| true | true | true |
| true | false | true |
| false | true | true |
| false | false | false |

## 4\. Assignment Operators

Assignment operators are used to assign and update values.

| Operator | Meaning |
| --- | --- |
| \= | Assign value |
| += | Add and assign |
| \-= | Subtract and assign |

### Example

```javascript
let balance = 1000;

balance += 500; // deposit
balance -= 200; // withdrawal

console.log(balance); // 1300
```

### Real-World Use Case

These operators are commonly used in:

*   Banking systems
    
*   Counters (likes, views)
    
*   Inventory updates
    

## Mini Project: Combining All Operators

Let’s simulate a small real-world scenario.

### Problem

*   Calculate total price
    
*   Apply discount if user is eligible
    
*   Display final result
    

### Solution

```javascript
let price = 200;
let quantity = 3;
let age = 22;
let isMember = true;

// Step 1: Calculate total
let total = price * quantity;

// Step 2: Apply discount
if (isMember && age > 18) {
  total -= 100;
}

// Step 3: Output result
console.log("Final amount:", total);
```

## Common Mistakes

### 1\. Using `==` instead of `===`

```js
// Incorrect
if (value == "10")

// Correct
if (value === "10")
```

### 2\. Unexpected Type Conversion

```javascript
console.log("5" + 2); // "52"
```

JavaScript converts numbers to strings in this case.

### 3\. Misunderstanding Logical Conditions

```js
if (true && false) // always false
```

Understanding truth tables is important.

## Operator Categories Summary

| Category | Purpose |
| --- | --- |
| Arithmetic | Perform calculations |
| Comparison | Compare values |
| Logical | Combine conditions |
| Assignment | Update values |

## Conclusion

Operators are the foundation of JavaScript logic. They allow you to:

*   Perform calculations
    
*   Make decisions
    
*   Control application flow
    

Without operators, writing meaningful programs would not be possible.

* * *

*I write articles on* [***blog.prakashtsx.com***](http://blog.prakashtsx.com) *and also post development-related content on:*

*   [**Twitter / X**](https://claude.ai/chat/1564e342-3e7b-40fd-ad95-c9d167001fcd#)
    
*   [**LinkedIn**](https://claude.ai/chat/1564e342-3e7b-40fd-ad95-c9d167001fcd#)