Operators in Javascript

Client side Java script Server side Java script Data types  variables Operators  Expressions  Functions  Objects  Array  Date and math related objects Document objectmodel Event handling

Types of JavaScript Operators:

Arithmetic Operators: 

Perform mathematical calculations.

+ (Addition)

- (Subtraction)

* (Multiplication)

/ (Division)

% (Modulus - returns the remainder of a division)

** (Exponentiation)

++ (Increment - increases value by 1)

-- (Decrement - decreases value by 1)

Example

let a = 3;
let x = (100 + 50) * a;

Addition

let x = 5;
let y = 2;
let z = x + y;

Multiplying

let x = 5;
let y = 2;
let z = x * y;

String Addition

The + can also be used to add (concatenate) strings:

Example

let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

Adding Strings and Numbers

Adding two numbers, will return the sum as a number like 5 + 5 = 10.

Adding a number and a string, will return the sum as a concatenated string like 5 + "5" = "55".

Example

let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;
The result of x, y, and z will be:

10
55
Hello5

Difference between % (Modulus - returns the remainder of a division) and/ (Division)

For example, when dividing

11by 4, the division result is 2(quotient) and the modulus(remainder) is 3, since

11=(4×2)+3. The modulus is often represented by the percent sign (%) in programming languages.

Exponentiation Operator (**)

1 let power = 2 ** 3; // 2 raised to the power of 3, which is 8
console.log(power); // Output: 8

2 // Raising 3 to the power of 4

let result = 3 ** 4;

console.log(result); // Output: 81

Increment in JavaScript

The increment operator (++) in JavaScript is used to increase the value of a variable by one. It can be used in two forms: postfix and prefix.

Postfix Increment

In the postfix form (x++), the operator increments the value of x but returns the original value before the increment.

let x = 5;

console.log(x++); // Output: 5

console.log(x); // Output: 6

Prefix Increment

In the prefix form (++x), the operator increments the value of x and returns the new value after the increment.

let y = 5;

console.log(++y); // Output: 6

console.log(y); // Output: 6

In JavaScript, the decrement operator -- is used to decrease a numeric value by 1.
It works in two forms:

1. Prefix Decrement (--x)

• Decreases the value first, then returns the updated value.

Javascript

Copy code

let a = 5;

let b = --a; // a becomes 4, then b gets 4

console.log(a); // 4

console.log(b); // 4

2. Postfix Decrement (x--)

• Returns the current value first, then decreases it.

Javascript

Copy code

let a = 5;

let b = a--; // b gets 5, then a becomes 4

console.log(a); // 4

console.log(b); // 5

Assignment Operators: 

Assign values to variables.

= (Assignment)

+= (Add and assign)

-= (Subtract and assign)

*= (Multiply and assign)

/= (Divide and assign)

%= (Modulus and assign)

**= (Exponentiation and assign)

Example

Addition Assignment (+=) in JavaScript

The addition assignment (+=) operator in JavaScript performs addition (numeric or string concatenation) on two operands and assigns the result to the left operand.

Example: Numeric Addition

1 let x = 5;

x += 3; // x is now 8

2 let bar = 5; bar += 2; // 7

Example: String Concatenation

let str = "Hello";

str += " World"; // str is now "Hello World"

Important Considerations:

1.                      Numeric Addition: When used with numbers, it adds the values.

2.                      String Concatenation: When used with strings, it concatenates them.

3.                      Type Coercion: Non-string, non-BigInt values are coerced to numbers.

Example: Type Coercion

let a = true;

a += 1; // a is now 2

let b = "foo";

b += false; // b is now "foofalse"

Subtraction Assignment in JavaScript

The -= operator in JavaScript is a subtraction assignment operator. It subtracts the value of the right operand from the left operand and assigns the result to the left operand. This is equivalent to x = x - y but evaluates x only once.

Example: Basic Usage

let number = 10;

number -= 3; // Equivalent to number = number - 3

console.log(number); // Output: 7

Multiplication Assignment (*=) in JavaScript

The *= operator in JavaScript is a compound assignment operator that multiplies the value of a variable by another value and assigns the result back to the variable. It is shorthand for x = x * y.

Example:

let num = 5;

num *= 3; // Equivalent to num = num * 3

console.log(num); // Output: 15

Key Points:

• Syntax: x *= y is equivalent to x = x * y.

• Type Coercion: If one operand is not a number, JavaScript attempts to convert it to a number. If conversion fails, the result is NaN.

let value = 4;

value *= "2"; // Converts "2" to a number, result: 8

value *= "hello"; // "hello" cannot be converted, result: NaN

console.log(value); // Output: NaN

Division Assignment (/=) in JavaScript

The /= operator in JavaScript is a shorthand for dividing a variable by another value and assigning the result back to that variable. It works as: x /= y → equivalent to x = x / y, but evaluates x only once.

Example:

let a = 18;

a /= 3; // a = 18 / 3 → 6

console.log(a);

a /= 2; // a = 6 / 2 → 3

console.log(a);

Modulus in JavaScript

The modulus operator (%) in JavaScript is used to find the remainder after dividing one number by another. It is also known as the remainder operator.

Example

let dividend = 10;

let divisor = 3;

let result = dividend % divisor;

console.log(result); // returns 1

In this example, 10 % 3 results in 1 because when 10 is divided by 3, the quotient is 3 and the remainder is 1.

Checking for Odd or Even Numbers

You can use the modulus operator to check if a number is odd or even. If a number modulo 2 equals 0, it is even; otherwise, it is odd.

const checkNumber = (n) => {

if (n % 2 === 0) {

console.log(n + " is even");

} else {

console.log(n + " is odd");

}

};

checkNumber(8); // "8 is even"

checkNumber(21); // "21 is odd"

In JavaScript, the exponentiation assignment operator **= raises a variable to the power of a given value and assigns the result back to the same variable.

It’s essentially shorthand for:

Javascript

Copy code

x **= y; // same as: x = x ** y;

Syntax

Javascript

Copy code

variable **= exponent;

• variable → The number you want to raise to a power.
• exponent → The power to raise it to.

Example Usage

Javascript

Copy code

// Example 1: Basic usage

let num = 5;

num **= 2; // same as num = num ** 2

console.log(num); // Output: 25

Comparison Operators: 

Compare two values and return a boolean (true or false).

== (Equal to)

!= (Not equal to)

=== (Strict equal to - checks both value and type)

!== (Strict not equal to)

> (Greater than)

< (Less than)

>= (Greater than or equal to)

<= (Less than or equal to)

Given that x = 5, the table below explains the comparison operators:

Operator	Description	Comparing	Returns
==	equal to	x == 8	false
		x == 5	true
		x == "5"	true
===	equal value and equal type	x === 5	true
		x === "5"	false
!=	not equal	x != 8	true
!==	not equal value or not equal type	x !== 5	false
		x !== "5"	true
		x !== 8	true
>	greater than	x > 8	false
<	less than	x < 8	true
>=	greater than or equal to	x >= 8	false
<=	less than or equal to	x <= 8	true

 

Example

let x = 5;
let result = x > 8;(false)

All the comparison operators above can also be used on strings:

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

Strict Equality (===)

The === operator returns true only if both the value and the data type of the operands are identical. Otherwise, it returns false.

JavaScript

let num = 5;
let str = "5";
let bool = true;
console.log(num === 5);    // true (value and type are the same)
console.log(num === str);  // false (values are the same, but types are different: number vs string)
console.log(num === "5");  // false (same as above)
console.log(1 === true);   // false (values are different, and types are different: number vs boolean)
console.log(0 === false);  // false (values are different, and types are differe: number vs boolean)

Strict Inequality (!==)

The !== operator returns true if either the value or the data type of the operands are different. It returns false only if both the value and the data type are identical. 

let num = 10;
let str = "10";
let anotherNum = 12;
console.log(num !== 10);      // false (value and type are the same)
console.log(num !== str);     // true (values are the same, but types are different)
console.log(num !== "10");    // true (same as above)
console.log(num !== anotherNum); // true (values are different, types are the same)