Логические операторы: &&, || и ??

Кажется, что || и && отвечают true или false. На самом деле они возвращают одно из переданных значений. a || b — «первое истинное, а если истинных нет, то последнее»; a && b — «первое ложное, а если ложных нет, то последнее».

console.log(1 || 0);
console.log(null || "текст");
console.log(1 && 0);
console.log("а" && "б");

Операнды вычисляются слева направо, и вычисление обрывается, как только ответ ясен. Это и есть короткое замыкание: если левая часть || уже истинна, правая не выполняется вообще — со всеми вызовами функций, которые в ней были.

function check(value) {
  console.log("правый операнд вычислили");
  return value;
}
console.log(false && check(true));
console.log(true || check(true));
console.log(false || check(true));

Из правила «первое истинное» вырос популярный приём: значение || запасной вариант. Если слева пусто, подставится запасное.

let nickname;
console.log(nickname || "Аноним");
console.log("Рико" || "Аноним");

Беда в том, что || спрашивает не «есть ли значение», а «истинно ли оно». Ложными считаются 0, пустая строка, null, undefined, NaN и false. Все они будут заменены запасным вариантом — даже если пользователь выбрал их осознанно.

let width = 0;  // пользователь честно выставил нулевую ширину
let title = ""; // и оставил заголовок пустым
console.log(width || 100);
console.log(title || "Без имени");

Подсказка на пальцах: || спрашивает «есть ли тут что-то полезное?», а ?? — «есть ли тут хоть что-нибудь?»

?? — оператор нулевого слияния. Он подставляет правый операнд, только если слева null или undefined. Ноль, пустая строка и false для него — обычные данные, которые трогать не надо.

let count = 0;
console.log(count ?? 10);
console.log(count || 10);
let color;
console.log(color ?? "серый");

Правило выбора простое. Если 0 или пустая строка — допустимые значения (ширина, количество, комментарий), берите ??. Если любое «пустое» значение нужно заменить — например, пустое имя на «Гость», — || здесь уместнее.

// null ?? 5 || 0 — так нельзя, будет SyntaxError
console.log((null ?? 5) || 0);
console.log(null ?? (5 || 0));

! делает две вещи сразу: приводит значение к булеву типу и переворачивает его. Поэтому !0 — это true. Двойное !! переворачивает дважды, то есть просто отвечает на вопрос «истинно ли это?» — ручной аналог Boolean(x).

console.log(!0);
console.log(!"текст");
console.log(!!0);
console.log(!!"текст");
console.log(!!" ");

Ложных значений в языке всего восемь, и полный их список с разбором — в статье «Условия: if, else и тернарный оператор». Для || и ?? из этого следует одно: || подменит запасным вариантом любое из восьми, а ?? — только null и undefined.

Когда операторы стоят рядом, порядок такой: сначала !, затем сравнения (>, === и другие), затем &&, и в самом конце || и ??. Значит, a || b && c читается как a || (b && c), а x > 0 && y > 0 работает без скобок именно так, как ожидается.

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

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

let settings = { theme: null, size: 0 };
settings.theme ??= "тёмная";
settings.size ??= 16;
console.log(settings.theme, settings.size);