Как использовать логические конструкции и тип данных Boolean? Часть 1

Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Сегодня поговорим о логических конструкциях и логический тип данных Boolean. С их помощью можно выполнять любой код на основе определенных условий — грубо говоря, учить наши программы «думать». Пригодится начинающим разработчикам.

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

Создаем новый проект, как делали в предыдущих инструкциях. Добавляем файлы index.html и main.js.
В main.js пишем конструкцию Условный оператор if:

    // Условный оператор if
if (условие) {
    // тело условного оператора.
    // В этом месте будет выполнен код согласно вашему условию
}

Задаем возраст для пользователя и добавляем условие, чтобы его проверить. 

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);

if (age === 18) {
    // Код который будет выполнен, если условие верное
    document.write("<p>Пользователю 18 лет</p>");
}

Если в поле prompt ввести 18, то на странице отобразится сообщение, которое подтверждает, что пользователю действительно 18 лет. Если указать значение больше или меньше 18, то в браузере ничего не появится. Все потому, что условие age === 18 является логическим выражением, результатом которого будет одно из значений true или false — в зависимости от правдивости этого условия.

True — булевое значение, тип данных. Это истина.

False — булевое значение, тип данных. Это ложь.

Булевое значение — специальный тип данных, которое принимает только истину или ложь.

Операторы и операнды

Теперь познакомимся с операторами условия и с операндами. Не пугайтесь заумных слов, все гораздо проще, чем кажется.

Оператор — символ или ключевое слово, которое выполняет операции над значениями. Пример: +, -, *, = и другие.

Операнд — значение, над которым выполняется операция. Пример: 5 + 3, где 5 и 3 — операнды, + — оператор.

Рассмотрим код. В условии находятся два операнда и оператора. Значение age и 18 — операнды, а === — операторы. 

    if (age === 18) {
    // Код который будет выполнен, если условие верное
    document.write("<p>Пользователю 18 лет </p>")
}

Пример кода.

На самом деле операторов много, но для упрощения будем использовать лишь некоторые из них. Операнды могут быть чем угодно — например, числом, строкой, объектом или булевым значением. 

Список операторов

Тройное равенство (===). Строгое равенство сравнивает два операнда между собой. Если они равны, то условие соответствует true, если не равны, то false. 

Нестрогое равенство (==). Так же помогает выполнять сравнение значений, но с приведением типов. При этом можно сравнивать разные типы данных, например “5” == 5.

Подставим в условие 2 === 2 или 2 === 3 и посмотрим на результат. В консоли увидим значение true и false.

    console.log(2 === 2); // true
console.log(2 === 3); // false

Пример кода.

Строгое неравенство (!==). Прямая противоположность строгому неравенству. Оператор сравнивает два значения и возвращает true, если они не равны или имеют разные типы, и false в противном случае.

    console.log(2 !== 2); // false
console.log(2 !== 3); // true

Пример кода.

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

Условие == и != являются нестрогим равенством и неравенством. Рассмотрим на примере. Пишем в условие два разных типа данных 2 == “2”. Результат в браузере будет true, хотя сравниваем два разных типа, строку и число. 

Если сравнить строгим равенством 2 === “2”, то получим false. Все дело в приведении типов. Будьте осторожны при написании кода, если захотите использовать данные операторы в работе.

    console.log(2 == "2"); // true
console.log(2 === "2"); // false

Пример кода.

Символы больше, меньше, больше или равно, меньше или равно являются операторами >, <, >=, <=. С ними тоже не все так просто. Операторы >, < являются строгими, тогда как >=, <= нестрогими. Строгие операторы не учитывают случаи равенства, а нестрогие — наоборот. JavaScript — динамический язык программирования, это одно из его преимуществ и недостатков.

    console.log(2 > 1); // true
console.log(2 < 1); // false
console.log(2 >= 1); // true
console.log(2 <= 1); // false
console.log(2 >= 2); // true
console.log(2 <= 2); // false

Пример кода.

Конструкция if…else

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

    // Условный оператор if
if (условие) {
    // тело условного оператора.
    // В этом месте будет выполнен код согласно вашему условию
} else {
    // В этом месте будет выполнен код, ЕСЛИ условие неверное
}

Пример кода.

Попрактикуемся на коде, чтобы улучшить программу проверки пользователя.

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);

if (age === 18) {
    // Код который будет выполнен, если условие верное
    document.write("<p>Пользователю 18 лет</p>");
} else {
    document.write("<p>Пользователю не 18 лет</p>");
}

Пример кода.

Перейдем в браузер и проверим результаты.

Если ввести число, которое не соответствует условию оператора if, то будет выполняться вторая часть конструкции if…else. В нашем случае программа произвела ответвление и показала результат «Пользователю не 18 лет».
Теперь заменим условие на оператор > или <, вместо ===, чтобы понять, как будет работать программа в зависимости от того, что хотели сделать.

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);

if (age > 18) {
    // Код который будет выполнен, если условие верное
    document.write("<p>Пользователь совершеннолетний</p>");
} else {
    document.write("<p>Пользователю не совершеннолетний</p>");
}

Пример кода.

Смотрим на разные результаты.

Обратите внимание, какой результат получился в последнем примере. Оператор > или < строго сравнивает операнды. Если ввести 18, то программа начнет сравнивать его со значением 18. Числа равны, но поскольку условие гласит age > 18, программа выводит то, что мы и хотели — «Пользователь несовершеннолетний». Однако это можно исправить с помощью логических операторов.

Логические операторы

Логические операторы — это специальные символы, которые изменяют или комбинируют логические значения типа Boolean — true и false. Проще говоря, соединяют между собой условия.

|| оператор ИЛИ возвращает значение true (истина), если хотя бы одно из операндов истинно. Если оба операнда ложны, результат будет false (ложь).

Пример правила для ИЛИ:

    Пример правила для ИЛИ
true || true // true
true || false // true
false || true // true
false || false // false

&& оператор И возвращает значение true (истина) только в том случае, если оба операнда истинны. Если хотя бы одно из выражений ложно, результат будет false (ложь).

Пример правила для И:

    true & true // true
true & false // false
false & true // false
false & false // false

Приведем пример. 2 > 1 || 2 < 1 // — два больше одного ИЛИ два меньше одного.

2 !== 2 И 2  === 2 // — число 2 не равно числу 2 И Число 2 равно числу 2. Операторы || и & объединяют условия вместе.

Изменим наше условие на age > 18 || age === 18. Посмотрим, что получится.

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);

if (age > 18 || age === 18) {
    // Код который будет выполнен, если условие верное
    document.write("<p>Пользователь совершеннолетний</p>");
} else {
    document.write("<p>Пользователю не совершеннолетний</p>");
}

Пример кода.

Логические операторы — это булевая алгебра. С ее помощью можно создавать сложные логические выражения. Не пугайтесь, математики тут нет, только чистая логика.

Вложенность

Что будет, если нужно вывести разные ответы, при этом они должны быть или true, или false? Рассмотрим на примере. 

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);


if (age < 17) {
    document.write("<p>Пользователь является школьником</p>");
} else {
    document.write("<p>Пользователю не является школьником</p>");
}


if (age > 18 && age < 23) {
    document.write("<p>Пользователь является студентом</p>");
} else {
    document.write("<p>Пользователю не является студентом</p>");
}

if (age > 23) {
    document.write("<p>Пользователь является работником</p>");
} else {
    document.write("<p>Пользователю не является работником</p>");
}

Пример кода.

Получилось больше кода, чем обычно, зато теперь читабельно и удобно. Переходим в браузер, чтобы посмотреть варианты вывода программы.

Здесь можно использовать вложенность условного оператора. Это полезно, если необходимо сделать условие динамическим. Однако такая структура может усложнить читаемость кода и его дальнейшее исправление. Поэтому пока вы учитесь, старайтесь придерживаться структурированного подхода.

    let age = Number(prompt("Введите возраст:"));
document.write(`<p>Возраст пользователя: ${age}</p>`);


if (age < 17) {
    document.write("<p>Пользователь является школьником</p>");
} else {
    document.write("<p>Пользователю не является школьником</p>");


    if (age > 18 && age < 23) {
        document.write("<p>Пользователь является студентом</p>");
    } else {
        document.write("<p>Пользователю не является студентом</p>");

        if (age > 23) {
            document.write("<p>Пользователь является работником</p>");
        } else {
            document.write("<p>Пользователю не является работником</p>");
        }
    }
}

Пример кода.

Обратите внимание, что логический оператор && использует две части условия и проверяет их на true или false. Если true || false, значит и результат будет true. У && работает по-другому: если true || false, то получаем false, но если true || true, то true.

Главное не запутаться. Тема сложная, рассмотрим подробнее в следующей части. 

Заключение

Сегодня мы познакомились с условным оператором if и узнали, как работает конструкция  if…else. Ознакомились с операторами и операндами, а также разобрались, как работать с условиями. В тексте рассмотрели только базовую часть работы с условными операторами. В следующей части затронем switch…case и тернарный оператор. Видеоверсия урока доступна по ссылке.