JavaScript Operators Explained: Arithmetic, Assignment, Comparison & Logical Operators with Examples

javascript dev.to

Multiplication Operator
The multiplication operator gives the product of operands where one operand is a multiplicand and another is multiplier.An operand is the data or value that an operator acts upon to perform a calculation or evaluation.
For example, in the expression 5 + 3, the plus sign (+) is the operator, while 5 and 3 are the operands.

        let a = Infinity * 0;
        let b = Infinity * Infinity;
        console.log(a);//NAN
        console.log(b);//Infinity
        let x = 3 * 3;
        let y = -4 * 4;
        console.log(x);//12
        console.log(y);//-16
        let z = 'hi' * 2;
        console.log(z);//NAN
Enter fullscreen mode Exit fullscreen mode

Division (/) Operator
The division operator provides the quotient of its operands where the right operand is the divisor and the left operand is the dividend.
Dividend(left).

console.log(10 / 2); // 5
console.log(9 / 4);  // 2.25
Enter fullscreen mode Exit fullscreen mode

Modulus (%) Operator
The modulus operator returns the remainder left over when a dividend is divided by a divisor. The modulus operator is also known as the remainder operator. It takes the sign of the dividend.

        let d = 9 % 5;
        let e = -12 % 5;
        let f = 1 % -2;
        let g = 5.5 % 2;
        let h = -4 % 2;
        let l = NaN % 2;

        console.log(d);//4
        console.log(e);//-2
        console.log(f);//1
        console.log(g);//1.5
        console.log(h);//0
        console.log(l);//NAN
Enter fullscreen mode Exit fullscreen mode

Exponentiation ** Operator
The exponentiation operator gives the result of raising the first operand to the power of the second operand.

let x = 5;
let z = x ** 2;//25
Enter fullscreen mode Exit fullscreen mode

Increment (++) Operator
The increment operator increments (adds one to) its operand and returns a value.

  • If used postfix with the operator after the operand (for example, x++), then it increments and returns the value before incrementing.
  • If used prefix with the operator before the operand (for example, ++x), then it increments and returns the value after incrementing.
// Postfix 
let a = 2;
b = a++; // b = 2, a = 3
// Prefix
let x = 5;
y = ++x; // x = 6, y = 6
Enter fullscreen mode Exit fullscreen mode

Decrement (- -) Operator
The decrement operator decrements (subtracts one from) its operand and returns a value.

  • If used postfix, with operator after operand (for example, x--), then it decrements and returns the value before decrementing.
  • If used prefix, with the operator before the operand (for example, --x), then it decrements and returns the value after decrementing.
        let i = 5;
        let j = 7;
        let result = i++ - --j + ++j - i++;
        console.log(i, j, result);//7 7 0
Enter fullscreen mode Exit fullscreen mode

Assignment Operator
Assignment operators assign values to variables in javascript.Assignment operators in JavaScript are used to set or update the value of a variable. The basic assignment operator is =, which sets the value of the right-hand operand to the variable on its left.

The = Operator
The Simple Assignment Operator assigns a simple value to a variable.

let x = 10;//10
let y = 50
let x = 10 + y;//60
Enter fullscreen mode Exit fullscreen mode

The += Operator
The Addition Assignment Operator adds a value to a variable.

let x = 10;
x += 5;//15
Enter fullscreen mode Exit fullscreen mode

The -= Operator
The Subtraction Assignment Operator subtracts a value from a variable.

let x = 10;
x -= 5;//5
Enter fullscreen mode Exit fullscreen mode

The *= Operator
The Multiplication Assignment Operator multiplies a variable.

let x = 10;
x *= 5;//50
Enter fullscreen mode Exit fullscreen mode

The **= Operator
The Exponentiation Assignment Operator raises a variable to the power of the operand.

let x = 10;
x **= 5;//100000
Enter fullscreen mode Exit fullscreen mode

The /= Operator
The Division Assignment Operator divides a variable.

let x = 10;
x /= 5;//2
Enter fullscreen mode Exit fullscreen mode

The %= Operator
The Remainder Assignment Operator assigns a remainder to a variable.

let x = 10;
x %= 5;//0
Enter fullscreen mode Exit fullscreen mode

Comparison Operator/Relational Operator
Comparison operators and relational operators in JavaScript are closely related terms used to evaluate conditions and always return a boolean value (true or false).

Equality Operator (==)
The Equality operator is used to compare the equality of two operands.

let x = 5;
let y = '5';

// Checking of operands
console.log(x == 5);//true
console.log(y == 5);// true     
console.log(x == y);//true
Enter fullscreen mode Exit fullscreen mode

Inequality Operator (!=)
The Inequality Operator is used to compare the inequality of two operands.

let x = 5;
let y = '5';

// Checking of operands
console.log(x != 6);//true
console.log(y != '5'); //false      
console.log(x != y);//false
Enter fullscreen mode Exit fullscreen mode

Strict equality Operator (===)
The Strict equality Operator is used to compare the equality of two operands with type.

let x = 5;
let y = '5';

// Checking of operands
console.log(x === 6);//false
console.log(y === '5');//true        
console.log(x === y);//false
Enter fullscreen mode Exit fullscreen mode

Strict inequality Operator (!==)
The Strict inequality Operator is used to compare the inequality of two operands with type.

let x = 5;
let y = '5';

// Checking of operands
console.log(x !== 6);//true
console.log(y !== '5');//false        
console.log(x !== y);//true
Enter fullscreen mode Exit fullscreen mode

Greater than Operator (>)
The Greater than Operator is used to check whether the left-side value is greater than the right-side value.

let x = 5;
let y = "5";

// Checking of operands
console.log(x > 0);//true
console.log(y > "10");//true        
console.log(x > "10");//false
console.log(y > 0);//true
Enter fullscreen mode Exit fullscreen mode

Greater than or equal Operator (>=)
The Greater than or equal Operator is used to check whether the left side operand is greater than or equal to the right side operand.

// Illustration of (>=) operator
let x = 5;
let y = "5";

// Checking of operands
console.log(x >= 5);//true
console.log(y >= "15");//true      
console.log(x >= "5");//true
console.log(y >= 15);//false
Enter fullscreen mode Exit fullscreen mode

Less than Operator (<)
The Less than Operator is used to check whether the left-side value is less than the right-side value.

let x = 5;
let y = "5";

// Checking of operands
console.log(x < 15);//true
console.log(y < "0");//false        
console.log(x < "0");//false
console.log(y < 15);//true
Enter fullscreen mode Exit fullscreen mode

Less than or equal Operator (<=)
The Less than or equal Operator is used to check whether the left side operand value is less than or equal to the right side operand value.

let val1 = 5;
let val2 = "5";

// Checking of operands
console.log(val1 <= 15);//true
console.log(val2 <= "0");// false     
console.log(val1 <= "0");//false
console.log(val2 <= 15);//true
Enter fullscreen mode Exit fullscreen mode

Logical Operators
Logical operators in JavaScript are used to combine or modify boolean values to make decisions. They help control program flow by evaluating whether one or more conditions are true or false.

  • They are widely used in if statements, loops, and conditions.
  • Logical operators make it easier to handle multiple conditions at once.

Logical AND
The && operator returns true if both expressions are true, otherwise false.

let x = 6;
let y = 3;
let z = (x < 10 && y > 1)//true

let x = 6;
let y = 3;
(x < 10 && y < 1);//false
Enter fullscreen mode Exit fullscreen mode

Logical OR
The || operator returns true if one or both expressions are true, otherwise false.

let x = 6;
let y = -3;
let z = (x > 0 || y > 0)//true
Enter fullscreen mode Exit fullscreen mode

Logical NOT
The NOT operator (!) returns true for false expressions and false for true expressions.

let x = (5 == 8);//false
let y = !(5 == 8)//true
Enter fullscreen mode Exit fullscreen mode

References
https://www.geeksforgeeks.org/javascript/javascript-arithmetic-operators/
https://www.geeksforgeeks.org/javascript/javascript-comparison-operators/
https://www.w3schools.com/js/js_assignment.asp
https://www.devopsschool.com/blog/wp-content/uploads/2020/07/JavaScript-Logical-Operator.png

Source: dev.to

arrow_back Back to Tutorials