Understanding JavaScript Operators

JavaScript operators are special symbols or keywords used to perform operations on values and variables. These operations can include mathematical calculations, logical comparisons, string manipulation, and much more. JavaScript operators are crucial to performing tasks and writing complex logic in your programs.

In this article, we will dive deep into the different types of operators available in JavaScript, their purpose, and how to use them.

1. Arithmetic Operators

Arithmetic operators are used to perform basic mathematical operations such as addition, subtraction, multiplication, division, and modulus (remainder).

  • Addition (+): Adds two operands.
  • Subtraction (-): Subtracts the second operand from the first.
  • Multiplication (*): Multiplies two operands.
  • Division (/): Divides the first operand by the second.
  • Modulus (%): Returns the remainder of a division operation.
  • Exponentiation (**): Raises the first operand to the power of the second operand.
let a = 10;
let b = 5;

console.log(a + b);  // 15 (Addition)
console.log(a - b);  // 5  (Subtraction)
console.log(a * b);  // 50 (Multiplication)
console.log(a / b);  // 2  (Division)
console.log(a % b);  // 0  (Modulus)
console.log(a ** b); // 100000 (Exponentiation)

2. Assignment Operators

Assignment operators are used to assign values to variables. They include the basic assignment operator (=) as well as compound assignment operators that perform an operation and assignment in one step.

  • Assignment (=): Assigns the right-hand value to the left-hand variable.
  • Addition assignment (+=): Adds the right-hand value to the left-hand variable and assigns the result to the left-hand variable.
  • Subtraction assignment (-=): Subtracts the right-hand value from the left-hand variable and assigns the result to the left-hand variable.
  • Multiplication assignment (*=): Multiplies the left-hand variable by the right-hand value and assigns the result to the left-hand variable.
  • Division assignment (/=): Divides the left-hand variable by the right-hand value and assigns the result to the left-hand variable.
  • Modulus assignment (%=): Assigns the remainder of the left-hand variable divided by the right-hand value to the left-hand variable.
let x = 10;

x += 5;  // x = x + 5 => 15
x -= 3;  // x = x - 3 => 12
x *= 2;  // x = x * 2 => 24
x /= 4;  // x = x / 4 => 6
x %= 4;  // x = x % 4 => 2

3. Comparison Operators

Comparison operators are used to compare two values or variables and return a boolean value (true or false).

  • Equal to (==): Returns true if the values are equal, ignoring data type.
  • Strict equal to (===): Returns true if the values and the data types are exactly equal.
  • Not equal to (!=): Returns true if the values are not equal.
  • Strict not equal to (!==): Returns true if the values or data types are not equal.
  • Greater than (>): Returns true if the left operand is greater than the right operand.
  • Less than (<): Returns true if the left operand is less than the right operand.
  • Greater than or equal to (>=): Returns true if the left operand is greater than or equal to the right operand.
  • Less than or equal to (<=): Returns true if the left operand is less than or equal to the right operand.
let a = 5;
let b = 10;

console.log(a == b);   // false (Equal to)
console.log(a === b);  // false (Strict equal to)
console.log(a != b);   // true (Not equal to)
console.log(a > b);    // false (Greater than)
console.log(a < b);    // true (Less than)
console.log(a >= b);   // false (Greater than or equal to)
console.log(a <= b);   // true (Less than or equal to)

4. Logical Operators

Logical operators are used to combine multiple conditions or expressions and return a boolean value.

  • AND (&&): Returns true if both conditions are true.
  • OR (||): Returns true if at least one of the conditions is true.
  • NOT (!): Reverses the truth value of a condition. If the condition is true, it becomes false, and vice versa.
let x = true;
let y = false;

console.log(x && y);  // false (AND)
console.log(x || y);  // true  (OR)
console.log(!x);      // false (NOT)

5. Increment and Decrement Operators

The increment (++) and decrement (--) operators are used to increase or decrease the value of a variable by 1.

  • Increment (++): Increases the value of the variable by 1.
  • Decrement (--): Decreases the value of the variable by 1.

These operators can be used as prefix or postfix:

  • Prefix (++x or --x): Increments or decrements the value before using it in the expression
  • Postfix (x++ or x--): Increments or decrements the value after using it in the expression.
let a = 5;

console.log(++a);  // 6 (Prefix increment)
console.log(a++);  // 6 (Postfix increment)
console.log(a);    // 7 (After postfix increment)

let b = 10;

console.log(--b);  // 9  (Prefix decrement)
console.log(b--);  // 9  (Postfix decrement)
console.log(b);    // 8  (After postfix decrement)

6. Ternary (Conditional) Operator

The ternary operator is a shorthand way of writing an if-else statement. It evaluates a condition and returns one value if the condition is true and another if it is false.

condition ? valueIfTrue : valueIfFalse;

let age = 18;
let canVote = (age >= 18) ? "Yes, you can vote." : "No, you're too young.";
console.log(canVote);  // "Yes, you can vote."

7. Typeof Operator

The typeof operator is used to check the type of a variable or value.

let name = "Alice";
console.log(typeof name);  // "string"

let age = 25;
console.log(typeof age);   // "number"

let isStudent = true;
console.log(typeof isStudent); // "boolean"

8. Spread Operator

The spread operator (...) is used to unpack elements from arrays or objects and spread them into individual elements.

  • For arrays: It can be used to copy or combine arrays.
  • For objects: It can be used to copy properties from one object to another.
// For Arrays
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2);  // [1, 2, 3, 4, 5]

// For Objects
let obj1 = { name: "Alice", age: 25 };
let obj2 = { ...obj1, city: "New York" };
console.log(obj2);  // { name: "Alice", age: 25, city: "New York" }

Conclusion

JavaScript operators are a fundamental part of the language that allows developers to perform a wide range of tasks, from simple arithmetic to complex logic. Understanding how each operator works and when to use them is key to writing effective JavaScript code. Whether you're dealing with numbers, strings, booleans, or objects, JavaScript offers a comprehensive set of operators to help you manipulate and compare data efficiently.

Next Article ❯