Operators in JavaScript are symbols that perform operations on one or more operands (values). They enable you to perform computations, assign values, compare values, and more.
Arithmetic operators perform basic mathematical operations on numbers.
let x = 10;
let y = 5;
let sum = x + y; // 15
let difference = x - y; // 5
let product = x * y; // 50
let quotient = x / y; // 2
let remainder = x % y; // 0
let result = 2 ** 3; // result is 8 (2 raised to the power of 3)
Assignment operators assign values to variables.
let x = 10; // Assigns the value 10 to the variable x
let num = 5;
num += 3; // Equivalent to num = num + 3, so num becomes 8
let total = 20;
total -= 7; // Equivalent to total = total - 7, so total becomes 13
let quantity = 3;
quantity *= 4; // Equivalent to quantity = quantity * 4, so quantity becomes 12
let price = 30;
price /= 2; // Equivalent to price = price / 2, so price becomes 15
let remainder = 17;
remainder %= 5; // Equivalent to remainder = remainder % 5, so remainder becomes 2
let base = 2;
base **= 3; // Equivalent to base = base ** 3, so base becomes 8
let text = "Hello";
text += " World"; // Equivalent to text = text + " World", so text becomes "Hello World"
Comparison operators compare values and return a Boolean result.
let x = 5;
let y = "5";
document.getElementById("html-div").innerHTML += `${(x == y)} <br/>`; // true, because value is the same (type coercion)
let a = 10;
let b = "15";
document.getElementById("html-div").innerHTML += `${(a != b)} <br/>`; // true, because values are not the same (type coercion)
let p = 7;
let q = "7";
document.getElementById("html-div").innerHTML += `${(p === q)} <br/>`; // false, because although values are the same, data types are different
let m = 3;
let n = "3";
document.getElementById("html-div").innerHTML += `${(m !== n)} <br/>`; // true, because values are the same but data types are different
let age = 25;
document.getElementById("html-div").innerHTML += `${(age > 18)} <br/>`; // true, because 25 is greater than 18
let score = 85;
document.getElementById("html-div").innerHTML += `${(score < 90)} <br/>`; // true, because 85 is less than 90
let value = 50;
document.getElementById("html-div").innerHTML += `${(value >= 50)} <br/>`; // true, because 50 is equal to 50
let temperature = 28;
document.getElementById("html-div").innerHTML += `${(temperature <= 30)} <br/>`; // true, because 28 is less than 30
Logical operators perform logical operations and return a Boolean result.
var x = 10;
var y = 5;
document.getElementById("html-div").innerHTML += `${(x > 5 && y > 3)} <br/>` // true, both conditions are true
var a = 7;
var b = 3;
document.getElementById("html-div").innerHTML += `${(a > 5 || b > 10)} <br/>` // true, one condition (a > 5) is true
var isOpen = false;
document.getElementById("html-div").innerHTML += `${!isOpen} <br/>` // true, because isOpen is false
//Logical operators are often used in combination to create more complex conditions:
var age = 25;
var hasLicense = true;
if (age >= 18 && hasLicense) {
document.getElementById("html-div").innerHTML += "You are eligible to drive" + <br/>
} else {
document.getElementById("html-div").innerHTML += "You cannot drive" + <br/>
}
Unary operators operate on a single operand.
let str = "42";
let num = +str; // Converts "42" to a number 42
let positiveNumber = 10;
let negativeNumber = -positiveNumber; // Converts 10 to -10
let count = 5;
count++; // count becomes 6
let score = 8;
score--; // score becomes 7
let isTrue = true;
let isFalse = !isTrue; // isFalse becomes false
let name = "John";
let type = typeof name; // type becomes "string"
Operators are essential for performing a wide range of operations in JavaScript, from mathematical computations to comparisons and logical evaluations.