Operators and Conditionals

JavaScript operators and conditionals are fundamental building blocks of any web application. They allow you to perform calculations, compare values, and make decisions in your code, making your websites dynamic and interactive.

What are Operators?

Operators are symbols that perform operations on values (called operands). Think of them like the mathematical symbols you learned in school. JavaScript offers various types of operators, including arithmetic, comparison, logical, and assignment operators. Arithmetic operators perform calculations, comparison operators compare values, logical operators combine conditions, and assignment operators assign values to variables.

Basic Operators and Example

Let’s start with some common operators:

+ (Addition): Adds two numbers.
- (Subtraction): Subtracts two numbers.
* (Multiplication): Multiplies two numbers.
/ (Division): Divides two numbers.
= (Assignment): Assigns a value to a variable.
== (Equality): Checks if two values are equal (loose comparison).
=== (Strict Equality): Checks if two values are equal and of the same type (recommended).


// Arithmetic operators
let num1 = 10;
let num2 = 5;
let sum = num1 + num2; // sum will be 15
let difference = num1 - num2; // difference will be 5
 
// Assignment operator
let myName = "Alice";
 
// Strict equality
let isEqual = (5 === "5"); // isEqual will be false (different types)

What are Conditionals (if/else)?

Conditionals, such as if/else statements, allow your code to make decisions based on certain conditions. They check if a condition is true and execute a specific block of code if it is. If the condition is false, an optional else block can be executed.

Practical Usage: Checking User Input

Here’s an example of how you might use if/else to validate user input in a simple HTML form:


<!DOCTYPE html>
<html>
<head>
  <title>User Input Validation</title>
</head>
<body>
  <input type="number" id="ageInput" placeholder="Enter your age">
  <button onclick="checkAge()">Check Age</button>
  <p id="message"></p>
 
  <script>
    function checkAge() {
      let age = document.getElementById("ageInput").value;
      let message = document.getElementById("message");
 
      if (age >= 18) {
        message.textContent = "You are an adult!";
      } else {
        message.textContent = "You are a minor.";
      }
    }
  </script>
</body>
</html>

In this example, the JavaScript code checks the user’s age. If the age is 18 or older, it displays “You are an adult!”. Otherwise, it displays “You are a minor.”

Key Takeaways

Operators perform actions on values (e.g., adding numbers, comparing values).
if/else statements allow your code to make decisions based on conditions.
Use === (strict equality) for the most reliable comparisons.
Operators and conditionals are crucial for creating interactive web applications.
Practice these concepts regularly to become more proficient in JavaScript.