JavaScript - Operators

Hello there, future JavaScript wizards! I'm thrilled to be your guide on this exciting journey into the world of JavaScript operators. As someone who's been teaching programming for years, I can tell you that understanding operators is like learning the secret handshake of the coding world. So, let's dive in and unravel these mysteries together!

What is an Operator?

Before we jump into the nitty-gritty, let's start with the basics. In JavaScript, an operator is a special symbol used to perform operations on operands (values and variables). Think of operators as the verbs in the language of programming – they're the actions that make things happen!

For example, in the expression 2 + 3, the + is the operator, while 2 and 3 are the operands. Simple, right?

JavaScript Arithmetic Operators

Now, let's talk about arithmetic operators. These are the bread and butter of mathematical operations in JavaScript. Remember those math classes you took? Well, it's time to dust off that knowledge!

Here's a table of arithmetic operators:

Operator	Description	Example
+	Addition	5 + 3 = 8
-	Subtraction	5 - 3 = 2
*	Multiplication	5 * 3 = 15
/	Division	15 / 3 = 5
%	Modulus (Remainder)	5 % 2 = 1
++	Increment	Let x = 5; x++; (Now x is 6)
--	Decrement	Let x = 5; x--; (Now x is 4)

Let's see these in action:

let a = 10;
let b = 5;

console.log(a + b); // Output: 15
console.log(a - b); // Output: 5
console.log(a * b); // Output: 50
console.log(a / b); // Output: 2
console.log(a % b); // Output: 0

a++; // a is now 11
console.log(a); // Output: 11

b--; // b is now 4
console.log(b); // Output: 4

Each line in this code snippet demonstrates how these operators work. The modulus operator (%) might be new to some of you – it gives you the remainder after division. It's incredibly useful when you need to check if a number is even or odd!

JavaScript Comparison Operators

Next up, we have comparison operators. These are like the judges in a programming contest – they compare values and return true or false. They're essential for making decisions in your code.

Here's a table of comparison operators:

Operator	Description	Example
==	Equal to	5 == 5 returns true
===	Strict equal to (value and type)	5 === "5" returns false
!=	Not equal to	5 != 3 returns true
!==	Strict not equal to	5 !== "5" returns true
>	Greater than	5 > 3 returns true
<	Less than	5 < 3 returns false
>=	Greater than or equal to	5 >= 5 returns true
<=	Less than or equal to	5 <= 3 returns false

Let's see these in action:

let x = 5;
let y = "5";

console.log(x == y);  // Output: true
console.log(x === y); // Output: false
console.log(x != y);  // Output: false
console.log(x !== y); // Output: true
console.log(x > 3);   // Output: true
console.log(x < 10);  // Output: true
console.log(x >= 5);  // Output: true
console.log(x <= 4);  // Output: false

Notice the difference between == and ===. The triple equals (===) checks both value and type, while double equals (==) only checks value. This is a common source of bugs for beginners, so always be mindful of which one you're using!

JavaScript Logical Operators

Logical operators are the decision-makers in JavaScript. They help you combine multiple conditions and make complex decisions. Think of them as the wise elders of the programming village, guiding your code to make the right choices.

Here's a table of logical operators:

Operator	Description	Example
&&	Logical AND	(x > 0 && x < 10)
||	Logical OR	(x === 5 || y === 5)
!	Logical NOT	!(x === y)

Let's see these in action:

let a = 5;
let b = 10;

console.log(a > 0 && b < 20);  // Output: true
console.log(a > 10 || b === 10);  // Output: true
console.log(!(a === b));  // Output: true

The && operator returns true only if both conditions are true. The || operator returns true if at least one condition is true. The ! operator flips the boolean value – it turns true to false and false to true.

JavaScript Bitwise Operators

Now, we're entering the realm of bitwise operators. These operators work on the bits of integer values. They're like the secret agents of the programming world – not used often, but incredibly powerful when needed.

Here's a table of bitwise operators:

Operator	Description
&	Bitwise AND
|	Bitwise OR
^	Bitwise XOR
~	Bitwise NOT
<<	Left shift
>>	Sign-propagating right shift
>>>	Zero-fill right shift

These operators are a bit advanced, so don't worry if they seem confusing at first. As you progress in your JavaScript journey, you'll encounter situations where they come in handy.

JavaScript Assignment Operators

Assignment operators are used to assign values to variables. They're like the movers in the programming world – they put things where they belong.

Here's a table of assignment operators:

Operator	Description	Example
=	Assignment	x = 5
+=	Addition assignment	x += 3 is same as x = x + 3
-=	Subtraction assignment	x -= 3 is same as x = x - 3
*=	Multiplication assignment	x = 3 is same as x = x 3
/=	Division assignment	x /= 3 is same as x = x / 3
%=	Modulus assignment	x %= 3 is same as x = x % 3

Let's see these in action:

let x = 5;
console.log(x); // Output: 5

x += 3;
console.log(x); // Output: 8

x -= 2;
console.log(x); // Output: 6

x *= 4;
console.log(x); // Output: 24

x /= 3;
console.log(x); // Output: 8

x %= 3;
console.log(x); // Output: 2

These operators are shortcuts that make your code more concise and readable. They're like the Swiss Army knives of the programming world – versatile and handy!

JavaScript Miscellaneous Operators

Lastly, let's look at some miscellaneous operators that don't fit neatly into the other categories.

1. Conditional (Ternary) Operator: This is a shorthand for an if-else statement.

   let age = 20;
   let canVote = (age >= 18) ? "Yes" : "No";
   console.log(canVote); // Output: "Yes"

   This operator checks if age >= 18 is true. If it is, it assigns "Yes" to canVote, otherwise it assigns "No".

2. typeof Operator: This returns a string indicating the type of the operand.

   console.log(typeof 42);        // Output: "number"
   console.log(typeof 'blubber'); // Output: "string"
   console.log(typeof true);      // Output: "boolean"
   console.log(typeof [1, 2, 4]); // Output: "object"

3. delete Operator: This deletes an object's property or an element of an array.

   let person = {name: "John", age: 30};
   delete person.age;
   console.log(person); // Output: {name: "John"}

And there you have it, folks! We've journeyed through the land of JavaScript operators. Remember, practice makes perfect. So, don't be afraid to experiment with these operators in your own code. Happy coding!

Credits: Image by storyset