Let's embark on a journey through the JavaScript operator playground! We're going to explore each one, and I'll show you some rad examples of how to use them. Whether you're doing simple math or making decisions in your code, these operators are your go-to pals.

We'll add, subtract, compare, and do all sorts of coding acrobatics. It's like a rollercoaster ride but for your brain. 🎢💻

But hold on tight, because here's the secret sauce: while operators seem like the superheroes of every programming language, each language has its own quirks and unique use cases. JavaScript is no exception! It's like learning the local dialect of a coding language.

So, as we cruise through JavaScript operators, keep in mind that this knowledge is transferable, but there might be some unique twists. Embrace the quirks, and you'll soon be dancing through the nuances of JavaScript like a coding maestro. 🎶🕺

Ready for the adventure? Let's rock those operators with a dash of JavaScript flair! 🚀💻

Arithmetic Operators

So, in JavaScript, arithmetic operators are like the math wizards 🧙. They do all the number crunching you need. Think of them as your go-to squad for basic math stuff. Let me spill the tea on the common ones:

• + Addition: Adds two or more values:

let sum1 = 5 + 3;
console.log(sum1); // Prints 8

let sum2 = sum1 + 3; // Prints 11
console.log(sum2);

let sum3 = sum1 + sum2; 
console.log(sum3); // Prints 19

• - Subtraction: Subtracts the right operand from the left operand:

let sub1 = 4 - 3;
console.log(sub1); // Prints 1

let sub2 = sub1 - 3; // Prints -2
console.log(sub2);

let sub3 = sub1 - sub2; 
console.log(sub3); // Prints 3

• * Multiplication: Multiplies two values:

let mul1 = 4 * 3;
console.log(mul1); // Prints 12

let mul2 = mul1 * 3; // Prints 36
console.log(mul2);

let mul3 = mul1 * mul2; 
console.log(mul3); // Prints 432

• / Division: Divides the left operand by the right operand:

let dev1 = 200 / 4;
console.log(dev1); // Prints 50

let dev2 = dev1 / 2; // Prints 25
console.log(dev2);

let dev3 = dev1 / dev2; 
console.log(dev3); // Prints 2

• % Modulus: Returns the remainder of the division of the left operand by the right operand:

let mod1 = 200 % 77;
console.log(mod1); // Prints 46

let mod2 = mod1 % 30; // Prints 16
console.log(mod2);

let mod3 = mod2 % mod1; 
console.log(mod3); // Prints 16

• ++ Increment and -- Decrement:

  • ++ increases the value by 1;

  • -- decreases the value by 1;

let num = 10;

num--;
console.log(num); // Prints 9

num++;
console.log(num); // Prints 10

So, these operators are like your math buddies in JavaScript. Ready to throw some numbers around? Let's dive into the fun world of arithmetic! 🚀🧮

Comparison Operators

Alrighty, let's talk about the rockstars of decision-making in JavaScript: Comparison Operators! These cool symbols help you figure out if something is true or false. It's like the JavaScript way of asking, "Hey, are these things the same or different?”

• == Equal to: checks if two things are equal. But beware! It does some type of coercion, so "5" == 5 is true:

const num = 5;
const str = '5';

console.log(num == str); // Prints true; [loose equality]

• != Not equal to: the rebel cousin of Equal. Checks if two things are not equal:

const num = 5;
const str = '5';

console.log(num != str); // Prints false; [loose equality]

• === Strict equal to: this one's a stickler for both value and type. "5" === 5 is false because it cares about types:

const num = 5;
const str = '5';

console.log(num === str); // Prints false; [strict equality]

• !== Strict not equal to: the opposite of Strict Equal. Checks if two things are not equal in both value and type:

const num = 5;
const str = '5';

console.log(num !== str); // Prints true; [strict equality]

• > Greater than: checks if the thing on the left is greater than the thing on the right:

const num1 = 5;
const num2 = 6;
const str = '6';

console.log(num1 > num2); // Prints false;
console.log(num2 > num1); // Prints true;

// Yap, this works. We can compare strings with numbers; 
console.log(str > num1); // Prints true;

• < Less than: checks if the thing on the left is less than the thing on the right:

const num1 = 5;
const num2 = 6;
const str = '6';

console.log(num1 < num2); // Prints true;
console.log(num2 < num1); // Prints false;

// Yap, this works. We can compare strings with numbers; 
console.log(num1 < str); // Prints true;

• >= Greater than or equal to: makes sure the thing on the left is greater than or equal to the thing on the right:

const num1 = 5;
const num2 = 6;
const str = '6';

console.log(num1 >= num1); // Prints true;
console.log(num2 >= num1); // Prints true;
console.log(num1 >= num2); // Prints false;

// Yap, this works. We can compare strings with numbers; 
console.log(str >= num2); // Prints true;

• <= Less than or equal to: checks if the value on the left is less than or equal to the value on the right:

const num1 = 5;
const num2 = 6;
const str = '6';

console.log(num1 <= num1); // Prints true;
console.log(num1 <= num2); // Prints true;
console.log(num2 <= num1); // Prints false;

// Yap, this works. We can compare strings with numbers; 
console.log(num2 <= str); // Prints true;

These operators are like your detective tools, helping you navigate the twists and turns of your code. So, when you're making decisions or comparing values, grab these symbols, and let the JavaScript interrogation begin! 🕵️‍♂️💻

Logical Operators

Meet the logic maestros of JavaScript 🎹 – the Logical Operators! These boys help you make sense of conditions and decision-making in your code. It's like having a set of rules to play by:

• && AND: this one's a team player. It returns true only if both conditions on the left and right are true. It's like saying, "Sure, let's do this, but only if everything checks out!”:

const condition1 = true;
const condition2 = false;
const condition3 = true;

console.log(condition1 && condition2); // Prints false;
console.log(condition1 && condition3); // Prints true;
console.log(condition1 && condition2 && condition3) // Prints false;

• || OR: the laid-back cousin of AND. It returns true if at least one condition on the left or right is true. It's like, "Hey, we're good as long as one of these things is true!”:

const condition1 = true;
const condition2 = false;
const condition3 = false;

console.log(condition1 || condition2); // Prints true;
console.log(condition1 || condition3); // Prints true;
console.log(condition1 || condition2 || condition3) // Prints true;

• ! NOT: the rebel in the group. It flips the truthiness. If something is true, NOT makes it false, and vice versa:

const condition1 = true;
const condition2 = false;

console.log(!condition1); // Prints false;
console.log(!condition2); // Prints true;

These operators are like the bouncers at the entrance of your code club, deciding who gets in and who doesn't. Use them wisely to control the flow of your logic and keep your code dancing to the right beat! 💃🎉

Assignment operators

Let's dive into the world of Assignment Operators in JavaScript – the workhorses 🐎 that let you wrangle and assign values like a coding cowboy! Here are the key players:

• = Assignment: the OG operator. It assigns the value on the right to the variable on the left:

const value = 10;
console.log(value); // Prints 10

• += Addition assignment: adds the value on the right to the existing value on the left. It's like saying, "Take what's there and add a little extra!”:

let value = 13;
value += 2; // equivalent to value = value + 3;

console.log(value); // Prints 15;

• -= Subtraction assignment: subtracts the value on the right from the existing value on the left. It's like saying, "Let's make this a bit smaller.”:

let value = 13;
value -= 2; // equivalent to value = value - 3;

console.log(value); // Prints 11;

• *= Multiplication assignment: multiplies the existing value on the left by the value on the right. It's like saying, "Let's make more of this!”:

let value = 3;
value *= 2; // equivalent to value = value * 2;

console.log(value); // Prints 6;

• /= Division assignment: divides the existing value on the left by the value on the right. It's like saying, "Let's share this in smaller portions.”:

let value = 6;
value /= 2; // equivalent to value = value / 2;

console.log(value); // Prints 3;

• %= Modulus Assignment: assigns the remainder of the division of the left operand by the right operand to the left operand. It's like keeping what's left after sharing:

let value = 6;
value %= 5; // equivalent to value = value % 2;

console.log(value); // Prints 1;

These operators are the lassos in your coding rodeo, letting you round up and control the values in your variables. Saddle up, cowboy! 🤠🚀

Conditional (Ternary) Operator

Alrighty, check out this cool trick in JavaScript – the conditional ternary operator! It's like a snazzy shorthand for an if-else statement. Here's the lowdown:

• If the condition is a thumbs-up, you get the expressionIfTrue as the result.

• But, if the condition is playing hard to get, you snag the expressionIfFalse instead.

It's like making a quick decision on the fly. So, if you're in a rush and need a snappy way to assign values based on conditions, this ternary thing's your go-to move! 🚀✨

const age = 25;
const status = (age >= 18) ? "Adult" : "Minor";

console.log(status); // Outputs: "Adult"

The ternary operator is like your cool shortcut for simple ifs and buts in code. But, you need to use it wisely! Don't go crazy with it. Sure, it trims down your code, but if you overdo it or start nesting them , things might get a bit confusing. Keep it snappy, keep it readable – that's the name of the game! 🎮✨:

const result = (x > 0) ? ((y < 10) ? "Positive and less than 10" : "Positive and not less than 10") : "Non-positive";

For the above case, the better way to do it is to just use the if-else statement:

let result = "";

if (x > 0) {
    if (y < 10) {
        result = "Positive and less than 10";
    } else {
        result = "Positive and not less than 10";
    }
} else {
    result = "Non-positive";
}

Final Thoughts

And there you have it – the wild and wonderful world of JavaScript operators! From the math wizards in the arithmetic realm to the decision-makers in the comparison and logical playgrounds, these operators are your trusty sidekicks in the coding adventure.

As you wield the power of assignment operators to wrangle and control values, and dance with the quirks of increment and decrement, remember that each language has its own unique flavor, and JavaScript is no exception.

The conditional (ternary) operator adds a touch of elegance, offering a snappy shortcut for those on-the-fly decisions. But, as with any tool, use it wisely to maintain code clarity and readability.

So, whether you're adding, subtracting, comparing, or making decisions, these operators are your go-to tools for crafting expressive, dynamic, and efficient JavaScript code. Now, armed with this knowledge, go forth and code boldly! 🚀💻