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

Логические операторы в JavaScript очень часто используются в условных выражениях if…else. Есть три основных логических оператора:

• И (AND) — &&
• ИЛИ (OR) — ||
• НЕ (NOT) — !

Логическое И (AND) в JS

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

true && true

Оператор И в JavaScript выполняет сравнение слева направо, преобразовывает выражение (операнд) в логическое значение и вернет false как только одно из значений будет false

let bool1 = false, bool2 = true;

let result = bool1 && bool2; // false

Как только выполнение кода дойдет до bool1, а эта переменная равняется false, тогда код дальше выполняться не будет, т.к. не важно что будет дальше, потому что первое значение ложь.

Вот несколько примеров и результат, что будет возвращено в итоге:

let pr1 = true && true; // true
let pr2 = true && false; // false
let pr3 = false && true; // false
let pr4 = 'Hello' && 'World'; // true, т.к. строковое значение (не пустое) вернет true
let pr5 = '' && 'Hello'; // false
let pr6 = 1 && 0; // false

Можно также сравнивать несколько значений:

val1 && val2 && val3

Так как данный оператор приводит к логическому выражению, мы можем передавать разные данные (строки, числа, функцию, которая будет что-то возвращать и так далее).

let val1 = ''; // пустая строка, это false
let arr1 = [1, 2];

if (val1 && arr1.length) {}

В примере выше, мы в условие передаем пустую строку и проверяем длину массива, и т.к. пустая строка нам вернет false в булевом значении, у нас данное условие не сработает.

Логическое ИЛИ (OR) в JS

Логический оператор ИЛИ будет возвращать true, если хоть одно из значений (слева или справа) будет истинно, т.е. будет true:

let result = true || false; // result = true;

Также как и оператор И, он приводит операнды слева и справа к булевому значению.

let pr1 = true || true; // true
let pr2 = true || false; // true
let pr3 = false || true; // true
let pr4 = 'Hello' || 'World'; // true, т.к. строковое значение (не пустое) вернет true
let pr5 = '' || 'Hello'; // true
let pr6 = 1 || 0; // true

Также с данным оператором можно проверять несколько значений

let val1 = 1, val2 = 0, val3 = 'string';

if (val1 || val2 || val3) {}

Данное условие будет выполнено, т.к. хоть одно из значений будет true (в нашем случае val1 = 1 — true, val3 = 'string' — тоже true)

Логическое НЕ (NOT) в JS

Оператор НЕ работает следующим образом:

1. Приводит выражение к булевому значению (true/false)
2. Затем делает отрицание, т.е. на true возвращает false, а на false возвращает true.

let bool1 = !true; // будет равно false
let bool2 = !false; // будет равно true

let isLoading = false;
if (!isLoading) {
  // Если данные уже загружены, тогда делай следующее...
}

Оператор отрицания также часто используется в конструкции if…else. Допустим у вас есть приложение, при загрузке данных вы переменной isLoading присваиваете значение true (например, для отображения индикатора загрузки) и как только данные получены, хотите их отобразить, тогда вам нужно проверить, что переменная isLoading не равняется true, т.е. загрузка данных завершена. Условие выше аналогично следующей записи:

if (isLoading === false) {}