JavaScript operators are symbols used to perform operations on variables and values. They are categorized into several types, such as arithmetic operators, assignment operators, comparison operators, logical operators, and more. These operators are crucial for performing calculations, making decisions, and manipulating data in JavaScript.
Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations like addition, subtraction, multiplication, division, and more.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arithmetic Operators</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
let addition = x + y;
let subtraction = x - y;
let multiplication = x * y;
let division = x / y;
console.log("Addition:", addition); // Output: 15
console.log("Subtraction:", subtraction); // Output: 5
console.log("Multiplication:", multiplication); // Output: 50
console.log("Division:", division); // Output: 2
</script>
</body>
</html>
Assignment Operators
Assignment operators are used to assign values to variables.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assignment Operators</title>
</head>
<body>
<script>
let x = 10;
x += 5; // Equivalent to: x = x + 5
console.log("Updated x:", x); // Output: 15
</script>
</body>
</html>
Comparison Operators
Comparison operators are used to compare values and return true or false.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparison Operators</title>
</head>
<body>
<script>
let a = 10;
let b = 5;
console.log("a > b:", a > b); // Output: true
console.log("a < b:", a < b); // Output: false
console.log("a === b:", a === b); // Output: false (strict equality)
console.log("a !== b:", a !== b); // Output: true (strict inequality)
</script>
</body>
</html>
Logical Operators
Logical operators are used to combine conditional statements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logical Operators</title>
</head>
<body>
<script>
let x = 10;
let y = 5;
let z = 15;
console.log("x > y && x < z:", x > y && x < z); // Output: true (both conditions are true)
console.log("x > y || x > z:", x > y || x > z); // Output: true (at least one condition is true)
console.log("!(x > y):", !(x > y)); // Output: false (negation of true is false)
</script>
</body>
</html>
Conditional (Ternary) Operator
The conditional operator (ternary operator) is used for conditional expressions.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Operator</title>
</head>
<body>
<script>
let age = 18;
let message = (age >= 18) ? "You are an adult" : "You are a minor";
console.log(message); // Output: "You are an adult"
</script>
</body>
</html>
String Concatenation Operator
The plus operator (+) can also be used for string concatenation.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String Concatenation Operator</title>
</head>
<body>
<script>
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log("Full Name:", fullName); // Output: "John Doe"
</script>
</body>
</html>
Bitwise Operators
Bitwise operators perform bitwise operations on integers.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bitwise Operators</title>
</head>
<body>
<script>
let a = 5; // Binary: 0101
let b = 3; // Binary: 0011
console.log("a & b:", a & b); // Output: 1 (AND)
console.log("a | b:", a | b); // Output: 7 (OR)
console.log("a ^ b:", a ^ b); // Output: 6 (XOR)
console.log("~a:", ~a); // Output: -6 (NOT)
console.log("a << 1:", a << 1); // Output: 10 (left shift)
console.log("a >> 1:", a >> 1); // Output: 2 (right shift)
</script>
</body>
</html>
These examples showcase different JavaScript operators and how they can be used in HTML documents to perform various operations on data and variables.
Practice Excercise Practice now