HTML: Preprocessor Pug
2026-02-21 23:41 Diff
https://hexlet.io/courses/html-pug/lessons/conditionals/theory_unit

When developing a product, rarely is all code written wholly sequentially, with no branching off. There are situations where we execute a particular piece of code depending on specific settings or user actions.

Conditional constructs or conditional expressions are used in programming to create such branches.

What is branching? Imagine that a user enters their profile page. Depending on whether they logged in or not, the following action will take place:

  • If the user is logged in: display the profile page
  • If the user is not logged in: display the login page

How do I make this into code? If you are already familiar with programming, you know what we're talking about. We need to determine:

  1. The conditional construct
  2. The condition on which the branching occurs.
  3. Code blocks for conditions.

There is a new term on this list — condition. What is it? A condition is any expression we can reduce to either true or false. For example, the expression 2 + 2 = 4 is true, but 2 + 5 = 1 is not. Depending on this condition, the corresponding block of code will be executed:

The result if the isLogin variable is true:

The result if the isLogin variable is false:

Since the if construct checks whether an expression is true or false you do not need to have a comparison with both true and false. This code will work in the same way:

Let us look at another example. The user object contains several fields: first name, surname, and username. If we have the first name and surname, print them. Otherwise, print the username:

Note that the- symbol and the object are on different lines. You can write multiline JavaScript code in this way. It helps in creating functions, loops, objects, and so on.

In the previous examples, the main emphasis was on the existence of one object or another. Conditional constructs can check absolutely any expression:

During product development, a situation may arise where you need to check if a statement is false, not true. It can be a user check to see if they are an administrator when logging into the management page. In this case, you check whether the user is an administrator. If the user does not have the necessary rights, you should show them an error message.

We can solve this problem with a negative condition:

Such a comparison may be redundant since a conditional construct implies a check to see if something is true rather than false. There are two ways to make the code cleaner:

  1. Use the logical negation operator !. In this case, we calculate the result of the expression, and then its value is inverted. If it was true, it becomes false and vice versa. The construct will look like this: if !isAdmin. Since the isAdmin variable is false, the value is converted to true through negation
  2. The unless construct. Unlike if, unless checks if a condition is false

Additional assignment

This project has a file structure:

├── include/ │ ├── head.pug ├── index.pug ├── product.pug

There is a title variable with a unique page description inside the index.pug and product.pug files. The head.pug file contains the <head> section of the pages. We can insert a unique description in the head.pug file using file connections and a conditional construct. If the value of the title variable is empty, the pre-prepared text is output.

Let us observe an example page: