Найти тему
Дзен.Framework

2.3.2 Условия в JS

Оглавление
Изображение из открытых источников
Изображение из открытых источников

Все помним мультик? Классный момент - наверное один из лучших. Ну это субъективно.

В предыдущей статье мы рассмотрели как объявлять переменные и как присваивать им значения. Сейчас разберем, что такое условия в программировании.

Формат записи if/else и варианты условий

Как и в обычном разговоре:

"Если ты не <...>, то мне придется <...>. Иначе!..."

В программировании все один в один, и как обычно, практически весь "лексикон" человекопонятный:

if (если) {выполняем действие} else if (другое условие) {выполняем другое действие} else (ничего не подошло) {еще какое-то действие}

  • пишем if и в скобках - условие
  • далее в фигурных скобках пишем код, который должен сработать при положительном результате сравнения
  • если нужно, после закрытия фигурной скобки пишем else
  • в фигурных скобках пишем код, который выполняем при отрицательном результате сравнения
if (...) {...}
else if (...) {...}
else if (...) {...}
else {...}

Условие может содержать сколько угодно "else if", но "else" всегда один и замыкает конструкцию!

Синтаксис, полагаю, понятен. А что писать в этом самом "если"? Освежаем в памяти типы данных и изучаем вот такую конструкцию:

== или ===

Отличие между ними заключается в следующем:

  • == значение равно, но без учета типа
  • === значение равно по типу и значению

Это требует наглядной демонстрации. Возьму переменные всех типов и сравню друг с другом:

var a = 0;
var b = 10;
var c = '';
var d = 'abc';
var e = true;
var f = false;
var g = null;
Зеленым отмечены варианты, где сравнение будет "успешным". Как видно, сравнение без привязки к типу выдает положительный результат сравнения 0, пустой строки и FALSE.
Зеленым отмечены варианты, где сравнение будет "успешным". Как видно, сравнение без привязки к типу выдает положительный результат сравнения 0, пустой строки и FALSE.

Старайтесь избегать простое сравнение! Следите за типами данных! Из-за отсутствия одного знака равно в условии поведение вашей программы может очень сильно измениться. Найти ошибку потом будет сложно!

Итак, со сравнениями разобрались. Остальные варианты ничем особо не отличаются от человеческой математики:

  • > больше
  • >= больше или равно
  • < меньше
  • <= меньше или равно

Пример использования if/else

Как и в предыдущей статье, пробовать будем в консоли.

Вот так не сложно создавать условия.
Вот так не сложно создавать условия.

Короткая запись условия if/else.

Существует вариант "короткой записи" условия, позволяющий минимизировать размер кода. Формат записи:

-4

Пишется вот так:

<условие> ? <если условие верно> : <если условие НЕ верно>

Вариант условия, содержащий конструкцию else if:

<условие 1> ? <если условие 1 верно> : (<условие 2> ? <если условие 2 верно> : <если НЕ верно ни одно из условий>)

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

Формат записи условия switch/case

Существует еще один вариант выбора:

switch (<переменная>) {
case <значение 1>:
<программный код>
break;
case <значение 2>:
<
программный код>
break;
default:
<
программный код>
break;
}
-5

Конструкция описывает последовательный выбор по условию с типизированным (===) сравнением. Выполняется программный код от case ... до break;. Как видно на скрине, выбор условия поддерживает в том числе выражения.

Демонстрация типизированного сравнения.
Демонстрация типизированного сравнения.

В случае, если break будет отсутствовать, сравнение пойдёт дальше уже БЕЗ сравнения - просто выполняя программный код:

На скрине в "case 2:" (a === 2) получен положительный результат сравнения. В консоль введено "2 === 2". Но т.к. результат сравнения оказался положительным, а break; в этом условии отсутствовал, то был так же выведен и следующий результат "2 === 3".
На скрине в "case 2:" (a === 2) получен положительный результат сравнения. В консоль введено "2 === 2". Но т.к. результат сравнения оказался положительным, а break; в этом условии отсутствовал, то был так же выведен и следующий результат "2 === 3".

Будьте внимательны при использовании этой конструкции!

Все статьи попадают в "Оглавление канала". Не пропускаем новости!

-8