Conditional UI Rendering

The Foundation of Decision-Making: if...else Statements

The most fundamental tool for decision-making in JavaScript is the if statement. It works just like it sounds: if a certain condition is true, then execute a block of code. You can extend this with else to provide an alternative block of code to run if the condition is false. For more complex scenarios with multiple conditions, you can chain them together using else if.

This structure allows you to build logic flows:

• if: Checks the primary condition.
• else if: Checks a new condition if the previous one was false.
• else: Acts as a final catch-all if none of the preceding conditions were true.

The following video provides an excellent deep dive into how these statements work, using a practical train ticket pricing example to illustrate the concepts.

Now that you've seen the syntax, let's look at how this is applied in a real web page to directly manipulate what the user sees. The following tutorial from the Mozilla Developer Network (MDN) walks through adding interactivity to a page using these very concepts.

A Concise Alternative: The Ternary Operator

For simple, binary decisions where you need to choose between two values, a full if/else block can feel a bit verbose. JavaScript provides a more compact alternative called the ternary operator. It's a shorthand that packs a condition and two possible outcomes into a single line.

Its syntax is: condition ? expressionIfTrue : expressionIfFalse;

You can read the ? as "then" and the : as "else".

Let's say we have a product from our previous lesson and want to create a status message:

// Using if/else
let statusMessage;
if (product.inStock === true) {
  statusMessage = "Available";
} else {
  statusMessage = "Sold Out";
}

// Using the ternary operator
const statusMessageTernary = product.inStock ? "Available" : "Sold Out";

Both achieve the same result, but the ternary operator is more concise. It's especially useful for assigning values to variables or for conditional rendering inside modern frameworks like React, which you'll learn later.

The following article explains the ternary operator and its best practices.

Applying Conditionals to User Experience

Conditional logic is the technical foundation for many core UX patterns you design. Your ability to think through these states in Figma translates directly to writing conditional code.

• Loading States: You don't want to show users a blank screen while data loads. Instead, you conditionally show a placeholder. Once the data arrives, you hide the placeholder and show the actual content.

The short video below demonstrates exactly this principle: it uses a load event to determine when the page is ready, and then conditionally hides a loading spinner.

Time to Practice

Let's use the products array of objects we created in the last lesson. Open your developer console and paste in the following data structure:

const products = [
  { 
    id: "prod-001", 
    name: "Classic White T-Shirt", 
    price: 250, 
    inStock: true 
  },
  { 
    id: "prod-002", 
    name: "Slim Fit Jeans", 
    price: 600, 
    inStock: false 
  },
  { 
    id: "prod-003", 
    name: "Leather Belt", 
    price: 350, 
    inStock: true 
  },
  {
    id: "prod-004",
    name: "Running Shoes",
    price: 800,
    inStock: false
  }
];

Now, complete the following tasks:

1. Use if/else for detailed messages:
   Write a for...of loop to iterate through the products array. Inside the loop, use an if/else statement to check the inStock property of each product.

   • If inStock is true, print a message like: "Classic White T-Shirt is available for purchase."
   • If inStock is false, print: "Slim Fit Jeans is currently sold out."

2. Use the ternary operator for a quick status:
   Loop through the products array again. This time, inside the loop, use a ternary operator to assign either the string "In Stock" or "Out of Stock" to a variable named status. Then, print the product's name and its status, like: "Leather Belt: In Stock".

// Data from the exercise
const products = [
  { id: "prod-001", name: "Classic White T-Shirt", price: 250, inStock: true },
  { id: "prod-002", name: "Slim Fit Jeans", price: 600, inStock: false },
  { id: "prod-003", name: "Leather Belt", price: 350, inStock: true },
  { id: "prod-004", name: "Running Shoes", price: 800, inStock: false }
];

// 1. Solution for if/else
console.log("--- Detailed Status (if/else) ---");
for (const product of products) {
  if (product.inStock === true) {
    console.log(`${product.name} is available for purchase.`);
  } else {
    console.log(`${product.name} is currently sold out.`);
  }
}

// 2. Solution for ternary operator
console.log("\n--- Quick Status (Ternary) ---");
for (const product of products) {
  const status = product.inStock ? "In Stock" : "Out of Stock";
  console.log(`${product.name}: ${status}`);
}

Conclusion

You have just learned the fundamental building block for creating dynamic, interactive user interfaces. By combining the data structures from our last lesson with the conditional logic from this one, you can now model information and make decisions based on it.

Key Takeaways:

• if/else statements are your go-to tool for handling logic with multiple paths or complex conditions.
• The ternary operator (? :) is a clean, concise shorthand for simple binary choices, perfect for assigning one of two values to a variable.
• Conditional logic is the code equivalent of UX decisions, allowing you to control visibility, styles, and content to create responsive and user-friendly experiences.

In our next lesson, we'll dive deeper into working with arrays. Now that you can make decisions about a single item, we'll explore powerful methods like .map() and .filter(). These will allow you to efficiently transform entire lists of data—for instance, to create a new array containing only the products that are in stock, or to generate a list of product names from your array of product objects.