JavaScript Operators: A Comprehensive Guide

JavaScript is a versatile programming language that allows developers to create interactive web pages and applications. As with any programming language, JavaScript has a variety of operators that would enable developers to perform different types of operations. This article will explore the different types of operators available in JavaScript and how they can be used in code.

Basic Operators

The most basic operators in JavaScript are arithmetic operators. These operators allow developers to perform mathematical operations such as addition, subtraction, multiplication, and division. JavaScript also provides a modulus operator, which returns the remainder of a division operation.

Here is an example of how to use basic arithmetic operators in JavaScript:

let x = 10;
let y = 5;

let sum = x + y;
let difference = x - y;
let product = x * y;
let quotient = x / y;
let remainder = x % y;

In this example, the variable x is assigned the value 10 and the variable y is assigned the value 5. The + operator is used to add the values of x and y, resulting in the sum variable being assigned the value 15. The - operator is used to subtract the value of y from the value of x, resulting in the difference variable being assigned the value 5. The * operator is used to multiply the values of x and y, resulting in the product variable being assigned the value 50. The / operator is used to divide the value of x by the value of y, resulting in the quotient variable being assigned the value 2. The % operator is used to find the remainder of dividing x by y, resulting in the remainder variable being assigned the value 0.

JavaScript also provides assignment operators, which allow developers to assign values to variables. The most basic assignment operator is the = operator, which assigns a value to a variable. There are also compound assignment operators, which combine an arithmetic operation with an assignment operation. Here is an example of how to use assignment operators in JavaScript:

let x = 10;

x += 5; // x is now 15
x -= 5; // x is now 10
x *= 2; // x is now 20
x /= 2; // x is now 10
x %= 3; // x is now 1

In this example, the variable x is assigned the value 10. The += operator is used to add 5 to the value of x, resulting in the value of x being 15. The -= operator is used to subtract 5 from the value of x, resulting in the value of x being 10. The *= operator is used to multiply the value of x by 2, resulting in the value of x being 20. The /= operator is used to divide the value of x by 2, resulting in the value of x being 10. The %= operator is used to find the remainder of dividing x by 3, resulting in the value of x being 1.

Comparison Operators

JavaScript provides comparison operators that allow developers to compare two values. These operators return a Boolean value (true or false) depending on whether the comparison is true or false. Here is a list of the comparison operators available in JavaScript:

• ==: Equal to
• !=: Not equal to
• ===: Strictly equal to
• >: Greater than
• <: Less than
• >=: Greater than or equal to
• <=: Less than or equal to

The == operator compares two values for equality, while the != operator compares two values for inequality. These operators perform type coercion, which means that they will convert the types of the values being compared if necessary. For example:

let x = 10;
let y = "10";

console.log(x == y); // true
console.log(x != y); // false

In this example, the variable x is assigned the value 10 and the variable y is assigned the string "10". When the == operator is used to compare x and y, JavaScript performs type coercion and converts the string "10" to the number 10. This results in the comparison being true, and the console.log() statement will output true. When the != operator is used to compare x and y, the result is false because the values are equal.

The === operator compares two values for strict equality, meaning that the types of the values being compared must also match. The !== operator compares two values for strict inequality. Here is an example:

let x = 10;
let y = "10";

console.log(x === y); // false
console.log(x !== y); // true

In this example, the === operator is used to compare x and y. Because x is a number and y is a string, the comparison is false, and the console.log() statement will output false. The !== operator is used to compare x and y, and because the types of the values do not match, the comparison is true, and the console.log() statement will output true.

The > and < operators compare two values to determine if one is greater than or less than the other. The >= and <= operators compare two values to determine if one is greater than or equal to or less than or equal to the other. Here is an example:

let x = 10;
let y = 5;

console.log(x > y); // true
console.log(x < y); // false
console.log(x >= y); // true
console.log(x <= y); // false

In this example, the > operator is used to compare x and y. Because x is greater than y, the comparison is true, and the console.log() statement will output true.

The < operator is used to compare x and y, and because x is not less than y, the comparison is false, and the console.log() statement will output false.

The >= operator is used to compare x and y, and because x is greater than or equal to y, the comparison is true, and the console.log() statement will output true.

The <= operator is used to compare x and y, and because x is not less than or equal to y, the comparison is false, and the console.log() statement will output false.

Logical Operators

JavaScript provides logical operators that allow developers to perform logical operations on two or more Boolean values. Here is a list of the logical operators available in JavaScript:

• &&: Logical AND
• ||: Logical OR
• !: Logical NOT

The && operator returns true if both operands are true. Otherwise, it returns false. The ||operator returns true if at least one of the operands is true. Otherwise, it returns false. The ! operator returns the opposite of a Boolean value. Here is an example:

let x = 10;
let y = 5;

console.log(x > y && x < 20); // true
console.log(x < y || x >= 20); // false
console.log(!(x > y)); // false

In this example, the && operator is used to perform a logical AND operation on x > y and x < 20. Because both operands are true, the result is true, and the console.log() statement will output true. The || operator is used to perform a logical OR operation on x < y and x >= 20. Because both operands are false, the result is false, and the console.log() statement will output false. The ! operator is used to perform a logical NOT operation on x > y. Because x > y is true, the result is false, and the console.log() statement will output false.

Bitwise Operators

JavaScript provides bitwise operators that allow developers to perform bitwise operations on numeric values. Bitwise operators perform their operations on the binary representation of the values being operated on. Here is a list of the bitwise operators available in JavaScript:

• &: Bitwise AND
• |: Bitwise OR
• ~: Bitwise NOT
• ^: Bitwise XOR
• <<: Left shift
• >>: Right shift
• >>>: Unsigned right shift

The & operator performs a bitwise AND operation on the binary representations of two values. The | operator performs a bitwise OR operation on the binary representations of two values. The ~ operator performs a bitwise NOT operation on the binary representation of a value. The ^ operator performs a bitwise XOR operation on the binary representations of two values. The << operator performs a left shift operation on the binary representation of a value, shifting the bits to the left by a specified number of positions. The >> operator performs a right shift operation on the binary representation of a value, shifting the bits to the right by a specified number of positions. The >>> operator performs an unsigned right shift operation on the binary representation of a value, shifting the bits to the right by a specified number of positions and filling the leftmost bits with zeroes.

Here is an example of how to use bitwise operators in JavaScript:

let x = 5;
let y = 3;

console.log(x & y); // 1
console.log(x | y); // 7
console.log(~x); // -6
console.log(x ^ y); // 6
console.log(x << 1); // 10
console.log(x >> 1); // 2
console.log(x >>> 1); // 2

In this example, the variable x is assigned the value 5 and the variable y is assigned the value 3. The & operator is used to perform a bitwise AND operation on x and y.

The binary representation of x is 0101, and the binary representation of y is 0011.

The bitwise AND operation produces the binary value 0001, which is equal to 1 in decimal. The | operator is used to perform a bitwise OR operation on x and y.

The bitwise OR operation produces the binary value 0111, which is equal to 7 in decimal. The ~ operator is used to perform a bitwise NOT operation on x.

The binary representation of x is 00000000 00000000 00000000 00000101 (assuming a 32-bit system), and the bitwise NOT operation produces the binary value 11111111 11111111 11111111 11111010, which is equal to -6 in decimal (because of the two’s complement representation used for signed numbers).

The ^ operator is used to perform a bitwise XOR operation on x and y. The bitwise XOR operation produces the binary value 0110, which is equal to 6 in decimal.

The << operator is used to perform a left shift operation on x, shifting the bits to the left by 1 position. The binary representation of x after the left shift is 1010, which is equal to 10 in decimal.

The >> operator is used to perform a right shift operation on x, shifting the bits to the right by 1 position. The binary representation of x after the right shift is 0010, which is equal to 2 in decimal.

The >>> operator is used to perform an unsigned right shift operation on x, shifting the bits to the right by 1 position and filling the leftmost bit with a 0. The binary representation of x after the unsigned right shift is 0010, which is equal to 2 in decimal.

Conditional (Ternary) Operator

JavaScript provides a conditional operator (also known as the ternary operator) that allows developers to write a shorthand version of an if statement. The conditional operator takes three operands: a condition, an expression to be evaluated if the condition is true, and an expression to be evaluated if the condition is false. Here is an example:

let x = 10;
let y = 5;

let result = x > y ? "x is greater than y" : "y is greater than or equal to x";

console.log(result); // "x is greater than y"

In this example, the variable x is assigned the value 10 and the variable y is assigned the value 5. The conditional operator is used to compare x and y. If x is greater than y, the string "x is greater than y" is assigned to the result variable. Otherwise, the string "y is greater than or equal to x" is assigned to the result variable. Because x is greater than y, the console.log() statement will output "x is greater than y".

Conclusion

JavaScript operators are an essential part of the language, and they allow developers to perform a variety of operations on values. In this article, we have explored the different types of operators available in JavaScript, including basic operators, comparison operators, logical operators, bitwise operators, and the conditional operator. Understanding how these operators work and how to use them in code is essential for any JavaScript developer.

📕 Related articles about Javascript

• JavaScript Break: Understanding the Importance of Break Statements in Loops
• JavaScript String Search: A Comprehensive Guide
• Understanding JavaScript Function Closures
• JavaScript Loop For In: Understanding its Use Cases and Pitfalls
• JavaScript Maps: A Comprehensive Guide
• JavaScript Type Conversion: Understanding the Ins and Outs