JavaScript Operators — Complete Guide with Examples

JavaScript Operators — Complete Guide with Examples

JavaScript Operators — Complete Guide with Examples | TipsInLearning
Home JavaScript Operators
Web Development

JavaScript Operators

Master JavaScript operators — learn arithmetic, comparison, logical, and assignment operators. Complete guide with practical examples.

14 min read
Beginner
Programming
Free Course

Contents

Course ProgressJavaScript
What You'll Learn
Arithmetic operators
Assignment operators
Comparison operators
Logical operators
Increment & decrement
Ternary operator

JavaScript Operators Introduction

Operators are symbols that perform operations on values and variables. They let you do math, compare numbers, combine conditions, and more. Understanding operators is essential for writing functional code.

Types of operators

  • Arithmetic — Math operations like +, -, *, /
  • Assignment — Assign values with =, +=, -=
  • Comparison — Compare values with ==, ===, <, >
  • Logical — Combine conditions with &&, ||, !

Arithmetic Operators

Arithmetic operators perform math calculations. They work with numbers to produce results.

Arithmetic operators list

OperatorNameExampleResult
+Addition5 + 38
-Subtraction5 - 32
*Multiplication5 * 315
/Division15 / 35
%Modulo (remainder)10 % 31
**Exponent2 ** 38

Arithmetic examples

JavaScript — Arithmetic Operators
let a = 10;
let b = 3;

a + b  // 13 (addition)
a - b  // 7 (subtraction)
a * b  // 30 (multiplication)
a / b  // 3.33 (division)
a % b  // 1 (remainder)
a ** b // 1000 (exponent)

Assignment Operators

Assignment operators assign values to variables. They can also perform an operation and assign the result.

Assignment examples

JavaScript — Assignment Operators
let x = 10;

x = 20;    // = (assign)
x += 5;   // x = x + 5 (25)
x -= 3;   // x = x - 3 (22)
x *= 2;   // x = x * 2 (44)
x /= 4;   // x = x / 4 (11)
x %= 3;   // x = x % 3 (2)

Comparison Operators

Comparison operators compare two values and return true or false. Use === instead of == for accurate results.

Comparison examples

JavaScript — Comparison Operators
let a = 5;
let b = "5";

a === b  // false (different types)
a == b   // true (same value)
a !== b  // true (not equal)

a < 10   // true (less than)
a > 3    // true (greater than)
a <= 5   // true (less or equal)
a >= 5   // true (greater or equal)
Important: Always use === for comparison. It checks both value AND type, avoiding confusing bugs.

Logical Operators

Logical operators combine conditions to create complex true/false results. They're essential for decision-making in code.

Logical operators

  • && — AND: true if both conditions are true
  • || — OR: true if at least one condition is true
  • ! — NOT: reverses true/false

Logical examples

JavaScript — Logical Operators
let age = 25;
let hasID = true;

// AND (&&)
age >= 18 && hasID  // true (both true)

// OR (||)
age < 18 || hasID  // true (one is true)

// NOT (!)
!hasID  // false (reverses)

Increment & Decrement

The ++ operator increases a number by 1. The -- operator decreases by 1. These are commonly used in loops.

Increment and decrement

JavaScript — Increment & Decrement
let count = 0;

count++  // 1 (increment)
count++  // 2
count--  // 1 (decrement)
count--  // 0

// In loops
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}

Ternary Operator

The ternary operator is a shorthand for if/else. It tests a condition and returns one value if true, another if false.

Ternary examples

JavaScript — Ternary Operator
let age = 20;

// condition ? value if true : value if false
age >= 18 ? "Adult" : "Minor"  // "Adult"

let message = age < 13 ? "Kid" : "Teenager";
console.log(message);  // "Teenager"

Typeof Operator

The typeof operator returns the type of a value. It's useful to check if a variable is a number, string, object, etc.

Typeof examples

JavaScript — Typeof Operator
typeof 42         // "number"
typeof "Hello"     // "string"
typeof true       // "boolean"
typeof undefined   // "undefined"
typeof {name: "John"}  // "object"

Best Practices

1
Use === not ==
Always compare both value and type
2
Use parentheses for clarity
Make complex conditions easy to read
3
Understand operator precedence
Know which operators run first
Operators Summary
1Operators perform math, comparisons, and logic
2Arithmetic: +, -, *, /, %, **
3Always use === for comparisons
4Logical: &&, ||, ! combine conditions
5Ternary is shorthand for if/else
6Typeof checks the type of values

Frequently Asked Questions

Operators are symbols that perform operations on values. They work with numbers, text, booleans, and variables to create results or make comparisons.

= assigns a value to a variable. == compares if two values are equal (but ignores type). === is better because it checks both value and type.

Arithmetic operators perform math operations like addition (+), subtraction (-), multiplication (*), and division (/). They work with numbers to produce results.

Logical operators are &&, ||, and !. They combine conditions to create true/false results. && (AND) is true when both conditions are true. || (OR) is true when one is true. ! (NOT) reverses true/false.

Always use === because it checks both value and type. == can cause unexpected behavior and bugs in your code. For example: 5 === "5" is false, but 5 == "5" is true.

The modulo (%) operator returns the remainder after division. Example: 10 % 3 = 1 because 10 divided by 3 is 3 remainder 1. It's useful for finding even/odd numbers.

Post a Comment