Фильтрация на новостном сайте практически готова: когда пользователь выбирает категорию из списка, на странице остаются новости только из этой категории. Но если выбрать опцию «Все новости», то не остаётся ни одной.

Разберём, почему так происходит. Каждой категории новостей соответствует такое же значение фильтра. Но категорий всего четыре, а возможных значений у фильтра — пять. Если выбрана опция «Все новости», то значение фильтра становится 'all'. На странице нет новостей с таким значением атрибута data-category, поэтому проверка на неравенство всегда возвращает true. В результате всем новостям добавляется класс hidden, и они пропадают со страницы.

// Когда значение фильтра 'all', проверка всегда возвращает true
if (article.dataset.category !== filter.value) {
  article.classList.add('hidden');
}

Как сказать JavaScript, что если выбрана опция «Все новости», то новости прятать не нужно? Добавим в конструкцию if ещё одно условие: значение фильтра не должно быть равно 'all'.

// Если категория НЕ равна фильтру И фильтр НЕ равен «Все новости»
if (article.dataset.category !== filter.value && filter.value !== 'all') {
  article.classList.add('hidden');
}

Двойным амперсандом && в JavaScript обозначается оператор логическое И. Он позволяет объединить две части условия.

Посмотрим, как это работает. Операторы строгого неравенства в нашем условии сравнивают значения и возвращают true или false. Если хоть один из операторов вернёт false, то благодаря логическому И условие целиком также будет считаться ложным:

true && true;   // Результат: true
true && false;  // Результат: false
false && true;  // Результат: false
false && false; // Результат: false

В результате класс hidden добавится новости, только если обе проверки на неравенство вернут true.

Доработаем нашу фильтрацию. Добавим в условие проверку, что значение фильтра строго не равно 'all', и используем логическое И, чтобы объединить две части условия. После этого убедимся, что всё работает правильно.

true || true;   // Результат: true
true || false;  // Результат: true
false || true;  // Результат: true
false || false; // Результат: false