When developing a product, rarely is all code written wholly sequentially, with no branching off. There are situations where, depending on certain settings or user actions, a particular piece of code must be executed.
Conditional constructs or conditional expressions are used in programming to create such branches. What can be considered branching? Imagine that a user enters their profile page. Depending on whether they are logged in or not, the following action will take place:
How do I make this into code? If you're already familiar with programming, you'll know what we're talking about. We need to determine:
There is a new term, “condition”, on this list. What is it? A condition is any expression that can be reduced 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!
Result if isLogin
variable is true
:
<div class="container">
<div class="row">
<div class="col">
<section class="profile">
<h1>Welcome!</h1>
</section>
</div>
</div>
</div>
Result if 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 don't need to have a comparison with both true
and false
. This code will work in exactly the same way:
if isLogin
.profile
h1 Welcome!
else
.registration
h1 Please register!
Let's look at another example. The user object contains several fields: first name, last name, username. If the first name and surname are given, 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>
Important: Pay attention to the declaration of the object. The -
symbol and the object itself are located on different lines. You can write multiline JavaScript code in this way. This is useful for creating objects, functions, loops, 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. This can be a user check to see if they are an administrator when logging into the management page. In this case, you need to check whether the user is an administrator or not. If the user doesn't have the necessary rights, then you should show them an error message. This problem can be solved 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:
!
. In this case, the result of the expression is calculated, and then its value is inverted. If it was true
, it will become 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.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>
This project has a file structure:
├── include/
│ ├── head.pug
├── index.pug
├── product.pug
Inside the index.pug and product.pug files there is a title
variable with a unique page description. The head.pug file contains the <head>
section of the pages. Using file connections and a conditional construct, insert a unique description in the head.pug file. If the value of the title
variable is empty, the pre-prepared text is output.
Example page:
<!doctype html>
<html>
<head>
<title>Site homepage</title>
</head>
</html>
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.