A Complete Guide to JavaScript Operators

A Complete Guide to JavaScript Operators

JavaScript is one of the most popular programming languages in the world, and understanding its operators is fundamental to mastering it. Operators in JavaScript are special symbols used to perform operations on operands (variables and values). This guide covers all the essential operators you need to know.

1. Arithmetic Operators

Arithmetic operators are used to perform basic mathematical operations.

  • Addition (+): Adds two numbers.

      sum = 10 + 5; // 15
    
  • Subtraction (-): Subtracts the second number from the first.

      difference = 10 - 5; // 5
    
  • Multiplication (*): Multiplies two numbers.

      product = 10 * 5; // 50
    
  • Division (/): Divides the first number by the second.

      quotient = 10 / 5; // 2
    
  • Modulus (%): Returns the remainder of the division of two numbers.

      remainder = 10 % 3; // 1
    
  • Exponentiation (**): Raises the first number to the power of the second number.

      power = 10 ** 2; // 100
    
  • Increment (++): Increases a number by one.

      num = 10;
      num++; // 11
    
  • Decrement (--): Decreases a number by one.

      num = 10;
      num--; // 9
    

2. Assignment Operators

Assignment operators are used to assign values to variables.

  • Assignment (=): Assigns the value on the right to the variable on the left.

      x = 10;
    
  • Addition Assignment (+=): Adds the right operand to the left operand and assigns the result to the left operand.

      x = 10;
      x += 5; // 15
    
  • Subtraction Assignment (-=): Subtracts the right operand from the left operand and assigns the result to the left operand.

      x = 10;
      x -= 5; // 5
    
  • Multiplication Assignment (*=): Multiplies the right operand with the left operand and assigns the result to the left operand.

      x = 10;
      x *= 5; // 50
    
  • Division Assignment (/=): Divides the left operand by the right operand and assigns the result to the left operand.

      x = 10;
      x /= 5; // 2
    
  • Modulus Assignment (%=): Divides the left operand by the right operand and assigns the remainder to the left operand.

      x = 10;
      x %= 3; // 1
    
  • Exponentiation Assignment (**=): Raises the left operand to the power of the right operand and assigns the result to the left operand.

      x = 10;
      x **= 2; // 100
    

3. Comparison Operators

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

  • Equal (==): Returns true if the operands are equal.

      isEqual = (10 == "10"); // true
    
  • Strict Equal (===): Returns true if the operands are equal and of the same type.

      isStrictEqual = (10 === "10"); // false
    
  • Not Equal (!=): Returns true if the operands are not equal.

      isNotEqual = (10 != "10"); // false
    
  • Strict Not Equal (!==): Returns true if the operands are not equal or not of the same type.

      isStrictNotEqual = (10 !== "10"); // true
    
  • Greater Than (>): Returns true if the left operand is greater than the right operand.

      isGreater = (10 > 5); // true
    
  • Greater Than or Equal (>=): Returns true if the left operand is greater than or equal to the right operand.

      isGreaterOrEqual = (10 >= 10); // true
    
  • Less Than (<): Returns true if the left operand is less than the right operand.

      isLess = (10 < 5); // false
    
  • Less Than or Equal (<=): Returns true if the left operand is less than or equal to the right operand.

      isLessOrEqual = (10 <= 10); // true
    

4. Logical Operators

Logical operators are used to combine multiple Boolean expressions.

  • Logical AND (&&): Returns true if both operands are true.

      andResult = (true && false); // false
    
  • Logical OR (||): Returns true if at least one of the operands is true.

      orResult = (true || false); // true
    
  • Logical NOT (!): Returns true if the operand is false.

      notResult = (!true); // false
    

5. Bitwise Operators

Bitwise operators treat their operands as a set of 32 bits (binary digits) and operate on them bit by bit.

  • AND (&): Performs a bitwise AND operation.

      andResult = (5 & 1); // 1
    
  • OR (|): Performs a bitwise OR operation.

      orResult = (5 | 1); // 5
    
  • NOT (~): Performs a bitwise NOT operation.

      notResult = (~5); // -6
    
  • XOR (^): Performs a bitwise XOR operation.

      xorResult = (5 ^ 1); // 4
    
  • Left Shift (<<): Shifts the bits of the first operand to the left by the number of positions specified by the second operand.

      leftShiftResult = (5 << 1); // 10
    
  • Right Shift (>>): Shifts the bits of the first operand to the right by the number of positions specified by the second operand.

      rightShiftResult = (5 >> 1); // 2
    
  • Zero-fill Right Shift (>>>): Shifts the bits of the first operand to the right by the number of positions specified by the second operand, filling the leftmost bits with zeros.

      zeroFillRightShiftResult = (5 >>> 1); // 2
    

6. String Operators

String operators are used to concatenate strings.

  • Concatenation (+): Concatenates two strings.

      greeting = "Hello, " + "world!"; // "Hello, world!"
    
  • Concatenation Assignment (+=): Concatenates the right operand to the left operand and assigns the result to the left operand.

      greeting = "Hello, ";
      greeting += "world!"; // "Hello, world!"
    

7. Conditional (Ternary) Operator

The conditional operator assigns a value to a variable based on a condition.

age = 20;
let canVote = (age >= 18) ? "Yes" : "No"; // "Yes"

8. Type Operators

Type operators are used to determine or change the type of a value.

  • typeof: Returns the type of a variable.

      type = typeof 10; // "number"
    
  • instanceof: Returns true if an object is an instance of a specified object type.

      date = new Date();
      let isInstance = date instanceof Date; // true
    
  • void: Evaluates an expression without returning a value.

      codevoid function() {
        console.log("Hello");
      }(); // undefined
    

9. Comma Operator

The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand.

x = (1, 2, 3); // 3

10. Relational Operators

Relational operators compare the relationship between two operands.

  • in: Returns true if the specified property is in the specified object.

      obj = {name: "Alice"};
      let hasName = "name" in obj; // true
    
  • delete: Deletes a property from an object.

      obj = {name: "Alice"};
      delete obj.name; // true
    

Understanding and using these operators effectively will help you write more efficient and concise JavaScript code. This guide provides a comprehensive overview, but practice and experimentation are key to mastering their use. Happy coding!