Hexlet logo

HTML: Preprocessor Pug

Theory: Conditional constructions

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:

- const isLogin = true;

.container
  .row
    .col
      if isLogin == true
        section.profile
          h1 Welcome!
      else
        section.registration
          h1 Please register!

The result if the isLogin variable is true:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="profile">
        <h1>Welcome!</h1>
      </section>
    </div>
  </div>
</div>

The result if the isLogin variable is false:

<div class="container">
  <div class="row">
    <div class="col">
      <section class="registration">
        <h1>Please register!</h1>
      </section>
    </div>
  </div>
</div>

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:

if isLogin
  .profile
    h1 Welcome!
else
  .registration
    h1 Please register!

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:

-
  const user = {
    name: 'Hexlet',
    surname: 'McCoderson',
    login: 'hexlet-code',
  }

section.user-profile
  p.name
    if user.name && user.surname
      | #{user.name} #{user.surname}
    else
      | #{user.login}
<section class="user-profile">
  <p class="name">Hexlet McCoderson</p>
</section>

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:

-
  const titles = {
    home: "Home Page",
    product: "Our products",
  }

- const url = 'home';

doctype
html(lang="en")
  head
    if url == 'home'
      title= titles.home
    else if url == 'product'
      title= titles.product
    else
      title No such page :(
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Homepage</title>
  </head>
</html>

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:

- const isAdmin = false;

if isAdmin == false
  h1 Not authorized to view page
else
  h1 Welcome

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
- const isAdmin = false;

unless isAdmin
  h1 Not authorized to view page
else
  h1 Welcome
<h1>Not authorized to view page</h1>

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:

<!doctype html>
<html>
  <head>
    <title>Site homepage</title>
  </head>
</html>