Как более красиво записать исключение если элемента не существует?

Question

[godsplane]

spoiler

const reviewsSlider = document.querySelector(".js-reviews-slider");
if (reviewsSlider) {
  new Swiper(reviewsSlider, {
    modules: [Navigation],
    slidesPerView: 4,
    spaceBetween: 20,
    navigation: {
      nextEl: reviewsSlider.closest(".reviews").querySelector(".slider-nav__next"),
      prevEl: reviewsSlider.closest(".reviews").querySelector(".slider-nav__prev"),
      disabledClass: "arrow--disabled",
    },
  });
}

const postSlider = document.querySelector(".js-posts-slider");
if (portfolioSlider) {
  new Swiper(postSlider, {
    modules: [Navigation],
    slidesPerView: 4,
    spaceBetween: 20,
    navigation: {
      nextEl: postSlider.closest(".posts").querySelector(".slider-nav__next"),
      prevEl: postSlider.closest(".posts").querySelector(".slider-nav__prev"),
      disabledClass: "arrow--disabled",
    },
  });
}

Не нравится постоянное if (elem) {}, как то колхозно.

Comments

[Вадим]

Ну то есть Вы хотите вместо if какую то другую строчку?
В чём тогда будет разница?
Если есть исключение и его нужно как-то обработать, то в любом случае нужно написать для этого какой-то код, верно?

Ну и "красиво" понятие субьективное.

[MikUrrey]

Ошибочка - наверное if (portfolioSlider) -> if (postSlider) :)
Это, кстати, не колхозно, это всё нормально. Вы не виноваты, что javascript это javascript.

Можно упростить вложенность, если все это происходит внутри функции. тогда вместо

if (reviewsSlider) {
//...
}

можно сделать

if (!reviewsSlider) {
    return;
}

или вообще
if (reviewsSlider) return;

Можно так же каждый new Swiper завернуть в функцию, и тогда ifы заменить на нечто вот такое:

!portfolioSlider || portfolioSliderInit(portfolioSlider);

И еще мини-подсказка: DRY!

function sliderInit(element, closestSelector) {
  new Swiper(element, {
    modules: [Navigation],
    slidesPerView: 4,
    spaceBetween: 20,
    navigation: {
      nextEl: element.closest(closestSelector).querySelector(".slider-nav__next"),
      prevEl: element.closest(closestSelector).querySelector(".slider-nav__prev"),
      disabledClass: "arrow--disabled",
    },
  });
}

sliderInit(postSlider, ".posts");

Answer 1

[Денис Инешин]

Для красоты пишут так

function foo() {
  if (!element) return;

  // code
}

И не надо ничего в if оборачивать

Comments

[godsplane]

Да, но тогда придется оборачивать в функцию. И для каждого слайдера создавать отдельную функцию, так как если записать классы в одну функцию то ние не будет работать