Saravanan Lakshmanan

Posted on Jun 4

JavaScript Operators Explained with Examples

#webdev #tutorial #beginners #javascript

JavaScript Operators

Operators are special symbols used to perform operations on values and variables in JavaScript.

1. Arithmetic Operators

Used for mathematical calculations.

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
console.log(a ** b); // 1000

Common Operators: +, -, *, /, %, **

2. Increment & Decrement Operators

Used to increase or decrease a value by 1.

let x = 5;

console.log(++x); // 6 (Pre-increment)
console.log(x++); // 6 (Post-increment)
console.log(x);   // 7

Common Operators: ++, --

Key Difference:

++x → Increment first, then use the value.
x++ → Use the value first, then increment.

3. Assignment Operators

Used to assign or update values.

let x = 10;

x += 5; // x = 15
x -= 2; // x = 13
x *= 2; // x = 26

Common Operators: =, +=, -=, *=, /=, %=

4. Comparison Operators

Used to compare two values and return true or false.

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

Common Operators: ==, ===, !=, !==, >, <, >=, <=

Tip: Prefer === over == to avoid unexpected type conversion.

5. Logical Operators

Used to combine or invert conditions.

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

Common Operators:

&& (AND)
|| (OR)
! (NOT)

Short-Circuiting:

A && B → Returns B if A is truthy.
A || B → Returns A if A is truthy.

Example:

console.log(10 && 20); // 20
console.log(10 || 20); // 10

6. Conditional (Ternary) Operator

A shorthand version of if...else.

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Syntax:

condition ? valueIfTrue : valueIfFalse

7. Nullish Coalescing Operator (??)

Provides a default value only when the left side is null or undefined.

let username = null;

console.log(username ?? "Guest"); // Guest

Useful for handling missing values safely.

8. Optional Chaining Operator (?.)

Safely accesses object properties without throwing errors.

const user = null;

console.log(user?.name); // undefined

Useful when data may be missing.

9. Type Operators

Used to check data types or object relationships.

console.log(typeof "Hello"); // string
console.log(typeof 100);     // number

Common Operators: typeof, instanceof

10. Bitwise Operators

Perform operations at the binary level.

console.log(5 & 1); // 1
console.log(5 | 1); // 5

Mostly used in advanced programming scenarios.

11. String Operators

Used to combine strings.

let firstName = "John";
let lastName = "Doe";

console.log(firstName + " " + lastName);

Common Operators: +, +=

12. Spread & Rest Operator (...)

A powerful feature for arrays, objects, and function parameters.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

console.log(arr2);

Useful for copying, merging, and handling multiple values.

References:
https://www.w3schools.com/js/js_operators.asp
https://www.geeksforgeeks.org/javascript/javascript-operators/
https://www.programiz.com/javascript/operators

DEV Community