Arithmetic Operators in JavaScript
Arithmetic operators are used to perform basic mathematical operations such as addition, subtraction, multiplication, division, etc.
1. Addition (+)
Definition: The addition operator (+) adds two numbers.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition Operator</title>
</head>
<body>
<h2>Addition Operator (+)</h2>
<p>Adding two numbers: 5 + 2</p>
<p id="additionResult"></p>
<script>
let result = 5 + 2;
document.getElementById('additionResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
2. Subtraction (-)
Definition: The subtraction operator (-) subtracts one number from another.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subtraction Operator</title>
</head>
<body>
<h2>Subtraction Operator (-)</h2>
<p>Subtracting two numbers: 5 - 2</p>
<p id="subtractionResult"></p>
<script>
let result = 5 - 2;
document.getElementById('subtractionResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
3. Multiplication (*)
Definition: The multiplication operator (*) multiplies two numbers.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Operator</title>
</head>
<body>
<h2>Multiplication Operator (*)</h2>
<p>Multiplying two numbers: 5 * 2</p>
<p id="multiplicationResult"></p>
<script>
let result = 5 * 2;
document.getElementById('multiplicationResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
4. Division (/)
Definition: The division operator (/) divides one number by another.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Division Operator</title>
</head>
<body>
<h2>Division Operator (/)</h2>
<p>Dividing two numbers: 5 / 2</p>
<p id="divisionResult"></p>
<script>
let result = 5 / 2;
document.getElementById('divisionResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
5. Modulus (%)
Definition: The modulus operator (%) returns the remainder of a division operation.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulus Operator</title>
</head>
<body>
<h2>Modulus Operator (%)</h2>
<p>Remainder of division: 5 % 2</p>
<p id="modulusResult"></p>
<script>
let result = 5 % 2;
document.getElementById('modulusResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
6. Exponentiation (**)
Definition: The exponentiation operator (**) raises one number to the power of another.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exponentiation Operator</title>
</head>
<body>
<h2>Exponentiation Operator (**)</h2>
<p>5 raised to the power of 2: 5 ** 2</p>
<p id="exponentiationResult"></p>
<script>
let result = 5 ** 2;
document.getElementById('exponentiationResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
7. Increment (++)
Definition: The increment operator (++) increases the value of a variable by 1.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Increment Operator</title>
</head>
<body>
<h2>Increment Operator (++)</h2>
<p>Initial value: 5</p>
<p id="incrementResult"></p>
<script>
let a = 5;
a++;
document.getElementById('incrementResult').innerText = 'After Increment: ' + a;
</script>
</body>
</html>
8. Decrement (--)
Definition: The decrement operator (--) decreases the value of a variable by 1.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decrement Operator</title>
</head>
<body>
<h2>Decrement Operator (--)</h2>
<p>Initial value: 5</p>
<p id="decrementResult"></p>
<script>
let a = 5;
a--;
document.getElementById('decrementResult').innerText = 'After Decrement: ' + a;
</script>
</body>
</html>
Comparison Operators in JavaScript
Definition:
Comparison operators are used to compare two values and return a Boolean result (true or false). They help in decision-making by comparing variables or values.
1. Equal To (==)
Definition:
The == operator compares two values for equality but does not consider data type.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equal To Operator (==)</title>
</head>
<body>
<h2>Equal To Operator (==)</h2>
<p>Comparing 5 == '5'</p>
<p id="equalResult"></p>
<script>
let result = (5 == '5');
document.getElementById('equalResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
2. Strict Equal To (===)
Definition:
The === operator compares two values for equality and also checks their data types.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Equal To Operator (===)</title>
</head>
<body>
<h2>Strict Equal To Operator (===)</h2>
<p>Comparing 5 === '5'</p>
<p id="strictEqualResult"></p>
<script>
let result = (5 === '5');
document.getElementById('strictEqualResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: false
3. Not Equal To (!=)
Definition:
The != operator checks whether two values are not equal (ignoring type).
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not Equal To Operator (!=)</title>
</head>
<body>
<h2>Not Equal To Operator (!=)</h2>
<p>Comparing 5 != 4</p>
<p id="notEqualResult"></p>
<script>
let result = (5 != 4);
document.getElementById('notEqualResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
4. Strict Not Equal To (!==)
Definition:
The !== operator checks whether two values are not equal and also checks their data types.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Strict Not Equal To Operator (!==)</title>
</head>
<body>
<h2>Strict Not Equal To Operator (!==)</h2>
<p>Comparing 5 !== '5'</p>
<p id="strictNotEqualResult"></p>
<script>
let result = (5 !== '5');
document.getElementById('strictNotEqualResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
5. Greater Than (>)
Definition:
The > operator checks if the left operand is greater than the right operand.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greater Than Operator (>)</title>
</head>
<body>
<h2>Greater Than Operator (>)</h2>
<p>Comparing 5 > 2</p>
<p id="greaterThanResult"></p>
<script>
let result = (5 > 2);
document.getElementById('greaterThanResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
6. Less Than (<)
Definition:
The < operator checks if the left operand is less than the right operand.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Less Than Operator (<)</title>
</head>
<body>
<h2>Less Than Operator (<)</h2>
<p>Comparing 5 < 2</p>
<p id="lessThanResult"></p>
<script>
let result = (5 < 2);
document.getElementById('lessThanResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: false
7. Greater Than or Equal To (>=)
Definition:
The >= operator checks if the left operand is greater than or equal to the right operand.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greater Than or Equal To (>=)</title>
</head>
<body>
<h2>Greater Than or Equal To (>=)</h2>
<p>Comparing 5 >= 2</p>
<p id="greaterOrEqualResult"></p>
<script>
let result = (5 >= 2);
document.getElementById('greaterOrEqualResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
8. Less Than or Equal To (<=)
Definition:
The <= operator checks if the left operand is less than or equal to the right operand.
Example in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Less Than or Equal To (<=)</title>
</head>
<body>
<h2>Less Than or Equal To (<=)</h2>
<p>Comparing 5 <= 2</p>
<p id="lessOrEqualResult"></p>
<script>
let result = (5 <= 2);
document.getElementById('lessOrEqualResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: false
Assignment Operators in JavaScript
Definition: Assignment operators are used to assign values to variables. They can also perform arithmetic operations while assigning a value.
1. Assign (=)
Definition: The = operator is used to assign a value to a variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assign Operator (=)</title>
</head>
<body>
<h2>Assign Operator (=)</h2>
<p>Assigning value to a variable: a = 10</p>
<p id="assignResult"></p>
<script>
let a = 10;
document.getElementById('assignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 10
2. Add and Assign (+=)
Definition: The += operator adds a value to the variable and assigns the result back to the variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add and Assign Operator (+=)</title>
</head>
<body>
<h2>Add and Assign Operator (+=)</h2>
<p>Adding and assigning: a += 5</p>
<p id="addAssignResult"></p>
<script>
let a = 10;
a += 5; // a = a + 5
document.getElementById('addAssignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 15
3. Subtract and Assign (-=)
Definition: The -= operator subtracts a value from the variable and assigns the result back to the variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subtract and Assign Operator (-=)</title>
</head>
<body>
<h2>Subtract and Assign Operator (-=)</h2>
<p>Subtracting and assigning: a -= 5</p>
<p id="subtractAssignResult"></p>
<script>
let a = 10;
a -= 5; // a = a - 5
document.getElementById('subtractAssignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 5
4. Multiply and Assign (*=)
Definition: The *= operator multiplies a value with the variable and assigns the result back to the variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiply and Assign Operator (*=)</title>
</head>
<body>
<h2>Multiply and Assign Operator (*=)</h2>
<p>Multiplying and assigning: a *= 5</p>
<p id="multiplyAssignResult"></p>
<script>
let a = 10;
a *= 5; // a = a * 5
document.getElementById('multiplyAssignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 50
5. Divide and Assign (/=)
Definition: The /= operator divides the variable by a value and assigns the result back to the variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divide and Assign Operator (/=)</title>
</head>
<body>
<h2>Divide and Assign Operator (/=)</h2>
<p>Dividing and assigning: a /= 5</p>
<p id="divideAssignResult"></p>
<script>
let a = 10;
a /= 5; // a = a / 5
document.getElementById('divideAssignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 2
6. Modulus and Assign (%=)
Definition: The %= operator divides the variable by a value and assigns the remainder back to the variable.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulus and Assign Operator (%=)</title>
</head>
<body>
<h2>Modulus and Assign Operator (%=)</h2>
<p>Calculating remainder and assigning: a %= 5</p>
<p id="modulusAssignResult"></p>
<script>
let a = 10;
a %= 5; // a = a % 5
document.getElementById('modulusAssignResult').innerText = 'Value of a: ' + a;
</script>
</body>
</html>
Output: Value of a: 0
Logical Operators in JavaScript
Definition: Logical operators are used to combine multiple conditions and return a Boolean result (true or false). They are mostly used in decision-making and conditional statements.
1. Logical AND (&&)
Definition: The && (Logical AND) operator returns true if both conditions are true. If any one condition is false, it returns false.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logical AND Operator (&&)</title>
</head>
<body>
<h2>Logical AND Operator (&&)</h2>
<p>Condition: a > 5 && b < 10</p>
<p id="andResult"></p>
<script>
let a = 6;
let b = 8;
let result = (a > 5 && b < 10); // Both conditions must be true
document.getElementById('andResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
Explanation: Both a > 5 and b < 10 are true, so the result is true.
2. Logical OR (||)
Definition: The || (Logical OR) operator returns true if at least one condition is true. If both conditions are false, it returns false.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logical OR Operator (||)</title>
</head>
<body>
<h2>Logical OR Operator (||)</h2>
<p>Condition: a > 5 || b < 10</p>
<p id="orResult"></p>
<script>
let a = 4;
let b = 8;
let result = (a > 5 || b < 10); // At least one condition must be true
document.getElementById('orResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: true
Explanation: Even though a > 5 is false, b < 10 is true, so the result is true.
3. Logical NOT (!)
Definition: The ! (Logical NOT) operator reverses the boolean value of a condition. If the condition is true, it returns false, and vice versa.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logical NOT Operator (!)</title>
</head>
<body>
<h2>Logical NOT Operator (!)</h2>
<p>Condition: !(a > 5)</p>
<p id="notResult"></p>
<script>
let a = 6;
let result = !(a > 5); // Reverse the result of the condition
document.getElementById('notResult').innerText = 'Result: ' + result;
</script>
</body>
</html>
Output: Result: false
Explanation: The condition a > 5 is true, but ! reverses it to false.
Conditional (Ternary) Operator
Conditional (Ternary) Operator is a shorthand for an if-else statement.
Syntax:
condition ? valueIfTrue : valueIfFalse;
< p > Example: Checking if a number is even or odd: < /p >
Explanation of the Code:
Condition: (number % 2 === 0)
This checks if the number is divisible by 2 without any remainder.
True Case: "Even"
If the condition is true, the string "Even" is assigned.
False Case: "Odd"
If the condition is false, the string "Odd" is assigned.
Output Example:
Number: 7 is Odd
Benefits of the Ternary Operator:
- Concise: Reduces multiple lines of
if-else statements into one.
- Readable: Easier to understand simple conditions.
Traditional if-else Equivalent:
let result;
if (number % 2 === 0) {
result = "Even";
} else {
result = "Odd";
}
The ternary operator is a cleaner and shorter way to write the same logic.
