Operators in JavaScript

Introduction to Operators

In JavaScript, an operator is a special symbol that performs an action on values (called operands). You use operators to perform calculations, compare values, assign data, combine strings, and more.

  • Operand: The value or variable the operator works on.
  • Operator: The symbol that performs the action.
  • Expression: A combination of operands and operators that produces a result.

let sum = 5 + 3; // '+' is the operator, 5 and 3 are operands, sum is 8

Unary and Binary Operators

Operators are classified based on the number of operands they use:

  • Unary operator: Works on a single operand. Example: `++x` or `typeof x`.
  • Binary operator: Works on two operands. Example: `x + y`.

let x = 5;
console.log(-x); // Unary minus, outputs -5
console.log(x + 2); // Binary addition, outputs 7

Arithmetic Operators

  • `+` Addition
  • `-` Subtraction
  • `*` Multiplication
  • `/` Division
  • `%` Remainder (modulus)
  • `**` Exponentiation

console.log(5 + 3); // 8
console.log(5 - 3); // 2
console.log(5 * 3); // 15
console.log(5 / 2); // 2.5
console.log(5 % 2); // 1 (remainder)
console.log(2 ** 3); // 8 (2 to the power 3)

String Concatenation with +

The `+` operator can also join strings. If one operand is a string, JavaScript converts the other to a string and concatenates them.

console.log('Hello' + ' ' + 'World'); // Hello World
console.log('Number: ' + 5); // Number: 5

Unary Plus for Numeric Conversion

The unary `+` converts its operand to a number if possible.

console.log(+"5" + 2); // 7
console.log(+true); // 1
console.log(+false); // 0

Operator Precedence

Precedence determines which operator is applied first in an expression. For example, multiplication has higher precedence than addition.

console.log(2 + 3 * 4); // 14, because * runs before +
console.log((2 + 3) * 4); // 20, parentheses change the order

Assignment Operators

The `=` operator assigns a value. Other assignment operators combine assignment with another operation.

  • `x += y` → x = x + y
  • `x -= y` → x = x - y
  • `x *= y` → x = x * y
  • `x /= y` → x = x / y
  • `x %= y` → x = x % y
  • `x **= y` → x = x ** y

let a = 5;
a += 3; // a = 8
a *= 2; // a = 16

Chaining Assignment

let a, b, c;
a = b = c = 5; // all become 5

Increment and Decrement

`++` increases a number by 1, `--` decreases it by 1. Prefix form changes before using the value, postfix changes after.

let count = 5;

// Prefix increment: increases first, then returns the value
console.log(++count); // 6 (count is now 6)

// Postfix increment: returns the value first, then increases
console.log(count++); // 6 (count becomes 7 after this line)
console.log(count);   // 7 (now updated)

// Postfix decrement example
let num = 3;
console.log(num--); // 3 (num becomes 2 after this line)
console.log(num);   // 2

Bitwise Operators

Bitwise operators work at the binary level. JavaScript converts numbers to 32-bit signed integers, operates on their binary form, and then converts back.

  • `&` AND
  • `|` OR
  • `^` XOR
  • `~` NOT
  • `<<` Left shift
  • `>>` Right shift (sign-propagating)
  • `>>>` Zero-fill right shift

// Example: Bitwise AND
let x = 5; // 0101 in binary
let y = 3; // 0011 in binary
console.log(x & y); // 0001 → 1

// Bitwise OR
console.log(x | y); // 0111 → 7

// Bitwise XOR
console.log(x ^ y); // 0110 → 6

// Bitwise NOT
console.log(~x); // -(x+1) → -6

// Left Shift
console.log(x << 1); // 1010 → 10

// Right Shift
console.log(x >> 1); // 0010 → 2

// Zero-fill Right Shift
console.log(x >>> 1); // 0010 → 2

Comma Operator

The comma `,` evaluates multiple expressions and returns the result of the last one.

let result = (1 + 2, 3 + 4);
console.log(result); // 7

Comparison Operators

  • `>` greater than
  • `<` less than
  • `>=` greater than or equal
  • `<=` less than or equal
  • `==` equal (loose, type converts)
  • `===` strict equal
  • `!=` not equal (loose)
  • `!==` strict not equal

console.log(5 == '5'); // true (type conversion)
console.log(5 === '5'); // false (different type)

Logical Operators

Logical operators work with boolean values but can also return non-boolean results.

  • `&&` AND
  • `||` OR
  • `!` NOT

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

Conditional (Ternary) Operator

The ternary operator `? :` chooses between two values based on a condition.

let age = 18;
let message = (age >= 18) ? 'Adult' : 'Minor';
console.log(message); // Adult

JavaScript Operators — Quick Summary

  • An operator is a symbol that performs an action on values (operands).
  • Operands are the values on which operators work, e.g., in 5 + 3, '5' and '3' are operands and '+' is the operator.
  • Operators can be unary (work with one operand) or binary (work with two operands).
  • Mathematical operators include +, -, *, /, %, ** for arithmetic operations.
  • String concatenation (+) joins strings together; the unary + can convert strings to numbers.
  • Operator precedence decides the order in which operations are performed.
  • Assignment (=) stores a value in a variable; compound assignments like +=, -=, *= modify in place.
  • Increment (++), decrement (--) increase or decrease a number by 1 (prefix or postfix forms).
  • Bitwise operators (&, |, ^, ~, <<, >>, >>>) work on the binary representation of numbers.
  • The comma (,) operator evaluates multiple expressions and returns the last one.
  • Comparison operators (==, ===, !=, !==, >, <, >=, <=) compare values and return a boolean.
  • Logical operators (&&, ||, !) combine or invert boolean values.
  • The conditional (ternary) operator condition ? value1 : value2 returns one of two values based on a condition.
@JDCodebase • Learn JavaScript the right way 🚀