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:
- 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're already familiar with programming, you'll know what we're talking about. We need to determine:
- The conditional construct
- The condition on which the branching occurs.
- Code blocks for conditions.
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:
- Use the logical negation operator,
!. In this case, the result of the expression is calculated, and then its value is inverted. If it wastrue, it will becomefalseand vice versa. The construct will look like this::if !isAdmin. Since theisAdminvariable isfalse, the value is converted totruethrough negation. - The
unlessconstruct. Unlikeif,unlesschecks 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
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>
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
About Hexlet learning process
- Article “How to Learn and Cope with Negative Thoughts“
- Article “Learning Traps“
- Article “Complex and simple programming tasks“
For full access to the course you need a professional subscription.
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.
Sign up
Programming courses for beginners and experienced developers. Start training for free
- 130 courses, 2000+ hours of theory
- 1000 practical tasks in a browser
- 360 000 students
Our graduates work in companies:
Use Hexlet to the fullest extent!
- Ask questions about the lesson
- Test your knowledge in quizzes
- Practice in your browser
- Track your progress
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.