JavaScript Tutorial 2: Operators & Decision Making

Lesson 1 Review

In our first lesson, we learned how to link a JavaScript file to our HTML, how to print messages using console.log(), and how to store data using let and const. Today, we will learn how to manipulate that data and use it to make decisions.

Step 1: Arithmetic Operators (Math)

JavaScript can perform all standard mathematical operations. You use these operators to calculate totals, update scores, or figure out screen coordinates.

• + (Addition)
• - (Subtraction)
• * (Multiplication)
• / (Division)
• ** (Exponentiation / Power)
• % (Modulo / Remainder) - This divides two numbers and returns ONLY the remainder. It is incredibly useful for finding out if a number is even or odd.

The JavaScript:

let score = 10;
score = score + 5; // score is now 15

// Shorthand Assignment (Does the exact same thing as above!)
score += 5; // score is now 20

let remainder = 10 % 3; // 10 divided by 3 is 9, with 1 left over.
console.log(remainder); // Outputs: 1

Step 2: Comparison Operators (The Equality Trap)

To make a decision, a computer must compare two values and determine if the statement is true or false. This is where junior developers make their biggest mistakes.

• > (Greater than)
• < (Less than)
• >= (Greater than or equal to)

The Difference Between == and ===

In JavaScript, a single equals sign = is used to assign a value to a variable (e.g., let x = 5;). To compare two values, you must use double or triple equals.

Loose Equality (==): Checks if the values are the same, but ignores the Data Type. (e.g., 5 == "5" is TRUE).

Strict Equality (===): Checks if both the value AND the Data Type are exactly the same. (e.g., 5 === "5" is FALSE). Professional developers ALWAYS use === to prevent bugs.

The JavaScript:

let age = 18; // This is a Number
let ageInput = "18"; // This is a String (Text) from a form

console.log(age == ageInput); // true (Loose - Dangerous!)
console.log(age === ageInput); // false (Strict - Safe!)

// We also have Strict NOT Equal (!==)
console.log(10 !== "10"); // true (Because a number is NOT perfectly equal to a string)

Step 3: Conditionals (If / Else Statements)

Now that we can compare values, we can write logic. The if statement tells the browser: "If this condition is true, run this block of code. If it is false, skip it."

We combine JavaScript logic with HTML and CSS by using JS to dynamically change CSS properties!

The HTML, CSS, & JavaScript:

<!-- HTML -->
<div id="status-box" style="padding: 20px; color: white;">Processing...</div>

<!-- JavaScript -->
let userBalance = 50;
let itemCost = 100;
// Grab the HTML box using its ID
let box = document.getElementById("status-box");

if (userBalance >= itemCost) {
  // If they have enough money
  box.innerHTML = "Purchase Successful!";
  box.style.backgroundColor = "green";
} else {
  // If the 'if' statement was FALSE, run this instead
  box.innerHTML = "Error: Insufficient Funds.";
  box.style.backgroundColor = "red";
}

The Output (Because 50 is NOT greater than or equal to 100, the ELSE block runs):

Error: Insufficient Funds.

Step 4: Logical Operators (AND / OR)

Sometimes a decision requires multiple conditions to be true at the exact same time. We chain conditions together using Logical Operators.

• && (AND): Both sides must be true.
• || (OR): At least one side must be true.

The JavaScript:

let hasTicket = true;
let isVIP = false;

// Using OR (||) - The user gets in if they have a ticket OR if they are a VIP.
if (hasTicket === true || isVIP === true) {
  console.log("Access Granted.");
}

let passwordLength = 8;
let hasSpecialChar = true;

// Using AND (&&) - BOTH conditions must be met to create an account.
if (passwordLength >= 8 && hasSpecialChar === true) {
  console.log("Strong Password Accepted.");
}

Final Quiz: Test Your Logic

Click the buttons below to verify your knowledge.

1. What is the mathematical result of `15 % 4` in JavaScript?

A) 3.75

Incorrect. That is the result of standard division (`/`). The modulo operator (`%`) finds the remainder.

B) 3

Correct! 4 goes into 15 three times (which is 12). The leftover remainder is 3.

C) 4

Incorrect. Modulo calculates the remainder.

2. Why is `===` vastly superior to `==` in JavaScript?

A) It executes the code faster.

Incorrect. Execution speed is not the primary benefit here.

B) Because it checks strict equality (both Value AND Data Type), preventing bugs where JavaScript accidentally assumes the number 5 is identical to the word "5".

Correct! Loose equality (`==`) tries to force different data types to match, which causes unpredictable, catastrophic bugs in large codebases. Always use strict equality (`===`).

C) It assigns a variable permanently so it cannot be changed.

Incorrect. That is what the `const` keyword does.

3. Look at this statement: `if (age > 18 || hasPermission === true)`. When will this block of code run?

A) Only if the user is over 18 AND they have permission.

Incorrect. That logic would require the AND (`&&`) operator.

B) If the user is over 18, OR if they have permission. As long as one side is true, it runs.

Correct! The double pipes `||` represent the Logical OR operator. It only requires a single true condition to succeed.

C) It will crash because you cannot mix numbers and booleans in an if statement.

Incorrect. You can absolutely mix different types of comparisons using logical operators.