Javascript Operators 🧮 - Lesson 5

Introduction

JavaScript operators are the fundamental building blocks of scripting in web development. Think of them as special symbols or keywords that tell the JavaScript engine to perform specific mathematical, relational, or logical operations and return a result. From basic arithmetic to complex decision-making, these operators play a crucial role in manipulating data and controlling the flow of your code. Let’s briefly delve into the various types of operators JavaScript offers, enabling you to write efficient and effective code. 🚀💻

1. Arithmetic Operators: The Math Magicians 🎩✨

Arithmetic operators in JavaScript are tools that perform basic mathematical operations. They are fundamental in processing numerical data, making them indispensable in coding. Here’s a brief overview of each, followed by a combined code snippet illustrating their use.

Operators Overview:

• Addition (+): Adds numbers or concatenates strings.
• Subtraction (-): Finds the difference between numbers.
• Multiplication (*): Multiplies two numbers.
• Division (/): Divides the first number by the second.
• Modulus (%): Returns the remainder of a division.

Here’s a code snippet demonstrating all these operators in action:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

let num1 = 15;
let num2 = 6;

// Addition
let sum = num1 + num2; // 21

// Subtraction
let difference = num1 - num2; // 9

// Multiplication
let product = num1 * num2; // 90

// Division
let quotient = num1 / num2; // 2.5

// Modulus
let remainder = num1 % num2; // 3

In this snippet, num1 and num2 are our operands. We perform each arithmetic operation on these numbers and store the results in respective variables, which are then logged to the console.

2. Assignment Operators 📝

Assignment operators in JavaScript are essential for both assigning and efficiently updating variable values. These operators make your code cleaner and more concise by combining assignment with arithmetic operations. Let’s delve into each operator and see them in action through a comprehensive example.

Operators Overview:

• Assign (=): Directly assigns a value to a variable.
• Add and Assign (+=): Adds a value to the variable and then assigns the result (equivalent to a = a + value).
• Subtract and Assign (-=): Subtracts a value from the variable and then assigns the result (similar to a = a - value).
• Multiply and Assign (_=): Multiplies the variable by a value and then assigns the result (like a = a _ value).
• Divide and Assign (/=): Divides the variable by a value and then assigns the result (akin to a = a / value).
• Modulus and Assign (%=): Applies modulus operation on the variable with a value and then assigns the result (comparable to a = a % value).

Let’s see these operators in a practical scenario:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

let a = 10;

// Assign
let b = a; // b is now 10

// Add and Assign
a += 5; // Equivalent to a = a + 5, a is now 15

// Subtract and Assign
a -= 3; // Similar to a = a - 3, a is now 12

// Multiply and Assign
a *= 2; // Like a = a * 2, a is now 24

// Divide and Assign
a /= 4; // Akin to a = a / 4, a is now 6

// Modulus and Assign
a %= 5; // Comparable to a = a % 5, a is now 1

In this snippet, we start with variable a and use various assignment operators to update its value. Each operation is an efficient shorthand for the corresponding arithmetic operation combined with an assignment. For instance, a += 5 is a more concise way of writing a = a + 5. This simplification not only makes your code more readable but also reduces the likelihood of errors in complex calculations.

3. Comparison Operators 🔍

Comparison operators in JavaScript are essential for comparing two values. They are the decision-makers in your code, helping to control the flow based on conditions. Let’s dive into each operator and understand their usage with an example.

• Equal (==): Checks if two values are equal, disregarding their type.
• Strict Equal (===): Checks if two values are equal in both value and type.
• Not Equal (!=): Determines if two values are not equal, irrespective of their type.
• Strict Not Equal (!==): Determines if two values are not equal in either value or type.
• Greater Than (>): Checks if the left value is greater than the right one.
• Less Than (<): Checks if the left value is less than the right one.
• Greater Than or Equal To (>=): Checks if the left value is greater than or equal to the right one.
• Less Than or Equal To (<=): Checks if the left value is less than or equal to the right one.

Here’s a code snippet to illustrate how these operators work:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

let x = 5,
  y = "5",
  z = 10;

// Equal
console.log(x == y); // true, as value is equal

// Strict Equal
console.log(x === y); // false, as type is different (number vs string)

// Not Equal
console.log(x != z); // true, as values are different

// Strict Not Equal
console.log(x !== y); // true, as type is different

// Greater Than
console.log(z > x); // true, as 10 is greater than 5

// Less Than
console.log(x < z); // true, as 5 is less than 10

// Greater Than or Equal To
console.log(z >= x); // true, as 10 is equal to or greater than 5

// Less Than or Equal To
console.log(x <= z); // true, as 5 is equal to or less than 10

In this example, x, y, and z are variables used to demonstrate different comparison operations. These operators are crucial in making decisions within your code, such as in if statements and loops. Understanding the difference between == and === is particularly important, as it can impact the logic of your code significantly.

Logical Operators 🔀

Logical operators in JavaScript are the pillars of decision-making in your code. They allow you to combine multiple conditions and make logical determinations based on them. Understanding these operators is crucial for controlling the flow of your programs effectively. Let’s explore each operator with examples to grasp their functionality.

• AND (&&): Returns true if both operands are true. It’s the strict gatekeeper, ensuring all conditions must be met.
• OR (||): Returns true if at least one of the operands is true. It’s more flexible, allowing for multiple paths to validation.
• NOT (!): Inverts the truthiness of the operand. If a condition is true, ! makes it false, and vice versa.

Here’s a code snippet that illustrates the use of these logical operators:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

let a = 5,
  b = 10,
  c = "5";

// AND Operator
console.log(a < b && a == c); // true, because both conditions are true

// OR Operator
console.log(a > b || a == c); // true, because at least one condition (a == c) is true

// NOT Operator
console.log(!(a === c)); // true, because a === c is false (type mismatch), and NOT inverts it

Logical operators are fundamental in creating sophisticated conditions that guide the execution paths in your JavaScript code. They are particularly useful in if statements, loops, and any scenario requiring conditional logic.

Increment/Decrement Operators ⬆️⬇️

In JavaScript, increment and decrement operators are used to increment or decrement the value of a variable by 1. These operators are commonly used in loops to control the flow of your code.

Increment (++): Increases a number’s value by one.

• Pre-Increment (++variable): Increments the variable and then returns the value.
• Post-Increment (variable++): Returns the value and then increments the variable.

Decrement (–): Decreases a number’s value by one.

• Pre-Decrement (–variable): Decrements the variable and then returns the value.
• Post-Decrement (variable–): Returns the value and then decrements the variable.

Let’s see how these operators work in practice:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

let count = 5;

// Pre-Increment
console.log(++count); // Outputs 6: count is incremented first, then returned

// Post-Increment
console.log(count++); // Outputs 6: count is returned first, then incremented
console.log(count); // Outputs 7: reflecting the post-increment

// Resetting count for decrement examples
count = 5;

// Pre-Decrement
console.log(--count); // Outputs 4: count is decremented first, then returned

// Post-Decrement
console.log(count--); // Outputs 4: count is returned first, then decremented
console.log(count); // Outputs 3: reflecting the post-decrement

In this snippet, count is manipulated using both increment and decrement operators. The difference between pre and post versions is critical:

• Pre-Increment/Decrement modifies the value before it’s used in an expression. It’s like saying, “increase/decrease my value, and then tell me what I am now.”
• Post-Increment/Decrement uses the current value in an expression, and only then modifies the variable. It’s like saying, “tell me what I am first, then increase/decrease my value.”

By mastering increment and decrement operators, you can efficiently manage repetitive tasks and counters in your JavaScript code. 🔄👨‍💻🚀