Understanding JavaScript Operators With Types and Examples

JavaScript operators are symbols or keywords that are used to perform different operations on variables and values. They are a fundamental part of the JavaScript language and allow developers to manipulate and work with data.

JavaScript has a variety of different types of operators, including arithmetic, comparison, logical, assignment, bitwise, and more. Each type of operator performs a specific set of operations on values or variables.

For example, arithmetic operators like “+” and “-” are used to perform mathematical operations, while comparison operators like “===” and “!=” are used to compare two values and return a Boolean value.

What is operators?

Operators are symbols or keywords used in computer programming languages to perform specific operations on one or more values or variables.

Operators are used to manipulate data in a program by performing tasks such as arithmetic calculations, logical comparisons, assignment of values, and more.

Programming languages have different types of operators, such as arithmetic operators (e.g., +, -, *, /), comparison operators (e.g., >, <, ==), logical operators (e.g., &&, ||), bitwise operators (e.g., &, |, ~), and others.

Types of JavaScript Operators

JavaScript has various types of operators that can be used to perform different operations on variables and values. Here are some of the main types of JavaScript operators:

• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• Conditional Operators
• Type Operators

Javascript arithmetic operators

JavaScript arithmetic operators are used to perform mathematical operations on numeric values. Here are some of the main arithmetic operators in JavaScript:

Addition (+): Used to add two or more values together.

let x = 5;
let y = 3;
let z = x + y; // z is now equal to 8

Subtraction (-): Used to subtract one value from another.

let x = 10; 
let y = 5;
 let z = x - y; // z is now equal to 5

Multiplication (*): Used to multiply two or more values.

let x = 5;
let y = 3;
let z = x * y; // z is now equal to 15

Division (/): Used to divide one value by another.

let x = 15;
let y = 3;
let z = x / y; // z is now equal to 5

Modulo (%): Used to find the remainder of a division operation.

let x = 10;
let y = 3;
let z = x % y; // z is now equal to 1

Arithmetic operators can also be used with variables, as shown in the example above. Additionally, parentheses can be used to group operations and determine the order of precedence.

It’s important to keep in mind that arithmetic operations can sometimes lead to unexpected results due to JavaScript’s handling of floating-point numbers.

Assignment Operators in JavaScript

The simple assignment operator = assigns the value on the right-hand side to the variable on the left-hand side.

let x = 10;
let y = x;

The addition assignment operator += adds the value on the right-hand side to the current value of the variable on the left-hand side and assigns the result back to the variable on the left-hand side.

let x = 5;
x += 3; // equivalent to x = x + 3;
console.log(x); // output: 8

The subtraction assignment operator -= subtracts the value on the right-hand side from the current value of the variable on the left-hand side and assigns the result back to the variable on the left-hand side.

let x = 10;
x -= 4; // equivalent to x = x - 4;
console.log(x); // output: 6

The multiplication assignment operator *= multiplies the value on the right-hand side by the current value of the variable on the left-hand side and assigns the result back to the variable on the left-hand side.

let x = 4;
x *= 3; // equivalent to x = x * 3;
console.log(x); // output: 12

The division assignment operator /= divides the current value of the variable on the left-hand side by the value on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 12;
x /= 4; // equivalent to x = x / 4;
console.log(x); // output: 3

The modulo assignment operator %= calculates the modulo of the current value of the variable on the left-hand side with the value on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 10;
x %= 3; // equivalent to x = x % 3;
console.log(x); // output: 1

The left shift assignment operator <<= shifts the bits of the current value of the variable on the left-hand side to the left by the number of bits specified on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 8; // equivalent to binary 1000
x <<= 2; // equivalent to x = x << 2; (shift 2 bits to the left)
console.log(x); // output: 32 (equivalent to binary 100000)

The right shift assignment operator >>= shifts the bits of the current value of the variable on the left-hand side to the right by the number of bits specified on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 16; // equivalent to binary 10000
x >>= 2; // equivalent to x = x >> 2; (shift 2 bits to the right)
console.log(x); // output: 4 (equivalent to binary 100)

The unsigned right shift assignment operator >>>= shifts the bits of the current value of the variable on the left-hand side to the right by the number of bits specified on the right-hand side, filling the leftmost bits with zeroes, and assigns the result back to the variable on the left-hand side.

let x = -16; // equivalent to binary 11111111111111111111111111110000
x >>>= 2; // equivalent to x = x >>> 2; (shift 2 bits to the right with zero fill)
console.log(x); // output: 1073741819 (equivalent to binary 00111111111111111111111111111101)

The bitwise AND assignment operator &= performs a bitwise AND operation between the current value of the variable on the left-hand side and the value on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 5; // equivalent to binary 101
let y = 3; // equivalent to binary 011
x &= y; // equivalent to x = x & y; (bitwise AND between x and y)
console.log(x); // output: 1 (equivalent to binary 001)

The bitwise XOR assignment operator ^= performs a bitwise XOR operation between the current value of the variable on the left-hand side and the value on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 5; // equivalent to binary 101
let y = 3; // equivalent to binary 011
x ^= y; // equivalent to x = x ^ y; (bitwise XOR between x and y)
console.log(x); // output: 6 (equivalent to binary 110)

The bitwise OR assignment operator |= performs a bitwise OR operation between the current value of the variable on the left-hand side and the value on the right-hand side and assigns the result back to the variable on the left-hand side.

let x = 5; // equivalent to binary 101
let y = 3; // equivalent to binary 011
x |= y; // equivalent to x = x | y; (bitwise OR between x and y)
console.log(x); // output: 7 (equivalent to binary 111)

The logical AND assignment operator && : The logical AND assignment operator in JavaScript is denoted by &&=. It is used to perform a logical AND operation between two values and assign the result back to the left-hand side variable.

However, it’s important to note that the logical AND operator && does not have an assignment variant in JavaScript. This means that using &&= is not a valid operator in the language.

Instead, you can achieve the same result by using the logical AND operator && in conjunction with the simple assignment operator =.
Here’s an example:

let x = true;
let y = false;
x = x && y; // equivalent to x &&= y; (logical AND between x and y)
console.log(x); // output: false

Javascript Comparison Operators

Comparison operators in JavaScript are used to compare two values and return a Boolean value (true or false) based on the comparison result. Here are the commonly used comparison operators in JavaScript:

== : Equal to operator, compares two values for equality. It performs type coercion, which means that the operands are converted to a common type before comparison. For example, 1 == “1” would return true.

=== : Strict equal to operator, compares two values for equality without type coercion. It returns true if the values and types of the operands are the same. For example, 1 === “1” would return false.

!= : Not equal to operator, returns true if the operands are not equal. It performs type coercion. For example, 1 != “2” would return true.

!== : Strict not equal to operator, returns true if the operands are not equal without type coercion. For example, 1 !== “2” would return true.

> : Greater than operator, returns true if the left operand is greater than the right operand. For example, 5 > 3 would return true.

< : Less than operator, returns true if the left operand is less than the right operand. For example, 3 < 5 would return true.

>= : Greater than or equal to operator, returns true if the left operand is greater than or equal to the right operand. For example, 5 >= 5 would return true.

<= : Less than or equal to operator, returns true if the left operand is less than or equal to the right operand. For example, 3 <= 5 would return true

// equal operator
console.log(2 == 2); // true
console.log(2 == '2'); // true

// not equal operator
console.log(3 != 2); // true
console.log('hello' != 'Hello'); // true

// strict equal operator
console.log(2 === 2); // true
console.log(2 === '2'); // false

// strict not equal operator
console.log(2 !== '2'); // true
console.log(2 !== 2); // false

JavaScript Logical Operators

JavaScript Logical Operators are used to combine and manipulate Boolean values (true or false) in logical expressions. Here are the commonly used logical operators in JavaScript:

&& : Logical AND operator, returns true if both operands are true. Otherwise, it returns false.

|| : Logical OR operator, returns true if either operand is true. If both operands are false, it returns false.

! : Logical NOT operator, returns the opposite Boolean value of the operand. If the operand is true, it returns false. If the operand is false, it returns true.

Here's an example of using logical operators:

let x = 5;
let y = 3;
let z = 7;

console.log(x > y && x < z); // output: true
console.log(x > y || x > z); // output: true
console.log(!(x > y)); // output: false

In the first example, the logical AND operator (&&) returns true because both operands (x > y and x < z) are true.

In the second example, the logical OR operator (||) returns true because at least one of the operands (x > y and x > z) is true.

In the third example, the logical NOT operator (!) returns false because the operand (x > y) is true.

JavaScript Bitwise Operators

JavaScript Bitwise Operators are used to manipulate the binary representation of numbers. They work on the bitwise level, i.e., they perform operations on each individual bit of a number. Here are the commonly used bitwise operators in JavaScript:

& : Bitwise AND operator, returns a 1 in each bit position for which the corresponding bits of both operands are 1s.

| : Bitwise OR operator, returns a 1 in each bit position for which the corresponding bits of either or both operands are 1s.

^ : Bitwise XOR operator, returns a 1 in each bit position for which the corresponding bits of either but not both operands are 1s.

~ : Bitwise NOT operator, inverts all the bits of its operand.

<< : Left shift operator, shifts the bits of the first operand to the left by the number of positions specified in the second operand.

>> : Signed right shift operator, shifts the bits of the first operand to the right by the number of positions specified in the second operand.

>>> : Unsigned right shift operator, shifts the bits of the first operand to the right by the number of positions specified in the second operand, and fills the leftmost bits with zeros.

let x = 5;
let y = 3;

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

In the first example, the bitwise AND operator (&) returns 1 because the binary representation of 5 is 0101 and the binary representation of 3 is 0011. The result of 0101 & 0011 is 0001 which is equal to 1 in decimal.

In the second example, the bitwise OR operator (|) returns 7 because the binary representation of 5 is 0101 and the binary representation of 3 is 0011. The result of 0101 | 0011 is 0111 which is equal to 7 in decimal.

In the third example, the bitwise XOR operator (^) returns 6 because the binary representation of 5 is 0101 and the binary representation of 3 is 0011. The result of 0101 ^ 0011 is 0110 which is equal to 6 in decimal.

In the fourth example, the bitwise NOT operator (~) inverts all the bits of x which is equal to 0101. The result is 1010 which is equal to -6 in decimal.

In the fifth example, the left shift operator (<<) shifts the bits of x to the left by 1 position. The binary representation of 5 shifted to the left by 1 position is 1010 which is equal to 10 in decimal.

In the sixth example, the signed right shift operator (>>) shifts the bits of x to the right by 1 position. The binary representation of 5 shifted to the right by 1 position is 0010 which is equal to 2 in decimal.

JavaScript String Operators

In JavaScript, the string operators are used to manipulate strings. The two string operators are concatenation and concatenation assignment.

Concatenation operator (+): This operator is used to concatenate two or more strings together. When used with strings, the plus sign (+) acts as a concatenation operator, which concatenates (joins) two or more strings into a single string. For example:

// concatenation operator
console.log('hello' + 'world');

let a = 'JavaScript';

a += ' tutorial';  // a = a + ' tutorial';
console.log(a);

JavaScript Operators Examples

  // Addition Operator
    let a = 1 + 2
    console.log(a);
      
    // Subtraction Operator
    let b = 10 - 7
    console.log(b);
      
    // Multiplication Operator
    let c = 3 * 3
    console.log(c);
      
    // Division Operator
    let d = 1.0 / 2.0
    console.log(d);
      
    // Modulas Operator
    let e = 9 % 5
    console.log(e)
      
    // Exponentian Operator
    let f = 2 ** 5
    console.log(f)
       
    // Increament Operator
    var g = 2;
    g1 = g++;
    console.log(g)
      
    // Decrement Operator
    var h = 2;
    h1 = h--;
    console.log(h)
      
    // Unary plus Operator
    var i = 3;
    i1 = +i;
    console.log(i1)
      
    // Negation Operator
    var j = 3;
    j1 = -j;
    console.log(j1)

Operator Precedence and Associativity

JavaScript operators have different priorities, or precedence, when evaluated. For example, multiplication has a higher precedence than addition.

If you have multiple operators in a single statement, the operator with the highest precedence is evaluated first.

JavaScript operators also have associativity, which determines the order in which they are evaluated when they have the same precedence.

Most operators in JavaScript have left-to-right associativity, meaning that they are evaluated from left to right. However, some operators, such as the assignment operator (=), have right-to-left associativity.

FAQs

What are unary operators in JavaScript?

Unary operators are operators that require only one operand, such as the increment operator (++x).

What is the difference between the == and === operators in JavaScript?

The == operator compares values for equality, while the === operator compares both value and type for equality.

Can you explain the bitwise operators in JavaScript?

Bitwise operators perform operations on the binary representation of numbers. For example, the left shift operator

Conclusion

JavaScript operators are a crucial part of web development. They allow you to perform various operations on variables and values, creating functional and dynamic applications. Understanding the different types of operators, their precedence, and associativity will help you write more efficient and effective code.