Conditional Statements: Making Decisions in JavaScript 😎🔀
Tags: webdev, javascript, beginners, programming
Published: 2023-08-21 05:12:22

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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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](https://medium.com/techsoftware) 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](https://dev.to/aswin2001barath/series/24169)** 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [W3Schools JavaScript Tutorial](https://www.w3schools.com/js/default.asp)
- [Complete Web Developer Course](https://dev.to/aswin2001barath/the-complete-web-developer-in-2022-zero-to-mastery-5dm1)
- [Junior to Senior Developer Course](https://dev.to/aswin2001barath/junior-to-senior-developer-roadmap-477p)
- [Top 5 JavaScript Courses on Udemy](https://dev.to/aswin2001barath/top-5-javascript-courses-on-udemy-is-it-worth-it-3523)
- [JavaScript Roadmap — The Basics: Event](https://youtu.be/ry8i5Qam7RI)
- [FreeCodeCamp **Front End Development Libraries**](https://www.freecodecamp.org/learn/front-end-development-libraries/)
- [FreeCodeCamp **Back End Development and APIs**](https://www.freecodecamp.org/learn/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🙂.