Operators in JavaScript

Operators are the building blocks of any programming language. They perform actions on values, manipulate data, and control the flow of your JavaScript programs. This chapter will delve into the world of JavaScript operators, providing a thorough explanation from the ground up, covering all the essential concepts you'll need to master operator usage. We'll explore various operator categories, their functionalities, and practical code examples to solidify your understanding.

Arithmetic Operators

  • Description: These operators perform basic mathematical operations on numbers.
  • Operators:
    • + (Addition): Adds two operands (numbers).
    • - (Subtraction): Subtracts the second operand from the first.
    • * (Multiplication): Multiplies two operands.
    • / (Division): Divides the first operand by the second.
    • % (Modulo): Returns the remainder after division.
    • ++ (Increment): Increments (adds 1) to a variable’s value (can be used in prefix or postfix notation).
    • -- (Decrement): Decrements (subtracts 1) from a variable’s value (can be used in prefix or postfix notation).

Examples:

				
					let x = 10, y = 5;

console.log(x + y);      // Output: 15 (Addition)
console.log(x - y);      // Output: 5 (Subtraction)
console.log(x * y);      // Output: 50 (Multiplication)
console.log(x / y);      // Output: 2 (Division)
console.log(x % y);      // Output: 0 (Modulo - no remainder)

x++;                     // x becomes 11 (Prefix increment)
console.log(x);          // Output: 11
y--;                     // y becomes 4 (Postfix decrement)
console.log(y);          // Output: 4

Assignment Operators

  • Description: These operators assign values to variables.
  • Operators:
    • = (Simple assignment): Assigns the value on the right to the variable on the left.
    • +=, -=, *=, /=, %= (Compound assignment): Combines assignment with the corresponding arithmetic operator (e.g., x += y is equivalent to x = x + y).

Examples:

				
					let age = 25;

age += 10;              // age becomes 35 (Compound addition)
age *= 2;              // age becomes 70 (Compound multiplication)

Comparison Operators

  • Description: These operators compare values and return a boolean (true or false) based on the comparison.
  • Operators:
    • == (Loose equality): Checks for equal value (may perform type coercion).
    • === (Strict equality): Checks for equal value and type.
    • != (Loose inequality): Checks for not equal (may perform type coercion).
    • !== (Strict inequality): Checks for not equal and not same type.
    • < (Less than)
    • > (Greater than)
    • <= (Less than or equal to)
    • >= (Greater than or equal to)
				
					let a = 10, b = "10";

console.log(a == b);      // Output: true (Loose equality - type coercion)
console.log(a === b);     // Output: false (Strict equality - different types)
console.log(a != b);      // Output: false (Loose inequality - coerced to equal)
console.log(a !== b);     // Output: true (Strict inequality - different types)
console.log(a < b);       // Output: false (10 is not less than "10")

Logical Operators

Logical operators are essential tools in JavaScript for combining conditions and controlling the flow of your program’s logic. They operate on boolean values (true or false) and return a boolean result based on the specific operator used. Let’s delve deeper into the two primary logical operators: && (AND) and || (OR).

1. Logical AND (&&)

Behavior: The && operator performs a conjunction (AND) operation on two boolean expressions. It returns true only if both operands evaluate to true. Otherwise, it returns false.

Explanation:

Imagine && as a strict gatekeeper. Both conditions (operands) must be true for the gate to allow passage and return true. If even one condition is false, the gate remains closed, and the operator returns false.

Examples:

				
					let isLoggedIn = true;
let hasPermission = true;

// Both conditions must be true for access
if (isLoggedIn && hasPermission) {
  console.log("You have access!");
} else {
  console.log("Access denied.");
}

// Output: You have access! (Both conditions are true)

let isNight = false;
let isCold = true;

// Only if both are true will we wear a jacket
if (isNight && isCold) {
  console.log("Time for a jacket!");
} else {
  console.log("No jacket needed today.");
}

// Output: No jacket needed today. (isNight is false)

2 Logical OR (||)

Behavior: The || operator performs a disjunction (OR) operation on two boolean expressions. It returns true if at least one operand evaluates to true. If both operands are false, then it returns false.

Explanation:

Think of || as a more lenient gatekeeper. As long as one condition (operand) is true, the gate opens and returns true. If both conditions are false, the gate remains closed, and the operator returns false.

Examples:

				
					let isWeekend = true;
let isSchoolDay = false;

// As long as one is true, it's a good day for relaxation
if (isWeekend || isSchoolDay) { // !isSchoolDay is also true
  console.log("Time to relax!");
} else {
  console.log("Time to work hard!");
}

// Output: Time to relax! (isWeekend is true)

let isRaining = false;
let isSnowing = false;

// Only if at least one is true will we use an umbrella
if (isRaining || isSnowing) {
  console.log("Grab your umbrella!");
} else {
  console.log("No umbrella needed today.");
}

// Output: No umbrella needed today. (Both are false)
  • Logical operators are often used within conditional statements (if, else if, else) to create complex decision-making logic.
  • The order of evaluation for && and || is left-to-right. However, due to short-circuiting behavior (explained below), this might not always matter.
  • Short-circuiting: In JavaScript, logical operators exhibit short-circuiting behavior. This means the evaluation of the second operand might be skipped if the result can be determined based on the first operand alone.
  • For &&, if the first operand is false, there’s no need to evaluate the second operand because the entire expression will be false regardless.
  • For ||, if the first operand is true, there’s no need to evaluate the second operand because the entire expression will be true regardless.

Operators Table

CategoryOperatorsDescriptionExampleOutput
Arithmetic Operators+, -, *, /, %, ++, --Perform basic mathematical operations on numbers (addition, subtraction, multiplication, division, modulo, increment, decrement).let x = 10, y = 5; console.log(x + y);15 (Addition)
console.log(x - y);5 (Subtraction)
console.log(x * y);50 (Multiplication)
console.log(x / y);2 (Division)
console.log(x % y);0 (Modulo - no remainder)
x++; console.log(x);11 (Prefix increment)
y--; console.log(y);4 (Postfix decrement)
Assignment Operators!ERROR! B9 -> Formula Error: Unexpected ,Assign values to variables or combine assignment with arithmetic operations (e.g., x += y is equivalent to x = x + y).let age = 25; age += 10; console.log(age);35 (Compound addition)
age *= 2; console.log(age);70 (Compound multiplication)
Comparison Operators!ERROR! B11 -> Formula Error: Unexpected operator '='Compare values and return a boolean (true or false) based on the comparison (equality, less than, greater than, etc.).let a = 10, b = "10"; console.log(a == b);true (Loose equality - type coercion)
console.log(a === b);false (Strict equality - different types)
console.log(a != b);false (Loose inequality - coerced to equal)
console.log(a !== b);true (Strict inequality - different types)
console.log(a < b);false (10 is not less than "10")
Logical Operators&&, ``Combine conditional expressions and control the flow of program logic (AND, OR).let isLoggedIn = true, hasPermission = true; if (isLoggedIn && hasPermission) { ... }
let isNight = false, isCold = true; if (isNight && isCold) { ... }No jacket needed today. (isNight is false)
`let isWeekend = true, isSchoolDay = false; if (isWeekendisSchoolDay) { ... }`
`let isRaining = false, isSnowing = false; if (isRainingisSnowing) { ... }`
Bitwise Operators&, `,^,~,<<,>>,>>>`Perform bitwise operations on integers (manipulate individual bits within a number).(Advanced, not covered in detail here)

In conclusion, JavaScript operators are fundamental tools for performing actions, manipulating data, and controlling program flow. Understanding arithmetic, assignment, comparison, and logical operators is crucial for effective programming. Logical operators, such as && and ||, allow for sophisticated decision-making logic, while their short-circuiting behavior optimizes performance by skipping unnecessary evaluations. Happy coding !❤️

Table of Contents

Home
Roadmap
ATS Resume
Playground
Resources