JavaScript operators

JavaScript operators are symbols or keywords used to perform operations on values or variables. There are various types of operators in JavaScript, including arithmetic, assignment, comparison, logical, bitwise, and more. Here are some common JavaScript operators:

1. Arithmetic Operators:
   • Addition (+): Adds two values.
   • Subtraction (-): Subtracts one value from another.
   • Multiplication (*): Multiplies two values.
   • Division (/): Divides one value by another.
   • Modulus (%): Returns the remainder after division.
   • Increment (++) and Decrement (–): Increase or decrease the value of a variable by 1.
2. Assignment Operators:
   • Assignment (=): Assigns a value to a variable.
   • Addition assignment (+=): Adds a value to a variable and assigns the result.
   • Subtraction assignment (-=): Subtracts a value from a variable and assigns the result.
   • Multiplication assignment (*=): Multiplies a variable by a value and assigns the result.
   • Division assignment (/=): Divides a variable by a value and assigns the result.
   • Modulus assignment (%=): Performs modulus on a variable and assigns the result.
3. Comparison Operators:
   • Equal to (==): Compares two values for equality.
   • Not equal to (!=): Compares two values for inequality.
   • Strict equal to (===): Compares two values for equality without type conversion.
   • Strict not equal to (!==): Compares two values for inequality without type conversion.
   • Greater than (>): Checks if the left value is greater than the right value.
   • Less than (<): Checks if the left value is less than the right value.
   • Greater than or equal to (>=): Checks if the left value is greater than or equal to the right value.
   • Less than or equal to (<=): Checks if the left value is less than or equal to the right value.
4. Logical Operators:
   • Logical AND (&&): Returns true if both operands are true.
   • Logical OR (||): Returns true if at least one of the operands is true.
   • Logical NOT (!): Returns the inverse boolean value of the operand.
5. Bitwise Operators:
   • Bitwise AND (&): Performs a bitwise AND operation.
   • Bitwise OR (|): Performs a bitwise OR operation.
   • Bitwise XOR (^): Performs a bitwise XOR (exclusive OR) operation.
   • Bitwise NOT (~): Inverts the bits of an operand.
   • Left shift (<<): Shifts the bits of the left operand to the left by the number of positions specified by the right operand.
   • Right shift (>>): Shifts the bits of the left operand to the right by the number of positions specified by the right operand.
   • Zero-fill right shift (>>>): Shifts the bits of the left operand to the right by the number of positions specified by the right operand and fills the new bits with zeros.

JavaScript operators example

Simple example code of JavaScript operators:

Arithmetic Operators:

let x = 5;
let y = 3;

console.log(x + y); // Output: 8 (addition)
console.log(x - y); // Output: 2 (subtraction)
console.log(x * y); // Output: 15 (multiplication)
console.log(x / y); // Output: 1.6666666666666667 (division)
console.log(x % y); // Output: 2 (modulus)
console.log(++x);   // Output: 6 (increment)
console.log(--y);   // Output: 2 (decrement)

Assignment Operators:

let x = 10;

x += 5;   // Equivalent to x = x + 5
console.log(x); // Output: 15

x -= 3;   // Equivalent to x = x - 3
console.log(x); // Output: 12

x *= 2;   // Equivalent to x = x * 2
console.log(x); // Output: 24

x /= 4;   // Equivalent to x = x / 4
console.log(x); // Output: 6

x %= 5;   // Equivalent to x = x % 5
console.log(x); // Output: 1

Comparison Operators:

let x = 5;
let y = 3;

console.log(x == y); // Output: false (equality check)
console.log(x != y); // Output: true (inequality check)
console.log(x === "5"); // Output: false (strict equality check)
console.log(x !== "5"); // Output: true (strict inequality check)
console.log(x > y);   // Output: true
console.log(x < y);   // Output: false
console.log(x >= 5);  // Output: true
console.log(y <= 2);  // Output: false

Logical Operators:

let x = 5;
let y = 3;

console.log(x > 0 && y > 0); // Output: true (logical AND)
console.log(x > 0 || y > 0); // Output: true (logical OR)
console.log(!(x > 0));      // Output: false (logical NOT)

Bitwise Operators:

let x = 5; // Binary: 0101
let y = 3; // Binary: 0011

console.log(x & y);  // Output: 1 (bitwise AND)
console.log(x | y);  // Output: 7 (bitwise OR)
console.log(x ^ y);  // Output: 6 (bitwise XOR)
console.log(~x);     // Output: -6 (bitwise NOT)
console.log(x << 1); // Output: 10 (left shift by 1 position)
console.log(x >> 1); // Output: 2 (right shift by 1 position)
console.log(x >>> 1);// Output: 2 (zero-fill right shift by 1 position)

Example

Let’s consider a practical example of using JavaScript operators to calculate the total cost of purchasing items with different prices and applying a discount:

// Item prices
let priceItem1 = 10;
let priceItem2 = 15;
let priceItem3 = 20;

// Discount percentage
let discountPercentage = 10;

// Calculating total cost
let subtotal = priceItem1 + priceItem2 + priceItem3;
let discountAmount = (subtotal * discountPercentage) / 100;
let totalCost = subtotal - discountAmount;

// Output
console.log("Subtotal: $" + subtotal);
console.log("Discount: $" + discountAmount);
console.log("Total Cost: $" + totalCost);

Output:

The output will display the subtotal, discount amount, and total cost of the items based on the provided prices and discount percentage.

Comment if you have any doubts or suggestions on this Js Operator topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version