UNDERSTANDING JAVASCRIPT OPERATORS.
Tags: javascript, webdev, tutorial, productivity
Published: 2022-10-23 02:14:02

## INTRODUCTION

Operator symbols in JavaScript are used to carry out operations on operands. There are several types of JavaScript operators, they include;

📌 Arithmetic Operators.
📌 Assignment Operators.
📌 Comparison Operators.
📌 Logical Operators.
📌 Conditional Operators.

## <u>JAVASCRIPT ARITHMETIC OPERATORS</u>

The following common arithmetic operators are supported by JavaScript:

📌 Addition (+)
📌 Subtraction (-)
📌 Division (/)
📌 Multiplication (*)

The return value of an arithmetic operator is a single numerical value that it accepts as operands. Literals or variables may be used as the numerical values.

## <u>THE ADDITION OPERATOR</u>

The sum of two values is what the addition operator returns. For instance, the following computes the sum of two numbers using the addition operator;

```
let sum = 20 + 20;
console.log(sum); // 40
```

The addition operator can also be applied to two variables. For instance:

```
let initialPrice  = 9.99,
    deliveryFee = 1.99;
let totalPrice  = initialPrice + deliveryFee;

console.log(totalPrice);
```
This would be displayed as;

```
11.98
```

The addition operator follows the following guidelines if either value is a string:

📌 It joins the second string to the first string if both values are strings.
📌 The numeric value is implicitly converted into a string if one of the values is a string, and two strings are concatenated.

For instance, the following adds two strings together by concatenating them using the addition operator:

```
let a = '20',
    b = '30';
let result = a + b;

console.log(result);
```
This would be displayed as;

```
2030
```

The outcome of employing the addition operator with special numbers is displayed in the following table:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2twg23o6qhpzufln31kj.jpg)

<u>THE SUBTRACTION OPERATOR</u>

One number is subtracted from another using the subtraction operator (-). For instance:

```
let result = 300 - 10;
console.log(result); // 390
```

The JavaScript engine will do the following if a value is a string, a boolean, null, or undefined:

📌 First, use the Number() function to transform the value into a number.
📌 Next, carry out the subtraction.

Use of the subtraction operator with exceptional values is demonstrated in the following table:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2t4h5r6splxhooa8m2x.png)

<u>THE MULTIPLICATION OPERATOR</u>

The multiplication operator is represented by the asterisk (*) in JavaScript. A single value is produced by multiplying two numbers using the multiplication operator. For instance:

```
let result = 3 * 3;
console.log(result);
```
This will be displayed as;

```
9
```

The JavaScript engine executes the multiplication and implicitly turns either value into a number if it is not already one using the Number() method. Consider this:

```
let result = '5' * 20;

console.log(result);
```

This will be displayed as;

```
100
```
The multiplier's behavior with special values is depicted in the following table:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc9mldiz9icmqo4c8oy9.png)

<u>THE DIVIDE OPERATOR</u>

The divide operator in JavaScript is represented by the slash (/) character. The first value is divided by the second using the divide operator. For instance:

```
let result = 40 / 10;

console.log(result); // 4
```
The JavaScript engine converts either value into a number for division if it is not already one. For instance:

```
let result = '40' / 10;
console.log(result); // 4;
```
The behavior of the divide operators when used with exceptional values is illustrated in the following table:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0ysg8w1jc5yu49gisa6.png)

## <u>ASSIGNMENT OPERATORS</u>

Variables can have values assigned to them using assignment operators. For instance,

```
const x = 9;

```
The variable x is given the value 9 in this case thanks to the = operator.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bd6gkatlnvmq09a8si93.png)

SHIFT ASSIGNMENT OPERATORS


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92gdwukxi03vj93fnr5n.png)

LOGICAL ASSIGNMENT OPERATORS


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5inodtajgvec1lwxhut.png)


📌 The assignment operator += increases a variable's value.

For instance;

```
let x = 10;
x += 5;
```
The value of x is 15.

📌 With the -= assignment operator, a variable's value is subtracted.

For instance;

```
let x = 10;
x -= 5;
```
The value of x is 5.

📌 The variable is multiplied using the assignment operator *=.

For instance;

```
let x = 10;
x *= 5;
```
The value of x is 50.

📌 A variable is divided using the /= assignment.

For instance;

```
let x = 10;
x /= 5;
```
The value of x is 2.


📌 The remainder is assigned to a variable by the %= assignment operator.

For instance;

```
let x = 10;
x %= 5;
```
The value of x is 0.

📌 A variable is left shifted by the assignment operator =.

For instance;

```
let x = -100;
x <<= 5;
```
The value of x is -3200.

📌 The assignment operator >>= moves a variable to the right (signed).

For instance;

```
let x = -100;
x >>= 5;
```
The value of x is -4.

📌 A variable is right shifted by the assignment operator >>>=. (unsigned).

For instance;

```
let x = -100;
x >>>= 5;
```
The value of x is 134217724.

📌 An assignment operator's &= function ANDs a variable.

For instance;

```
let x = 10;
x &= 5;
```
The value of x is 4.

## <u>COMPARISON OPERATORS</u>

When two values are compared, a comparison operator returns a boolean value, which can be either true or false. Decision-making and loops both employ comparison operators.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xo1qzude00hf6hztylxk.png)

📌 THE EQUAL TO OPERATOR

```
const a = 5, b = 2, c = 'hello';

// equal to operator
console.log(a == 5);     // true
console.log(b == '2');   // true
console.log(c == 'Hello');  // false
```
If the operands are equal, the evaluation of == is true.

📌 While = is an assignment operator in JavaScript, == is a comparison operator. You can receive an undesirable outcome if you accidentally use = instead of ==.

📌 NOT EQUAL TO OPERATOR

```
const a = 3, b = 'hello';

// not equal operator
console.log(a != 2); // true
console.log(b != 'Hello'); // true
```
The operands must not be equal for!= to evaluate to true.

📌 Strict Equal to Operator

```
const a = 2;

// strict equal operator
console.log(a === 2); // true
console.log(a === '2'); // false
```
If the operands are equal and of the same type, === evaluates to true. The integers 2 and "2" are identical in this case, but the data type is different. And while comparing, the operator === also verifies the data type.

📌 The following is the distinction between == and ===:
While === only evaluates to true if the operands are equal and of the same type, === evaluates to true if the operands are equal.

📌 Strict Not Equal to Operator

```
const a = 2, b = 'hello';

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

If the operands are strictly not equal, the expression!== evaluates to true. Exactly the reverse of strictly equal ===, it.
In the case above, 2!== '2' returns true. It's because despite having the same value, their types are different.

📌 Greater than Operator

```
const a = 3;

// greater than operator
console.log(a > 2); // true
```
If the left operand is larger than the right operand, the expression > evaluates to true.

📌 Greater than or Equal to Operator

```
const a = 3;

// greater than or equal operator
console.log(a >= 3); //true
```
If the left operand is greater than or equal to the right operand, >= evaluates to true.

## <u>LOGICAL OPERATORS</u>

The logical operators AND, OR, and NOT carry out logical operations.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfhyzc1saowku5619ksy.png)

📌 Logical AND Operator

```
const a = true, b = false;
const c = 4;

// logical AND
console.log(a && a); // true
console.log(a && b);  // false

console.log((c > 2) && (c < 2)); // false
```

If both operands are true, && evaluates to true; otherwise, it evaluates to false.

📌 With numbers, logical operators are also possible. In JavaScript, all numbers other than 0 are true, and 0 is false.

📌 Logical OR Operator

```
const a = true, b = false, c = 4;


// logical OR
console.log(a || b); // true
console.log(b || b); // false
console.log((c>2) || (c<2)); // true
```
If any of the operands is true, || evaluates to true. The outcome is false if both operands are false.

📌 Logical NOT Operator

```
const a = true, b = false;

// logical NOT
console.log(!a); // false
console.log(!b); // true
```
If the operand is false,! evaluates to true, and vice versa.

## <u>CONDITIONAL OPERATORS</u>

The conditional operator, also known as the ternary operator, first determines if an expression has a true or false value before executing one of the two given statements based on the evaluation's outcome.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h2vej96niarygjhiu16.png)

📌 The usual if statement is replaced by the conditional operator. Three operands are required.

condition: An expression with a true/false value.

Expressions having values of any type are expr1, expr2.

The operator returns the value of expr1 if the condition is true; otherwise, it returns the value of expr2.

For example

📌 status = (marks >= 30) ? "Pass" : "Fail"

If the score is 30 or higher, the statement assigns the value "Pass" to the variable status. If not, "Fail" is assigned as the value for status.

For instance;

```
if marks>=30
 document.write("Pass");
 else
 document.write("Fail");
```

Thanks for the read!