JavaScript Conditional Logic

Home » JavaScript Tutorial » JavaScript Control Flow and Collections » JavaScript Conditional Logic

This lesson marks the transition from static data to dynamic logic. Conditional logic allows your program to make decisions, executing different blocks of code based on specific criteria. We will also explore Block Scope, which dictates where your variables “live” and where they are inaccessible.

The if, else if, and else Statements

The if statement is the most fundamental way to control code execution. It evaluates a condition inside parentheses; if that condition is truthy, the code block inside the curly braces {} runs.

// Setting a variable to use in IF Statement:
const temperature = 75; // Adjust to change output.

if (temperature > 80) { // If temp greater than 30:
  console.log("It's a hot day!");
} else if (temperature >= 60) { // If temp greater than or equal to 20:
  // Runs if the first condition is false, but this one is true
  console.log("The weather is pleasant.");
} else {
  // Runs if none of the above conditions are met
  console.log("It's a bit chilly.");
}
// Output: "The weather is pleasant."

console.log("----IF with 2 Conditions Example----");

// Check two conditions to see if one of the two is true.
// IF any of the conditions are true the if block will run.
if (true === true || true === false) {
	console.log("One condition is: " + true);
} else {
	console.log("Both conditions are: " + false);
}
// Output: One condition is: true

console.log("----IF with 3 Conditions Example----");

// IF the hour is less than 9 (am) or greater than 17 (5pm)
// OR is true then the office is closed, else open.
let hour = 14; // Office hours between 9-5 (17)
let isWeekend = true;
if (hour < 9 || hour > 17 || isWeekend) {
  console.log("The office is closed.");
} else {
  console.log("The office is open.");
}
// Output: The office is closed. (because isWeekend is true)
JavaScript

The Ternary Operator (? :)

The Ternary Operator, covered on the operators page, is a concise, one-line alternative to an if...else statement. It is often used to assign a value to a variable based on a condition.

Syntax: condition ? valueIfTrue : valueIfFalse

console.log(true ? "Yes" : "No"); // Output: Yes
console.log(false ? "Yes" : "No"); // Output: No

// Use the Ternary Operator to determine if someone is old enough to vote:
const age = 18;
const canVote = age >= 18 ? "Yes, you can vote!" : "No, too young.";
console.log(canVote); // Output: "Yes, you can vote!"
JavaScript

The switch Statement

When you have a single variable that you need to compare against many specific values, a switch statement is often cleaner than a long chain of else if blocks.

  • case: The value you are checking against.
  • break: Prevents the code from “falling through” to the next case.
  • default: Runs if no matches are found (similar to else).
let day = "Saturday";
switch (day) {
  case "Saturday":
  case "Sunday":
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
} // Output: It's the weekend!


let score = 86;
switch (true) {
	case score >= 90:
		result = "Grade: A";
		break;
	case score >= 80:
		result = "Grade: B";
		break;
	case score >= 70:
		result = "Grade: C";
		break;
	case score >= 65:
		result = "Grade: D";
		break;
	default:
		result = "Grade: F";
}
console.log(result); // Output: Grade: B
JavaScript

Understanding Block Scope

In JavaScript, curly braces {} create a Block. This is extremely important for variables declared with let and const.

  • Block Scope: Variables declared inside a block {} are only accessible within that block.
  • The Boundary: Once the code execution leaves the block, those variables are destroyed and can no longer be accessed.
const userLoggedIn = true; // Global Scope (not in {} brackets)

if (userLoggedIn) {
  // Block Scope Variable in {} brackets
  let message = "Welcome back!";
  
  console.log(message); // Output: "Welcome back!"
  console.log(userLoggedIn); // Output: true (Global Scope available to block scope)
  
}

// console.log(message); 
// Error: secretCode is not defined (it died when the block ended)
JavaScript

Scope prevents “variable pollution.” By keeping variables trapped inside the blocks where they are needed, you prevent different parts of your program from accidentally overwriting or interfering with each other’s data.

Note: there are other scopes aside from Global and Block Scope that we’ll learn about in a later lesson.

< Previous
Next Lesson >