Условные операторы

Синтаксис:

                        
if (условие) {
    console.log(‘код выполняется, если условие истинное (true)')
} else {
    console.log(‘код выполняется, если условие ложное (false)')
}
                        
                    

Обратите внимание, что if — это строчные буквы. Заглавные буквы (If или IF) приведут к ошибке JavaScript.

В самом простом случае, условие должно вычисляться в логический тип данных: true, либо false (истина или ложь).

Такие выражения получаются при использовании операторов сравнения:

• ==
• ===
• >
• << /li>
• >=
• <=< /li>
• !==
• !=

Пример с использованием операторов сравнения:

                        
const num = 200
let result

if (num > 200) {
    result = "Число больше 200"
} else {
    result = "Число меньше или равно 200"
}

console.log(result)
                        
                    

Чтобы понять, какой блок кода выполнится, нужно запомнить правила приведения разных типов к логическому. Важное правило:

Все, что не приводится к false, будет true

• 0
• -0
• ''
• false
• null
• undefined
• NaN
• 0n (тип BigInt)

else...if

Если мы хотим связать в цепочку несколько условий, то мы используем else…if:

                        
if (условие 1) {
    // код выполняется, если условие 1 истинно (true)
} else if (условие 2) {
    // код выполняется, если условие 1 ложно (false) и условие 2 истинно (true)
} else {
    // код выполняется, если и условие 1 и условие 2 ложные (false)
}
                        
                    

В этом случае, если условие 1 является истинным, выполняется код внутри первого блока. Если условие 1 имеет значение false, а условие 2 имеет значение true, то выполняется код внутри второго блока. Если и условие 1, и условие 2 являются ложными, то выполняется код внутри третьего блока.

НАПРИМЕР: в зависимости от веса посылки, вычисляем стоимость отправки

                        
let price = 0
if (weight < = 1)
{
price = 200 //если вес посылки 1кг, то стоимость отправки будет 200 рублей
}
else if (weight >1 && weight < = 2)
{
price = 300 //если вес посылки больше 1кг и меньше или равно 2, то стоимость отправки будет 300 рублей
}
else if (weight >2 && weight < = 3)
{
price = 400 //если вес посылки больше 2кг и меньше или равно 3, то стоимость отправки будет 400 рублей
}
                        
                    

Важно отметить, что код внутри каждого блока будет выполняться только один раз, а первый блок, состояние которого оценивается как true, будет единственным, который будет выполнен. Остальные блоки будут проигнорированы.

If можно также использовать без else

этот вариант подходит, когда мы хотим, чтобы условие было выполнено только если оно истинно (true), а в противном случае не делать ничего:

        
if (horoscopeSign === "Leo") {
    console.log(‘Гороскоп на месяц для Львов’)
}
        
    

НО

Условный оператор if…else можно написать в более компактном виде: с помощью тернарного оператора.

Тернарный оператор состоит из 3 операндов: условие ? выражение1 : выражение2

Если условие будет истинным (true), то оператор вернет выражение1. Если условие будет ложным (false), то оператор вернет выражение2

По механике работы тернарный оператор похож на инструкцию if...else, но позволяет писать меньше кода и записывать результат работы сразу в переменную.

Вспомним наш код и сократим его с помощью тернарного оператора:

БЫЛО

const num = 200
let result

if (num > 200) {
    result = "Число больше 200"
} else {
    result = "Число меньше или равно 200"
}

console.log(result)
    

СТАЛО

const num = 200
const result = num > 200 ? "Число больше 200" : "Число меньше или равно 200"
console.log(result)

Код сократился и стал устанавливать значение переменной num сразу при объявлении. Это позволило использовать const вместо let. (в чем разница между let, const а также var читай здесь)

Тернарный оператор вернул результат, который можно записать в переменную. Но результат также можно вернуть с помощью return из функции:

    
const greeting = function(name) {
    return name ? `Привет, ${name}!` : "Добро пожаловать, дорогой пользователь!
}
    console.log(greeting(‘Маша’)
  // "Привет, Маша!""
    console.log(greeting())
  // "Добро пожаловать, дорогой пользователь!""
    
    

Внутри одного тернарного оператора можно написать еще один:

    
const num = 200
const result = num > 200 ? "Число больше 200" :
               num === 200 ? "Число равно 200" : "Число меньше 200"
console.log(result)
// "Число равно 200"
    
    

В этом случае запись идентична использованию конструкций if...else if...else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее.