# Условные операторы: if и ?
[](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)
**Условные операторы** нужны для того, чтобы выполнять какие-либо действия в зависимости от условий.
Для этого в **JavaScript** существует два оператора: `if` и `?` (да-да именно вопросительный знак).
#### **Оператор if (если)**
Сразу же к примеру:
```javascript
let age = prompt('Какой сейчас век?', '');
if (age == 21) {
alert('Верно, сейчас XXI век');
}
```
Поясню за `prompt`. Это функция, которую предоставляет **JavaScript** для того, чтобы взаимодействовать с пользователем.
При запуске этого кода, у тебя на экране появится окно с вопросом: `Какой сейчас век?`. И ниже, в этом же окне будет доступно поле для ввода ответа.
Введенный тобой ответ, автоматически запишется в переменную `age`, после нажатия кнопки `OK`. Кстати, чтобы ты не ввел в это поле: **строку, число,** да что угодно – `prompt` приведет это к типу `String`. Т.е, переменная `age` будет иметь тип `String`.
Дальше по коду у нас идет условный оператор `if`. Вся эта конструкция, на самом деле, очень проста. Два три упражнения и ты навсегда запомнишь, как работает этот оператор. Итак, разберем подробно:
```javascript
if (age == 21) {
alert('Верно, сейчас XXI век');
}
```
Ты можешь видеть, что после оператора `if` идет выражение в скобках – это обязательное условие, чтобы оператор начал работать. В скобках мы указываем то выражение, которое хотим проверить на истинность ([живой пример](https://jsfiddle.net/javascriptstupid/3n6r0gcy/2/)).
После скобок оператор `if` будет ожидать действие, которое нужно выполнить в том случае, если выражение в скобках будет истинным (читать про [преобразование типов](/javascript-for-dummies/preobrazovanie-tipov.md)), т.е. выдаст нам логическое `true`. Здесь есть **2 варианта** как написать это действие:
```javascript
// первый вариант:
if (age == 21) alert('Верно, сейчас XXI век');
// второй вариант:
if (age == 21) {
alert('Верно, сейчас XXI век');
}
```
Разница между этими двумя – **наличие или отсутствие фигурных скобок**.
**Первый вариант** подразумевает, что при выполнении условия ты хочешь, чтобы выполнилась только одна команда. Любая последующая операция, в таком случае, будет выполняться всегда, вне зависимости от условия. Пример:
```javascript
if (age == 21) alert('Верно, сейчас XXI век');
alert('Я буду появляться вне зависимости от \
выполнения/невыполнения условия');
```
В данном случае, вторая функция `alert` будет выполняться всегда, вне зависимости от того, выполнилось условие `age == 21`или нет ([живой пример](https://jsfiddle.net/javascriptstupid/vrh32of1/)).
**Второй же вариант** подразумевает то, что ты хочешь выполнить несколько операций при выполнении условия. Все эти операции ты должен поместить внутрь фигурных скобок:
```javascript
if (age == 21) {
alert('Верно, сейчас XXI век');
alert('Я буду появляться только если выполнится условие');
}
```
**Обе команды сработают** только в том случае, когда условие будет выполнено.
> *Всегда и везде, рекомендую тебе использовать фигурные скобки, даже, если ты хочешь выполнить только одну команду. Использовать фигурные скобки считается лучшей практикой (**best practice**).*
У оператора `if` имеется младший брат – оператор `else`.
#### **Оператор else (иначе)**
Этот оператор не может жить без своего старшего брата `if`, поэтому он используется всегда только вместе с ним. Вызвать `else` отдельно невозможно, да и вызов этот не несет в себе никакого смысла и логики.
Оператор `else` организует блок, внутрь которого можно засунуть те команды, которые должны выполниться в том случае, если условие, которое указано в скобках после оператора `if` не выполнилось. Не отходя от кассы, пример:
```javascript
if (age == 21) {
alert('Верно, сейчас XXI век');
} else {
alert('Неверно! Ты ответил неправильно!');
}
```
Получается, что если мы ответим неправильно и условие не выполнится, т.е. вернет нам логическое `false`, то отработает блок `else` и у тебя на экране появится окно с сообщением: `"Неверно! Ты ответил неправильно!"` ([живой пример](https://jsfiddle.net/javascriptstupid/u34zkmx2/)).
Еще один момент – иногда нужно проверить несколько условий сразу. Для этого можно использовать блок `else if`. Пример:
```javascript
if (age == 21) {
alert('Верно, сейчас XXI век');
} else if (age < 21) {
alert('Ты указал век меньше, чем текущий');
} else if (age > 21) {
alert('Ты указал век больше, чем текущий');
} else {
alert('Скорее всего, ты ввел не число');
}
```
Когда используется блок `else if` все условия проверяются поочередно друг за другом сверху вниз. Если какое-либо условие выполняется, то все дальнейшие условия игнорируются ([живой пример](https://jsfiddle.net/javascriptstupid/yga7j8k1/)).
#### **Оператор ‘?’**
Этот оператор называют **тернарным** (состоящим из трёх частей). Это единственный оператор, который имеет **3 операнда**.
Зачем нам нужен этот оператор? Представь ситуацию, тебе нужно записать значение в переменную, но это значение зависит от условий.
Используя условный оператор `if` мы можем это сделать так:
```javascript
let temperature = prompt('Сколько градусов за окном?', '');
let weather = null;
if (temperature >= 0) {
weather = 'больше 0';
} else {
weather = 'меньше 0';
}
alert('Температура сегодня: ' + weather);
```
**ЕСЛИ (**`if`**)** **температура больше**, либо **равна нулю**, то в переменную `weather` мы записываем значение `true`, **ИНАЧЕ (**`else`**)** записываем в нее значение `false`.
Не кажется ли тебе, что достаточно много кода ради такого простого действия?!
Потому и был придуман `тернарный оператор?`.
Ведь если использовать его, получится намного короче:
```javascript
let temperature = prompt('Сколько градусов за окном?', '');
let weather = (temperature >= 0) ? 'больше или равна 0' : \
'меньше 0';
alert('Температура сегодня: ' + weather);
```
Первым операндом оператора `?` является `условие`, которое мы проверяем. Затем ставится сам оператор `?`, после него пишем то, что хотим присвоить в переменную `weather` в случае выполнения условия, а после `:` пишем то, что хотим присвоить в случае, если условие не выполнилось.
Разберем подробнее эту строку:
```javascript
let weather = (temperature >= 0) ? 'больше 0' : 'меньше 0';
```
Следует читать и понимать эту строку так: **ЕСЛИ**`temperature >= 0`, **ТО** в переменную `weather` мы записываем значение `'больше 0'`, **ИНАЧЕ** записываем значение `'меньше 0'` ([живой пример](https://jsfiddle.net/javascriptstupid/tjbzLucv/)).
Я выделил жирным **3 момента**. При разборе таких выражений читай их именно так. Перед условием проговаривай слово **ЕСЛИ,** тернарный оператор **`?`** заменяй на слово **ТО**, а знак **`:`** заменяй на слово **ИНАЧЕ**. Если запомнишь, то будешь без труда понимать данную конструкцию.
Согласись, так код выглядит намного лучше.
Проверять несколько условий сразу можно не только с помощью оператора `if`, но и при помощи **тернарного оператора** `?`. Усовершенствуем пример выше:
```javascript
let temperature = prompt('Сколько градусов за окном?', '');
let weather = (temperature > 0) ? 'больше 0' :
(temperature == 0) ? 'равна 0' :
(temperature < 0) ? 'меньше 0' :
'Ты точно ввел только цифры? 😁';
alert('Температура сегодня: ' + weather);
```
Наверное, выглядит немного страшно ([живой пример](https://jsfiddle.net/javascriptstupid/7y3htdau/)). Но, поверь, здесь опять нет ничего страшного. Хотя, признаюсь, когда я только начинал постигать **JavaScript**, то эта конструкция вселяла в меня ужас, так как мне казалось, что в этом очень просто запутаться. Но, как оказалось, все намного проще.
Здесь мы использовали **тернарный оператор** аж целых 3 раза. Сейчас объясню, как это работает с множественными условиями.
```javascript
let weather = (temperature > 0) ? 'больше 0' :
(temperature == 0) ? 'равна 0' :
(temperature < 0) ? 'меньше 0' :
'Ты точно ввел только цифры? 😁';
```
Данным кодом мы говорим **JavaScript-у**: если переменная (`temperature > 0)` , то присвой в переменную `weather`значение `'больше 0'`. Если это не так, то проверь условие `(temperature == 0)` и если оно **истинно**, то присвой в переменную `weather` значение `'равна 0'`. Если и это условие не проходит, то мы просим **JavaScript** проверить следующее условие `(temperature < 0)` , и в случае его выполнения присвоить значение `'меньше 0'`. Ну, а если все условия проверены, и ни одно не оказалось **истинным**, мы просим, чтобы **JavaScript** записал в переменную `weather` значение `'Ты точно ввел только цифры? 😁'`.
Думаю, что на сегодня достаточно. В нескольких местах оставил ссылки на куски кода в онлайн-редакторе и подписал их «живой пример». Ты можешь перейти по ссылкам, посмотреть код и запустить его нажав кнопку `Run`
#### **Домашнее задание**
1. Что выведется на экран, если выполнить данный код:
```javascript
if ('') {
alert('1');
}
```
2\. Используя `if .. else`, напиши код, который задаст пользователю вопрос (с помощью `prompt()`) и примет от него ответ. В зависимости от ответа, выведи на экран с помощью `alert():` если пользователю **больше или равно 18**, то выведи: «**вам** **разрешено посещение сайта**; »если пользователю **меньше 18**, то выведи: «**вам** **запрещено посещение сайта»**;
3\. Самостоятельно потренируйся с **тернарным оператором** `?`
Выполненным домашним заданием вы можете поделиться в комментариях к этому уроку.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://thedvlpr.gitbook.io/javascript-for-dummies/uslovnye-operatory-if-i.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.