Operators - Performing Operations on Data

What are Operators?

Operators are symbols that perform operations on values (operands). They are the building blocks for creating expressions and performing calculations.

// Example: 5 + 3
// 5 and 3 are operands
// + is the operator
// Result: 8

Operator Classification

JavaScript Operators
│
├─ 1. Arithmetic Operators
├─ 2. Assignment Operators
├─ 3. Comparison Operators
├─ 4. Logical Operators
├─ 5. String Operators
├─ 6. Conditional (Ternary) Operator
├─ 7. Type Operators
├─ 8. Bitwise Operators
└─ 9. Special Operators

Types of Operators - Quick Reference

Type	Operators	Purpose
Arithmetic	`+` `-` `` `/` `%` `*` `++` `--`	Math operations
Assignment	`=` `+=` `-=` `*=` `/=` `%=`	Assign values
Comparison	`==` `===` `!=` `!==` `>` `<` `>=` `<=`	Compare values
Logical	`&&` `\|\|` `!` `??`	Boolean logic
String	`+`	Concatenation
Ternary	`? :`	Conditional
Type	`typeof` `instanceof` `in`	Check types
Bitwise	`&` `\|` `^` `~` `<<` `>>` `>>>`	Bit manipulation
Special	`?.` `...` `delete` `void` `,`	Special purposes

1. Arithmetic Operators

Perform mathematical calculations on numeric values.

Basic Arithmetic

let a = 10;
let b = 3;

console.log(a + b); // 13 (Addition)
console.log(a - b); // 7  (Subtraction)
console.log(a * b); // 30 (Multiplication)
console.log(a / b); // 3.333... (Division)
console.log(a % b); // 1  (Modulus - remainder)
console.log(a ** b); // 1000 (Exponentiation - 10^3)

Arithmetic Operators Table

Operator	Name	Example	Result	Description
`+`	Addition	`5 + 3`	`8`	Adds two numbers
`-`	Subtraction	`5 - 3`	`2`	Subtracts second from first
`*`	Multiplication	`5 * 3`	`15`	Multiplies two numbers
`/`	Division	`10 / 2`	`5`	Divides first by second
`%`	Modulus	`10 % 3`	`1`	Returns division remainder
`**`	Exponentiation	`2 ** 3`	`8`	Raises first to power of second
`++`	Increment	`x++`	`x + 1`	Increases value by 1
`--`	Decrement	`x--`	`x - 1`	Decreases value by 1

Increment & Decrement Operators

let x = 5;

// Post-increment (use then increment)
console.log(x++); // 5 (returns 5, then x becomes 6)
console.log(x); // 6

// Pre-increment (increment then use)
console.log(++x); // 7 (x becomes 7, then returns 7)
console.log(x); // 7

// Post-decrement
console.log(x--); // 7 (returns 7, then x becomes 6)
console.log(x); // 6

// Pre-decrement
console.log(--x); // 5 (x becomes 5, then returns 5)
console.log(x); // 5

Comparison: Pre vs Post Increment

Operator	Name	When Changes	Returns	Example
`x++`	Post-increment	After statement	Old value	`let y = x++` → y gets old x
`++x`	Pre-increment	Before statement	New value	`let y = ++x` → y gets new x
`x--`	Post-decrement	After statement	Old value	`let y = x--` → y gets old x
`--x`	Pre-decrement	Before statement	New value	`let y = --x` → y gets new x

Unary Plus and Minus

// Unary plus converts to number
console.log(+"5"); // 5 (string to number)
console.log(+true); // 1 (boolean to number)
console.log(+false); // 0

// Unary minus negates and converts
console.log(-"5"); // -5
console.log(-true); // -1

Interview Example:

let a = 5;
let b = a++ + ++a; // What is b?

// Step by step:
// a++ returns 5, then a becomes 6
// ++a makes a = 7, returns 7
// b = 5 + 7 = 12
// Final: a = 7, b = 12

console.log(a); // 7
console.log(b); // 12

Special Cases

// Division by zero
console.log(10 / 0); // Infinity
console.log(-10 / 0); // -Infinity

// NaN (Not a Number)
console.log("hello" * 5); // NaN
console.log(0 / 0); // NaN

// Precision issues
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false

// Solution for precision
console.log((0.1 * 10 + 0.2 * 10) / 10); // 0.3
console.log((0.1 + 0.2).toFixed(2)); // "0.30"

2. Assignment Operators

Assign values to variables.

Assignment Operators Table

Operator	Name	Example	Equivalent to	Result
`=`	Assignment	`x = 5`	-	`x = 5`
`+=`	Addition assignment	`x += 5`	`x = x + 5`	`x = 15`
`-=`	Subtraction assignment	`x -= 3`	`x = x - 3`	`x = 12`
`*=`	Multiplication assignment	`x *= 2`	`x = x * 2`	`x = 24`
`/=`	Division assignment	`x /= 4`	`x = x / 4`	`x = 6`
`%=`	Modulus assignment	`x %= 4`	`x = x % 4`	`x = 2`
`**=`	Exponentiation assignment	`x **= 3`	`x = x ** 3`	`x = 8`

Basic Assignment

let x = 10; // Assigns 10 to x

Compound Assignment

let x = 10;

x += 5; // x = x + 5  → 15
console.log(x); // 15

x -= 3; // x = x - 3  → 12
console.log(x); // 12

x *= 2; // x = x * 2  → 24
console.log(x); // 24

x /= 4; // x = x / 4  → 6
console.log(x); // 6

x %= 4; // x = x % 4  → 2
console.log(x); // 2

x **= 3; // x = x ** 3 → 8
console.log(x); // 8

Chained Assignment

// Assign same value to multiple variables
let a, b, c;
a = b = c = 10;

console.log(a); // 10
console.log(b); // 10
console.log(c); // 10

// Right to left evaluation
let x = (y = 5); // y gets 5, then x gets y's value
console.log(x); // 5
console.log(y); // 5

Destructuring Assignment

// Array destructuring
let [first, second] = [1, 2];
console.log(first); // 1
console.log(second); // 2

// Object destructuring
let { name, age } = { name: "John", age: 25 };
console.log(name); // 'John'
console.log(age); // 25

// Swap variables
let a = 1,
  b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

3. Comparison Operators

Compare two values and return boolean (true/false).

Comparison Operators Table

Operator	Name	Example	Result	Description
`==`	Equal (loose)	`5 == '5'`	`true`	Compares values (with type coercion)
`===`	Equal (strict)	`5 === '5'`	`false`	Compares values and types
`!=`	Not equal (loose)	`5 != '5'`	`false`	Checks inequality (with coercion)
`!==`	Not equal (strict)	`5 !== '5'`	`true`	Checks inequality (no coercion)
`>`	Greater than	`10 > 5`	`true`	Checks if left > right
`<`	Less than	`10 < 5`	`false`	Checks if left < right
`>=`	Greater than or equal	`10 >= 10`	`true`	Checks if left >= right
`<=`	Less than or equal	`5 <= 10`	`true`	Checks if left <= right

== vs === (Critical Interview Topic!)

Loose Equality (==) - Converts types before comparing
Strict Equality (===) - No type conversion

// Loose equality (==) - type coercion happens
console.log(5 == "5"); // true (string '5' converted to number)
console.log(0 == false); // true (false converted to 0)
console.log("" == false); // true (both converted to 0)
console.log(null == undefined); // true (special case)
console.log(1 == true); // true (true converted to 1)
console.log("0" == false); // true (both converted to 0)

// Strict equality (===) - no type conversion
console.log(5 === "5"); // false (different types)
console.log(0 === false); // false (different types)
console.log("" === false); // false (different types)
console.log(null === undefined); // false (different types)
console.log(1 === true); // false (different types)

Detailed Comparison Table: == vs ===

Comparison	`==` Result	`===` Result	Reason
`5 == '5'`	`true`	`false`	== converts string to number
`0 == false`	`true`	`false`	== converts false to 0
`'' == false`	`true`	`false`	== converts both to 0
`null == undefined`	`true`	`false`	== special rule
`NaN == NaN`	`false`	`false`	NaN never equals itself
`[] == false`	`true`	`false`	== converts [] to 0
`'0' == 0`	`true`	`false`	== converts string to number

Best Practice: Always use === and !== to avoid unexpected behavior.

Greater/Less Than Comparisons

// Number comparisons
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 >= 10); // true
console.log(5 <= 10); // true

// String comparisons (lexicographical)
console.log("apple" < "banana"); // true
console.log("Z" < "a"); // true (uppercase < lowercase in ASCII)
console.log("10" < "9"); // true (string comparison, not numeric)

// Mixed type comparisons
console.log("10" > 5); // true ('10' converted to 10)
console.log("5" < 10); // true ('5' converted to 5)

// Special cases
console.log(null > 0); // false
console.log(null == 0); // false
console.log(null >= 0); // true (weird!)

console.log(undefined > 0); // false
console.log(undefined < 0); // false
console.log(undefined == 0); // false

Special Comparison Cases

// NaN comparisons
console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true (correct way)
console.log(isNaN(NaN)); // true

// +0 vs -0
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false (can distinguish)

// null and undefined
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(null == 0); // false (special case)
console.log(undefined == 0); // false

4. Logical Operators

Combine or invert boolean values.

Logical Operators Table

Operator	Name	Returns	Short-circuits	Example
`&&`	Logical AND	First falsy or last value	Yes	`true && 'hello'` → `'hello'`
`\|\|`	Logical OR	First truthy or last value	Yes	`false \|\| 'hi'` → `'hi'`
`!`	Logical NOT	Boolean	No	`!true` → `false`
`??`	Nullish Coalescing	First non-nullish value	Yes	`null ?? 'default'` → `'default'`

AND Operator (&&)

// Both must be true for result to be true
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false

// Returns first falsy value or last value
console.log(0 && "hello"); // 0 (first falsy)
console.log("hello" && 0); // 0 (last value)
console.log("hello" && "world"); // 'world' (last value)
console.log(null && "hello"); // null (first falsy)

// Practical example
let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("Can drive"); // Executes if both conditions true
}

// Guard pattern
let user = { name: "John" };
user && console.log(user.name); // 'John' (safe access)

let noUser = null;
noUser && console.log(noUser.name); // null (prevents error)

OR Operator (||)

// At least one must be true for result to be true
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false

// Returns first truthy value or last value
console.log("hello" || 0); // 'hello' (first truthy)
console.log(0 || "hello"); // 'hello' (first truthy)
console.log(0 || null); // null (last value)
console.log("hi" || "hello"); // 'hi' (first truthy)

// Practical example
let isWeekend = true;
let isHoliday = false;

if (isWeekend || isHoliday) {
  console.log("No work!"); // Executes if either is true
}

// Default values
let userName = "";
let displayName = userName || "Guest"; // 'Guest'

let count = 0;
let value = count || 10; // 10 (but 0 is valid!)

NOT Operator (!)

// Inverts boolean value
console.log(!true); // false
console.log(!false); // true

// Double NOT converts to boolean
console.log(!!1); // true
console.log(!!0); // false
console.log(!!"hello"); // true
console.log(!!""); // false

// Practical example
let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please login"); // Executes if NOT logged in
}

// Negating comparisons
let age = 15;
if (!(age >= 18)) {
  console.log("Minor"); // Executes if NOT adult
}

Nullish Coalescing Operator (??)

// Returns right side only if left is null or undefined
console.log(null ?? "default"); // 'default'
console.log(undefined ?? "default"); // 'default'

// Unlike ||, it doesn't treat 0, false, '' as falsy
console.log(0 ?? 10); // 0 (0 is not null/undefined)
console.log(false ?? true); // false
console.log("" ?? "default"); // '' (empty string is not null/undefined)

// Comparison with ||
let count = 0;
console.log(count || 10); // 10 (|| treats 0 as falsy)
console.log(count ?? 10); // 0 (?? only checks null/undefined)

let value = "";
console.log(value || "default"); // 'default'
console.log(value ?? "default"); // '' (empty string)

// Practical use
let userAge = 0; // 0 is a valid age
let age = userAge ?? 18; // 0 (keeps 0)
let age2 = userAge || 18; // 18 (treats 0 as falsy)

Short-Circuit Evaluation (Interview Topic!)

// && stops at first falsy value
console.log(false && "hello"); // false (doesn't evaluate 'hello')
console.log(true && "hello"); // 'hello' (evaluates and returns)

// Practical: Conditional execution
let isLoggedIn = true;
isLoggedIn && console.log("Welcome!"); // Logs 'Welcome!'

// || stops at first truthy value
console.log(true || "hello"); // true (doesn't evaluate 'hello')
console.log(false || "hello"); // 'hello' (evaluates and returns)

// Practical: Default values
let config = null;
let settings = config || { theme: "light" }; // Uses default

// Can prevent errors
let user = null;
let name = user && user.name; // null (safe, no error)
// let name = user.name; // Error: Cannot read property 'name' of null

// Complex example
function processUser(user) {
  // If no user, return early
  if (!user) return;

  // Process user (short-circuit evaluation)
  user && user.active && console.log("Processing active user");
}

Truth Table

A	B	A && B	A \|\| B	!A	A ?? B
true	true	true	true	false	true
true	false	false	true	false	true
false	true	false	true	true	true
false	false	false	false	true	false
null	5	null	5	false	5
0	5	0	5	true	0

Logical Operator Precedence

// ! has highest precedence, then &&, then ||
console.log(true || (false && false)); // true
console.log((true || false) && false); // false

console.log(!false || true); // true (! first)
console.log(!(false || true)); // false (parentheses first)

// Real-world example
let isAdmin = false;
let isOwner = false;
let isActive = true;

// Without parentheses (wrong!)
if ((isAdmin || isOwner) && isActive) {
  console.log("Access granted");
}

// With parentheses (correct!)
if (isAdmin || (isOwner && isActive)) {
  console.log("Access granted");
}

5. String Operators

Concatenation (+)

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

// String concatenation
let fullName = firstName + " " + lastName; // 'John Doe'
console.log(fullName);

// Concatenation with +=
let greeting = "Hello";
greeting += " ";
greeting += "World";
console.log(greeting); // 'Hello World'

// Number + String = String
console.log(5 + "5"); // '55' (string)
console.log("5" + 5); // '55' (string)
console.log(5 + 5 + "5"); // '105' (5+5=10, then '10'+'5'='105')
console.log("5" + 5 + 5); // '555' ('5'+'5'='55', then '55'+5='555')

// Multi-line concatenation
let message =
  "This is a long message " +
  "that spans multiple lines " +
  "using concatenation.";
console.log(message);

String Concatenation Rules

Expression	Result	Explanation
`'5' + 5`	`'55'`	Number converted to string
`5 + '5'`	`'55'`	Number converted to string
`'5' + 5 + 5`	`'555'`	Left to right: `'5'+'5'='55'`, `'55'+5='555'`
`5 + 5 + '5'`	`'105'`	Left to right: `5+5=10`, `10+'5'='105'`
`'Hello' + true`	`'Hellotrue'`	Boolean converted to string
`'5' - 2`	`3`	Subtraction converts strings to numbers

Interview Tip: When + is used with a string, it concatenates. Order matters!

Template Literals (Modern Way)

let name = "John";
let age = 25;

// Old way (concatenation)
let message = "My name is " + name + " and I am " + age + " years old.";

// New way (template literals)
let message2 = `My name is ${name} and I am ${age} years old.`;

console.log(message2); // My name is John and I am 25 years old.

// Expressions inside template literals
let a = 5;
let b = 10;
console.log(`${a} + ${b} = ${a + b}`); // 5 + 10 = 15

// Multi-line strings
let html = `
  <div>
    <h1>${name}</h1>
    <p>Age: ${age}</p>
  </div>
`;

// Function calls
function double(x) {
  return x * 2;
}
console.log(`Double of 5 is ${double(5)}`); // Double of 5 is 10

6. Ternary Operator (Conditional)

Shorthand for if-else statement.

Syntax

condition ? valueIfTrue : valueIfFalse;

Basic Examples

let age = 20;

// Instead of if-else
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // 'Adult'

// Direct use
console.log(age >= 18 ? "Can vote" : "Cannot vote"); // 'Can vote'

// Assignment
let discount = age >= 65 ? 0.2 : 0;
console.log(discount); // 0

// Multiple conditions
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
console.log(grade); // 'B'

Nested Ternary (Use Sparingly!)

let score = 85;

// Nested ternary (hard to read)
let grade =
  score >= 90
    ? "A"
    : score >= 80
      ? "B"
      : score >= 70
        ? "C"
        : score >= 60
          ? "D"
          : "F";

console.log(grade); // 'B'

// Better: Use if-else for complex logic
let grade2;
if (score >= 90) {
  grade2 = "A";
} else if (score >= 80) {
  grade2 = "B";
} else if (score >= 70) {
  grade2 = "C";
} else if (score >= 60) {
  grade2 = "D";
} else {
  grade2 = "F";
}

Practical Use Cases

// 1. Conditional rendering (React-style)
let isLoggedIn = true;
let message = isLoggedIn ? "Welcome back!" : "Please login";

// 2. Setting default values
let userRole = undefined;
let role = userRole ? userRole : "guest";

// 3. Conditional CSS class
let isActive = true;
let className = isActive ? "active" : "inactive";

// 4. Inline calculations
let price = 100;
let finalPrice = price > 50 ? price * 0.9 : price; // 10% discount if > 50

// 5. Function parameters
function greet(name) {
  name = name ? name : "Guest"; // Default parameter (old way)
  console.log(`Hello, ${name}!`);
}

// 6. Null/undefined checks
let value = null;
let result = value ? value : "default";

Ternary vs If-Else

Feature	Ternary Operator	If-Else Statement
Syntax	Single line	Multiple lines
Readability	Good for simple	Better for complex
Returns value	Yes	No (needs return)
Use case	Assignments, returns	Complex logic

// Ternary: Returns value directly
let status = age >= 18 ? "Adult" : "Minor";

// If-else: Need assignment
let status2;
if (age >= 18) {
  status2 = "Adult";
} else {
  status2 = "Minor";
}

// Ternary in return statement
function getStatus(age) {
  return age >= 18 ? "Adult" : "Minor";
}

// If-else needs multiple returns
function getStatus2(age) {
  if (age >= 18) {
    return "Adult";
  } else {
    return "Minor";
  }
}

7. Type Operators

typeof Operator

Returns a string indicating the type of a value.

// Primitives
console.log(typeof 42); // 'number'
console.log(typeof 3.14); // 'number'
console.log(typeof NaN); // 'number'
console.log(typeof Infinity); // 'number'

console.log(typeof "hello"); // 'string'
console.log(typeof ""); // 'string'

console.log(typeof true); // 'boolean'
console.log(typeof false); // 'boolean'

console.log(typeof undefined); // 'undefined'

console.log(typeof null); // 'object' (JavaScript bug!)

console.log(typeof Symbol("id")); // 'symbol'

console.log(typeof 123n); // 'bigint'

// Objects
console.log(typeof {}); // 'object'
console.log(typeof []); // 'object'
console.log(typeof function () {}); // 'function'
console.log(typeof new Date()); // 'object'
console.log(typeof /regex/); // 'object'

// Undeclared variables
console.log(typeof undeclaredVar); // 'undefined' (no error!)

typeof Return Values Table

Value	typeof Returns	Notes
`42`, `3.14`, `NaN`	`'number'`	All numbers
`"hello"`, `''`	`'string'`	All strings
`true`, `false`	`'boolean'`	Boolean values
`undefined`	`'undefined'`	Undefined value
`null`	`'object'`	⚠️ Bug! Should be 'null'
`Symbol('id')`	`'symbol'`	Symbol type
`123n`	`'bigint'`	BigInt type
`{}`	`'object'`	Plain object
`[]`	`'object'`	⚠️ Arrays are objects
`function(){}`	`'function'`	Functions
`class MyClass {}`	`'function'`	⚠️ Classes are functions

instanceof Operator

Checks if an object is an instance of a specific constructor/class.

// Arrays
let arr = [1, 2, 3];
console.log(arr instanceof Array); // true
console.log(arr instanceof Object); // true (arrays are objects)

// Objects
let obj = { name: "John" };
console.log(obj instanceof Object); // true
console.log(obj instanceof Array); // false

// Dates
let date = new Date();
console.log(date instanceof Date); // true
console.log(date instanceof Object); // true

// Functions
function myFunc() {}
console.log(myFunc instanceof Function); // true
console.log(myFunc instanceof Object); // true

// Custom constructors
function Person(name) {
  this.name = name;
}
let john = new Person("John");
console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

// Classes
class User {
  constructor(name) {
    this.name = name;
  }
}
let user = new User("Jane");
console.log(user instanceof User); // true
console.log(user instanceof Object); // true

// Primitives
console.log(5 instanceof Number); // false (primitive, not object)
console.log(new Number(5) instanceof Number); // true (object wrapper)

in Operator

Checks if a property exists in an object.

let person = {
  name: "John",
  age: 25,
};

console.log("name" in person); // true
console.log("age" in person); // true
console.log("salary" in person); // false

// Inherited properties
console.log("toString" in person); // true (inherited from Object)

// Array indices
let arr = [1, 2, 3];
console.log(0 in arr); // true
console.log(3 in arr); // false (index 3 doesn't exist)

// Array length
console.log("length" in arr); // true

Type Checking Best Practices

// Check for number
function isNumber(value) {
  return typeof value === "number" && !isNaN(value);
}

// Check for string
function isString(value) {
  return typeof value === "string";
}

// Check for array (typeof doesn't work!)
function isArray(value) {
  return Array.isArray(value); // ✅ Correct way
  // return typeof value === 'object'; // ❌ Wrong (objects also return 'object')
}

// Check for object (not array, not null)
function isObject(value) {
  return typeof value === "object" && value !== null && !Array.isArray(value);
}

// Check for null
function isNull(value) {
  return value === null; // ✅ Correct way
  // return typeof value === 'object'; // ❌ Wrong (objects also return 'object')
}

// Check for undefined
function isUndefined(value) {
  return typeof value === "undefined";
}

// Check for function
function isFunction(value) {
  return typeof value === "function";
}

8. Operator Precedence

Determines the order in which operations are performed.

Precedence Table (High to Low)

Level	Operator	Name	Associativity
1	`()`	Grouping	N/A
2	`.` `[]` `()`	Member/Call	Left-to-right
3	`new`	Create instance (with args)	N/A
4	`++` `--`	Postfix increment/decrement	N/A
5	`!` `~` `+` `-` `++` `--` `typeof` `delete`	Unary	Right-to-left
6	`**`	Exponentiation	Right-to-left
7	`*` `/` `%`	Multiplicative	Left-to-right
8	`+` `-`	Additive	Left-to-right
9	`<<` `>>` `>>>`	Bitwise shift	Left-to-right
10	`<` `<=` `>` `>=` `in` `instanceof`	Relational	Left-to-right
11	`==` `===` `!=` `!==`	Equality	Left-to-right
12	`&`	Bitwise AND	Left-to-right
13	`^`	Bitwise XOR	Left-to-right
14	`\|`	Bitwise OR	Left-to-right
15	`&&`	Logical AND	Left-to-right
16	`\|\|`	Logical OR	Left-to-right
17	`??`	Nullish coalescing	Left-to-right
18	`? :`	Conditional (ternary)	Right-to-left
19	`=` `+=` `-=` etc.	Assignment	Right-to-left
20	`,`	Comma	Left-to-right

Examples

// Without parentheses
let result = 2 + 3 * 4; // 14 (multiplication first)
console.log(result);

// With parentheses
let result2 = (2 + 3) * 4; // 20 (addition first)
console.log(result2);

// Multiple operators
let x = 10 - 5 * 2; // 0 (5*2=10, then 10-10=0)
console.log(x);

let y = (10 - 5) * 2; // 10 ((10-5)=5, then 5*2=10)
console.log(y);

// Exponentiation is right-to-left
console.log(2 ** (3 ** 2)); // 512 (2^(3^2) = 2^9 = 512)
console.log((2 ** 3) ** 2); // 64 ((2^3)^2 = 8^2 = 64)

// Logical operators
console.log(true || (false && false)); // true (&& before ||)
console.log((true || false) && false); // false (parentheses first)

Complex Example

let x = 5;
let y = x++ + ++x * 2; // What is y?

// Step-by-step breakdown:
// 1. x++ returns 5, then x becomes 6 (postfix increment)
// 2. ++x makes x = 7, returns 7 (prefix increment)
// 3. 7 * 2 = 14 (multiplication has higher precedence)
// 4. 5 + 14 = 19 (addition)
// Final: x = 7, y = 19

console.log(x); // 7
console.log(y); // 19

Associativity Examples

// Left-to-right (addition)
let result = 5 - 3 - 1; // (5 - 3) - 1 = 1
console.log(result); // 1

// Right-to-left (assignment)
let a, b, c;
a = b = c = 5; // c = 5, then b = c, then a = b
console.log(a, b, c); // 5 5 5

// Right-to-left (exponentiation)
console.log(2 ** (3 ** 2)); // 2 ** (3 ** 2) = 2 ** 9 = 512

Precedence Best Practices

// ✅ Good: Use parentheses for clarity
let result = price * quantity + tax;

// ❌ Bad: Relies on knowing precedence
let result = price * quantity + tax;

// ✅ Good: Clear intention
if ((isAdmin || isOwner) && isActive) {
  // ...
}

// ❌ Bad: Confusing without parentheses
if (isAdmin || (isOwner && isActive)) {
  // ...
}

// ✅ Good: Break complex expressions
let subtotal = price * quantity;
let total = subtotal + tax;

// ❌ Bad: Everything in one line
let total = price * quantity + tax + (discount ? -discount : 0);

9. Special Operators

Optional Chaining (?.)

Safely access nested object properties without checking each level.

// Without optional chaining
let user = null;
// let city = user.address.city; // Error: Cannot read property 'address' of null

// Traditional solution
let city = user && user.address && user.address.city;

// With optional chaining (ES2020)
let city2 = user?.address?.city; // undefined (no error)

// Real examples
let user1 = {
  name: "John",
  address: {
    city: "New York",
  },
};

console.log(user1?.address?.city); // 'New York'
console.log(user1?.address?.zipCode); // undefined
console.log(user1?.contact?.phone); // undefined

// With arrays
let users = null;
console.log(users?.[0]?.name); // undefined

let users2 = [{ name: "John" }, { name: "Jane" }];
console.log(users2?.[0]?.name); // 'John'

// With functions
let obj = null;
console.log(obj?.someMethod?.()); // undefined (doesn't call if method doesn't exist)

let obj2 = {
  greet: function () {
    return "Hello";
  },
};
console.log(obj2?.greet?.()); // 'Hello'

Spread Operator (...)

Expands iterables (arrays, objects) into individual elements.

// Array spread
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Copy array
let original = [1, 2, 3];
let copy = [...original]; // [1, 2, 3]
copy.push(4);
console.log(original); // [1, 2, 3] (unchanged)
console.log(copy); // [1, 2, 3, 4]

// Object spread
let obj1 = { name: "John", age: 25 };
let obj2 = { city: "New York", country: "USA" };
let merged = { ...obj1, ...obj2 };
// { name: 'John', age: 25, city: 'New York', country: 'USA' }

// Copy object
let person = { name: "John" };
let personCopy = { ...person };

// Function arguments
function sum(a, b, c) {
  return a + b + c;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

Comma Operator (,)

Evaluates multiple expressions, returns the last one.

// Basic usage
let x = (1, 2, 3, 4, 5); // x = 5 (returns last value)
console.log(x); // 5

// In for loop
for (let i = 0, j = 10; i < 5; i++, j--) {
  console.log(i, j);
}
// Output: 0 10, 1 9, 2 8, 3 7, 4 6

// Multiple assignments
let a, b, c;
a = ((b = 1), (c = 2), 3); // a = 3, b = 1, c = 2

// Rarely used in practice

delete Operator

Removes a property from an object.

let person = {
  name: "John",
  age: 25,
  city: "New York",
};

delete person.age;
console.log(person); // { name: 'John', city: 'New York' }

// Returns true if successful
console.log(delete person.city); // true
console.log(person); // { name: 'John' }

// Cannot delete non-configurable properties
let obj = {};
Object.defineProperty(obj, "prop", {
  value: 42,
  configurable: false,
});
console.log(delete obj.prop); // false (cannot delete)

// Cannot delete variables
let x = 10;
console.log(delete x); // false

void Operator

Evaluates an expression and returns undefined.

// Basic usage
console.log(void 0); // undefined
console.log(void "hello"); // undefined
console.log(void 2 + 3); // undefined (void 2 is undefined, undefined + 3 is NaN)

// Used to get undefined reliably
let x = void 0; // x = undefined

// Prevent default in links (old way)
// <a href="javascript:void(0)">Click</a>

// IIFE (Immediately Invoked Function Expression)
void (function () {
  console.log("IIFE executed");
})();

Practical Examples

Example 1: Calculate Discount

let price = 100;
let discount = 0.2; // 20%
let finalPrice = price - price * discount;
console.log(finalPrice); // 80

// Alternative
let finalPrice2 = price * (1 - discount);
console.log(finalPrice2); // 80

// With ternary
let isMember = true;
let memberDiscount = isMember ? 0.2 : 0;
let finalPrice3 = price * (1 - memberDiscount);
console.log(finalPrice3); // 80

Example 2: Check Eligibility

let age = 25;
let hasID = true;
let canEnter = age >= 18 && hasID;
console.log(canEnter); // true

// With additional checks
let isVIP = false;
let hasTicket = true;
let canEnterVIP = (age >= 21 && hasID && hasTicket) || isVIP;
console.log(canEnterVIP); // true

Example 3: Default Values

// Using ||
let userInput = "";
let value = userInput || "Default";
console.log(value); // 'Default'

// Problem with ||
let count = 0;
let value2 = count || 10;
console.log(value2); // 10 (but 0 is valid!)

// Solution: Use ??
let count2 = 0;
let value3 = count2 ?? 10;
console.log(value3); // 0 (correct!)

Example 4: Conditional Message

let score = 85;
let message = score >= 60 ? "Pass" : "Fail";
console.log(message); // 'Pass'

// With grade
let grade =
  score >= 90
    ? "A"
    : score >= 80
      ? "B"
      : score >= 70
        ? "C"
        : score >= 60
          ? "D"
          : "F";
console.log(grade); // 'B'

Example 5: Safe Property Access

// Without optional chaining
let user = { name: "John" };
let city = user && user.address && user.address.city;
console.log(city); // undefined

// With optional chaining
let city2 = user?.address?.city;
console.log(city2); // undefined

// Real use case
function getUserCity(user) {
  return user?.address?.city ?? "Unknown";
}

console.log(getUserCity({ name: "John" })); // 'Unknown'
console.log(getUserCity({ name: "Jane", address: { city: "NY" } })); // 'NY'

Example 6: Complex Expression Evaluation

let a = 5;
let b = 10;
let c = 15;

// Complex expression
let result = a + b * c - (a++ + ++b) / --c;

// Break it down:
// 1. b * c = 10 * 15 = 150
// 2. a++ returns 5, a becomes 6
// 3. ++b makes b = 11, returns 11
// 4. 5 + 11 = 16
// 5. --c makes c = 14, returns 14
// 6. 16 / 14 ≈ 1.14
// 7. a + 150 - 1.14 = 6 + 150 - 1.14 = 154.86

console.log(result); // 154.85714285714286
console.log(a, b, c); // 6 11 14

Feature	`==` (Loose Equality)	`===` (Strict Equality)
Type coercion	Yes	No
Compares	Values only (after coercion)	Values AND types
`5 == '5'`	`true`	`false`
`0 == false`	`true`	`false`
`null == undefined`	`true`	`false`
Best practice	Avoid (except null check)	Always use

Feature	`++x` (Pre-increment)	`x++` (Post-increment)
When changes	Before expression	After expression
Returns	New value	Old value
Example	`let y = ++x` → y gets new x	`let y = x++` → y gets old x

Feature	`\|\|` (OR)	`??` (Nullish Coalescing)
Returns right if left is	Any falsy value	Only `null` or `undefined`
Falsy values	`false`, `0`, `''`, `null`, `undefined`, `NaN`, `-0`	Only `null`, `undefined`
Use case	General defaults	Preserve `0`, `false`, `''`

Feature	`typeof`	`instanceof`
Returns	String	Boolean
Checks	Primitive type	Object constructor/class
Works on	All values	Objects only
Syntax	`typeof value`	`value instanceof Constructor`

Expression	Result	Explanation
`5 + 5`	`10`	Both numbers → addition
`'5' + 5`	`'55'`	String present → concatenation
`5 + '5'`	`'55'`	String present → concatenation
`5 + 5 + '5'`	`'105'`	Left-to-right: 5+5=10, then '10'+'5'
`'5' + 5 + 5`	`'555'`	Left-to-right: '5'+'5', then +'5'
`true + 1`	`2`	true → 1, then 1+1
`false + 5`	`5`	false → 0, then 0+5
`'5' + null`	`'5null'`	null → 'null' (string concat)
`5 + null`	`5`	null → 0, then 5+0
`'5' + undefined`	`'5undefined'`	undefined → 'undefined' (concat)
`5 + undefined`	`NaN`	undefined → NaN, then 5+NaN

Feature	Logical (`&&`, `		`,` !`)	Bitwise (`&`, `
Operates on	Boolean values	Binary bits
Returns	Boolean or original value	Number
Use case	Conditions, control flow	Bit manipulation, flags
Short-circuit	Yes (`&&`, `		`)	No

| Operator | Preferred Type | Example | Result | | --------------- | ------------------------- | ----------- | ------- | -------------- | --- | | + | String (if one is string) | '5' + 3 | '53' | | - * / % | Number | '5' - 3 | 2 | | == | Varies | '5' == 5 | true | | === | No coercion | '5' === 5 | false | | && | | | Boolean | 'hello' && 0 | 0 | | ! | Boolean | !'hello' | false |

Conversion Rules:

// To String
String(123); // '123'
String(true); // 'true'
String(null); // 'null'
String(undefined); // 'undefined'
String([1, 2]); // '1,2'
String({ a: 1 }); // '[object Object]'

// To Number
Number("123"); // 123
Number("12.5"); // 12.5
Number(""); // 0
Number(" "); // 0
Number("hello"); // NaN
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN
Number([1]); // 1
Number([1, 2]); // NaN
Number({}); // NaN

// To Boolean
Boolean(1); // true (any non-zero number)
Boolean(0); // false
Boolean(""); // false
Boolean("hello"); // true (any non-empty string)
Boolean(null); // false
Boolean(undefined); // false
Boolean({}); // true (any object)
Boolean([]); // true (any array)

Common Pitfalls:

// Unexpected concatenation
let result = "10" + 5 + 5; // '1055' (not 20)
// Fix: Convert to number first
let result = Number("10") + 5 + 5; // 20

// Order matters!
console.log(1 + 2 + "3"); // '33' (1+2=3, then '3'+'3'='33')
console.log("1" + 2 + 3); // '123' ('1'+'2'='12', '12'+'3'='123')

// Boolean arithmetic
console.log(true + true); // 2 (1 + 1)
console.log(false + 1); // 1 (0 + 1)
console.log(true * 2); // 2 (1 * 2)

// Array/Object coercion
console.log([1] + [2]); // '12' (both convert to strings)
console.log({} + []); // '[object Object]' or 0 (context-dependent!)
console.log([] + {}); // '[object Object]'

Best Practices to Avoid Coercion Issues:

// ✅ Explicit conversion
let num = Number(userInput);
let str = String(value);
let bool = Boolean(value);

// ✅ Use === instead of ==
if (value === 5) {
  /* strict comparison */
}

// ✅ Parse numbers properly
let price = parseFloat("19.99");
let quantity = parseInt("5");

// ✅ Type checking before operations
function add(a, b) {
  if (typeof a !== "number" || typeof b !== "number") {
    throw new Error("Both arguments must be numbers");
  }
  return a + b;
}

// ✅ Use TypeScript for type safety
function multiply(a: number, b: number): number {
  return a * b;
}

Interview Question: "What is [] + {} in JavaScript?"

Answer:

console.log([] + {}); // '[object Object]'

// Explanation:
// 1. Both [] and {} are converted to strings
// 2. [] converts to '' (empty string)
// 3. {} converts to '[object Object]'
// 4. '' + '[object Object]' = '[object Object]'

// But:
console.log({} + []); // 0 or '[object Object]' (depends on context!)
// In statement context: {} is empty block, +[] converts to 0
// In expression context: '[object Object]'

Operators - Performing Operations on Data

On this page