Welcome to the fascinating world of JavaScript, where lines of code come alive and make decisions for themselves!

Imagine a scenario where your code has a mind of its own, capable of making choices and taking actions based on different conditions. Well, in JavaScript, this is made possible through the magic of conditional statements. 🪄💻

So, grab your favourite coding beverage and let's dive into the world of decision-making in JavaScript!

The Basics of Conditional Statements

In JavaScript, conditional statements allow us to control the flow of our code based on certain conditions. Think of them as the if-else statements of the programming world. They enable our code to make decisions and perform different actions depending on whether a particular condition is true or false. 🤔

the if statement

The most basic form of a conditional statement in JavaScript is the if statement.

Syntax:

if (condition) {
  // Code to execute if the condition is true
}

It's like a fork in the road, where the code decides which path to take based on the condition. If the condition is true, the code block inside the curly braces will be executed; otherwise, it will be skipped. Simple, right?

Let's see a real example to understand it better. Imagine you're writing a program to check if a given number is even or odd. Here's how you can do it in JavaScript:

let number = 8;

if (number % 2 === 0) {
  console.log("The number is even.");
}

Output:

The number is even.

In this example, the condition number % 2 === 0 checks if the remainder of number divided by 2 is equal to 0. If it is, the code inside the curly braces is executed, and it prints "The number is even." Try running this code, and you'll see the output as expected!

the else statement

But what if we want to handle the opposite case? Here, we can use the else statement!

When combined with if, the else statement allows us to specify an alternative code block to execute if the condition is false. Here's another example:

let number = 7;

if (number % 2 === 0) {
  console.log("The number is even.");
} else {
  console.log("The number is odd.");
}

Output:

The number is odd.

Now our code can cover both sides of the story. If the number is even, it prints "The number is even." Otherwise, it prints "The number is odd." Running this code will give you the expected output based on the value of the number variable.

Expanding the Possibilities with Else If

Sometimes, a simple true or false decision isn't enough. We need more options, more forks in the road. That's where the else if statement comes to the rescue!

With else if, we can test additional conditions if the previous ones turn out to be false. It's like having multiple paths to choose from, each with its own set of conditions. Let's see an example:

let number = 0;
if (number === 0) {
  console.log("The number is zero.");
} else if (number % 2 === 0) {
  console.log("The number is even.");
} else {
  console.log("The number is odd.");
}

Output:

The number is zero.

In this example, we added another condition to check if the number is zero. As the first condition is true and the number is zero, it prints "The number is zero." Give it a try with different values of number and see how the output changes accordingly!

Logical Operators: Combining Conditions

Now, what if we want to test multiple conditions at the same time?

That's where logical operators come into play. They allow us to combine conditions and create more complex decision-making structures.

JavaScript offers three logical operators:

1. && (AND),
2. || (OR),
3. ! (NOT).

These symbols give our code superpowers, enabling it to evaluate multiple conditions simultaneously. Let's see them in action:

The && (AND) operator

The && operator checks if both conditions are true. It's like saying, "I want my code to take action only if both of these things are true." For example:

let number = 10;

if (number > 0 && number < 100) {
  console.log("The number is between 0 and 100.");
}

Output:

The number is between 0 and 100.

In this example, the code checks if the number variable is greater than 0 and less than 100. If both conditions are true, it prints "The number is between 0 and 100." Try changing the value of number and observe the output.

The || (OR) operator

The || operator checks if either condition is true. It's like saying, "I'm happy as long as one of these things is true." For example:

let color = "red";

if (color === "red" || color === "blue") {
  console.log("The color is either red or blue.");
}

Output:

The color is either red or blue.

In this example, the code checks if the color variable is equal to "red" or "blue." If either condition is true, it prints "The color is either red or blue." Change the value of color and see how the output changes.

The ! (NOT) operator

The ! operator negates a condition. It's like saying, "Hey, code, please do the opposite of what this condition says." For example:

let loggedIn = false;

if (!loggedIn) {
  console.log("Please log in to continue.");
}

Output:

Please log in to continue.

In this example, the code checks if the loggedIn variable is not true. If the condition is true (i.e., loggedIn is false), it prints "Please log in to continue." Try changing the value of loggedIn and observe the output.

These logical operators add a new dimension to our decision-making capabilities. With them, our code becomes smarter and more adaptable! 🧠💪

Wrapping Up

Congratulations! You've now unlocked the power of conditional statements in JavaScript. You can now create code that makes decisions, takes different paths, and adapts to various scenarios. Your code is no longer bound by a single linear path. It can branch out, explore, and make choices. 🌟

Remember, conditional statements are a fundamental tool in JavaScript, and mastering them will take your coding skills to the next level. So go forth, embrace the power of decisions, and let your code navigate the twists and turns of programming with confidence!

Who Am I?

I’m Aswin Barath, a Software Engineering Nerd who loves building Web Applications, now sharing my knowledge through Blogging during the busy time of my freelancing work life. Here’s the link to all of my socials categorized by platforms under one place: https://linktr.ee/AswinBarath

Join me to learn JavaScript!

Checkout the JavaScript Roadmap Series where my mission is to share my knowledge on JavaScript: https://dev.to/aswin2001barath/series/24169

Learn what I know about JavaScript from any of my favourite knowledge sources:

• MDN Web Docs
• W3Schools JavaScript Tutorial
• Complete Web Developer Course
• Junior to Senior Developer Course
• Top 5 JavaScript Courses on Udemy
• JavaScript Roadmap — The Basics: Event
• FreeCodeCamp Front End Development Libraries
• FreeCodeCamp Back End Development and APIs

Keep Learning

So, keep coding, keep exploring, and always embrace the fun and creativity that JavaScript brings. May the force of JavaScript be with you as you continue your quest to conquer the web! 🚀

Now, go forth, young Jedi, and may your JavaScript adventures be filled with laughter, joy, and endless lines of epic code! May the code be with you! ✨

Thank you so much for reading my blog🙂.