LearnJS

Оператор || в JavaScript

Оператор || означает логическое «или». Он используется, когда достаточно выполнения хотя бы одного условия.

let role = 'moderator';

if (role === 'admin' || role === 'moderator') {
  console.log('Доступ разрешен');
}

Код внутри if выполнится, потому что роль равна ‘moderator’. Для оператора || этого достаточно.

Что делает оператор ||

Если хотя бы одна часть выражения истинна, результат будет истинным.

console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

Результат:

true
true
true
false

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

Синтаксис

условие1 || условие2

Слева и справа от || могут быть сравнения, переменные, вызовы функций или другие выражения.

let isWeekend = day === 'saturday' || day === 'sunday';

В переменной isWeekend будет true, если день равен ‘saturday’ или ‘sunday’.

Оператор || в условиях

Чаще всего || используют внутри if, когда подходит один из нескольких вариантов.

let status = 'draft';

if (status === 'draft' || status === 'review') {
  console.log('Документ можно редактировать');
}

Если статус равен ‘draft’ или ‘review’, условие выполнится.

Еще один пример:

let paymentMethod = 'card';

if (paymentMethod === 'card' || paymentMethod === 'cash') {
  console.log('Способ оплаты доступен');
}

|| возвращает значение

Оператор ||, как и &&, возвращает не обязательно true или false. Он возвращает одно из значений.

console.log('JavaScript' || 'CSS');
console.log(0 || 'текст');
console.log(null || undefined || 'значение');

Результат:

JavaScript
текст
значение

JavaScript идет слева направо. Если находит truthy значение, сразу возвращает его. Если все значения falsy, возвращает последнее.

let value = 0 || null || '';

console.log(value === '');

Результат:

true

В этом примере все значения falsy, поэтому возвращается последнее значение - пустая строка.

Значение по умолчанию

Оператор || часто используют, чтобы выбрать значение по умолчанию.

let userName = '';

let displayName = userName || 'Гость';

console.log(displayName);

Результат:

Гость

Пустая строка - falsy значение, поэтому JavaScript берет второе значение.

Но с такой записью нужно понимать, какие значения считаются ложными. Например, 0 тоже falsy:

let count = 0;

let result = count || 10;

console.log(result);

Результат:

10

Если 0 является нормальным значением, оператор || может не подойти. В таких случаях чаще используют оператор ??, который мы разберем отдельно.

Короткое замыкание

Если первая часть выражения истинна, JavaScript не проверяет то, что стоит справа от ||.

let userName = 'Анна';

userName || console.log('Имя не указано');

Сообщение не появится, потому что userName уже содержит truthy значение.

В обычном учебном коде такую запись часто проще заменить на if:

if (!userName) {
  console.log('Имя не указано');
}

Итого

Оператор || используется, когда достаточно выполнения хотя бы одного условия. В if он помогает проверить несколько допустимых вариантов. При работе со значениями || возвращает первое truthy значение или последнее falsy значение. Его можно использовать для значения по умолчанию, но важно помнить, что 0, пустая строка, null, undefined и NaN считаются falsy.