Насколько правильно проверять наличие элемента через if?

Question

[Odinokun]

На страницах сайта есть одинаковый элемент содержащий заголовок, подзаголовок и кнопку, которые будут анимироваться с помощью GSAP.
Но на некоторых страницах может не быть кнопки или подзаголовка.
Насколько правильно делать проверку через if как сделано в коде ниже, или существует более элегантное решение?
PS На всякий случай уточню, что если не проверять элемент на наличие, то функция сломается на отсутствующем элементе.

function cardAnimate(){
  let title = document.getElementById('card__title');
  let subtitle = document.getElementById('card__subtitle');
  let btn = document.getElementById('btn');
  
  if(title){
    TweenLite.to(title, .75, {transform:"translateX(0)"});
  }
  if(subtitle){
    TweenLite.to(subtitle, .75, {transform:"translateY(0)"});
  }
  if(btn){
    TweenLite.to(btn, .75, {transform:"translateX(0)"});
  }
}
cardAnimate();

Answer 1

[Роми]

Нормуль :)

Можно конечно поизвращаться )) но это не тот случай, когда оно действительно необходимо.

Иногда читаемость кода важнее псевдоэлегантности.

Answer 2

[bqio]

document.getElementById возвращает null в случае отсутствия элемента. Какая проверка вам еще нужна, если не if?

Comments

[Odinokun]

Меня if вполне устраивает по функционалу.
Я просто интересуюсь возможностью написания более лаконичного кода, так как я привел пример с тремя элементами, но в реале элементов будет больше и когда пишешь для каждого проверку if-ом длина функции существенно увеличивается.

Answer 3

[Антон Швец]

Ну можешь конечно так написать

function cardAnimate(){
  [
    document.getElementById('card__title'),
    document.getElementById('card__subtitle'),
    document.getElementById('btn'),
  ].forEach(el => el && TweenLite.to(el, .75, {transform:"translateX(0)"}));  
}

Надо не от ифов избавляться, а от повторяющегося кода

Comments

[Роми]

у него там

if(subtitle){
    TweenLite.to(subtitle, .75, {transform:"translateY(0)"});
  }

[Odinokun]

У меня там на самом деле не только разная трансформация, но и разная прозрачность у элементов и задержка/продолжительность анимации (я просто удалил часть кода из примера, что бы читать было проще).
Так что forEach не вариант.

[Антон Швец]

Дмитрий, ну типа

[
  [document.getElementById('card__title'),"translateX(0)"],
  [document.getElementById('card__subtitle'),"translateY(0)"]
  [document.getElementById('btn'),"translateY(0)"],
].forEach(([el, transform]) => el && TweenLite.to(el, .75, {transform}));

но суть в общем не в этом.
Не хочешь каждый раз делать иф - сделай обертку, внутри которой будет иф.