Как сократить/улучшить этот код?

Question

[godsplan]

const tabsItem = document.querySelectorAll('.media-tab')
const tabNav = document.querySelectorAll('.media-category__item')
tabsItem[0].classList.add('active')
document.addEventListener('click', (e) => {
  const target = e.target.closest('.media-category__item');
  if (target) {
    const dataTarget = target.dataset.category;
    tabNav.forEach(elem => {
      if (!elem.classList.contains('active') && elem === target) {
        elem.classList.add('active')
      } else {
        elem.classList.remove('active')
      }
    })
    tabsItem.forEach(elem => {
      if (!elem.classList.contains('active') && elem.dataset.tab === dataTarget) {
        elem.classList.add('active')
      } else {
        elem.classList.remove('active')
      }
    })

  }
})

Это табы. Мне не нравится, что я сначала добавляю класс кнопке, а потом добавляю класс табу, хотел это как то объединить, но не очень понял как.
Да и вообще как реализация в целом?Готов принять поток чего угодно в свою сторону аргументированно.
Я понимаю что код мал, но возможно у вас есть какие то предложения.

Answer 1

[Rsa97]

document.addEventListener(
  'click',
  (e) => {
    const target = e.target.closest('.media-category__item');
    if (!target) {
      return;
    }
    document.querySelector('.media-category__item.active')?.classList.remove('active');
    target.classList.add('active');
    document.querySelector('.media-tab.active')?.classList.remove('active');
    document.querySelector(`.media-tab[data-tab="${target.dataset.category}"]`)?.classList.add('active');
  },
);

Comments

[Максим Морев]

document.querySelector('.media-tab.active')?.classList?.remove('active');

`?` после classList не нужен, если `querySelector` что-то вернул, то там точно будет `classList`

document.querySelector('.media-tab.active')?.classList.remove('active');

[godsplan]

Про скоращения я не имел ввиду в угоду читабельности или праильности.
Мне вообще не нравится эта идея иденифицировать блок аля 'elem.active', и эти два добавления класса и кнопке и табу тоже остались

[Rsa97]

Максим Морев, А если querySelector вернул null, то ?.classList вернёт undefined и вызов add/remove без ?. выдаст ошибку.

[Максим Морев]

Rsa97, а вы в консоль напишите оба варианта и проверьте :)
Если `querySelector` вернул null, то `classList` и всё что дальше просто не выполнится. `chaining` ведь.

[Rsa97]

Максим Морев, Да, вы правы. Не обратил внимания, что optional chaining использует short-circuits, если встретил null или undefined. До add/remove просто не доходит.

[Rsa97]

godsplane, IMHO, ваш вариант читается хуже. Во-первых, вложенный блок if вместо раннего возврата. Во-вторых перебор циклами вместо штатного поиска нужного элемента. В-третьих избыточное условие в каждом цикле.
А сократить добавление и удаление классов до одной операции не получится - классы меняются у разных элементов.

[Rsa97]

Александр, Не должно.
Если посмотреть стандарт, то видим, что, если слева получился null или undefined, то на шаге 3a выполнение optional chaining прерывается с результатом undefined и правая часть не обрабатывается вообще.
Аналогичный short-circuit используется при операциях && и ||. Если слева false (true), то правая часть не выполняется.