Условный тернарный оператор в JavaScript

Question

idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';

Как именно работает условный тернарный оператор в JavaScript? Какое значение присваивается свойству display ?

Answer 1

Здесь использован тернарный оператор "если"

(idVhod.style.display == 'inline') ? '' : 'inline';

Если описать смысл то это выглядит вот так:

// если у элемента idVhod css стиль дисплей равен инлайн
if (idVhod.style.display == 'inline'){
  // сбросим css стиль дисплей до его значения по умолчанию
  idVhod.style.display = '';
}
else{
  // Иначе установим css стиль дисплей в инлайн
  idVhod.style.display = 'inline';
}

Answer 2

Как @Andrei и сказал, это тернарный оператор, но вообще это конструкция:

(idVhod.style.display == 'inline') ? '' : 'inline';

Эквивалентна:

(function() {
  if(idVhod.style.display == 'inline') {
    return ''
  }

  return 'inline'
})();

То есть, получается такой код:

idVhod.style.display = (function() {
  if(idVhod.style.display == 'inline') { // если idVhod имеет CSS свойство display, равную inline, тогда
    return '' // вернуть пустую строку (то есть убрать свойство display)
  }

  return 'inline' // иначе, возвращаем inline
})();

Как работает условный тернарный оператор?

Сначала мы пишем условие, потом знак ?, после него, то что мы должны дать, если условие выполнилось. После, обязательно пишем :, ну и соответственно после этого знака пишем то, что должно вернутся если условие не сработало, то есть синтаксис какой-то такой:

условие ? ответЕслиУсловиеСработало : ответЕслиУсловиеНеСработало

Внимание, в отличие от if (...) { ... } else { ... }, мы не можем просто взять и убрать else { ... }, в условном тернарном операторе всегда должно быть значение которое вернётся, если условие не сработает.

Так что же делает строка?

Строка меняет свойство display, у элемента idVhod, если на данный свойство равно inline, тогда display в принципе убирается из стилей (CSS свойство в JavaScript, можно убрать из стилей, если ему присвоить пустую строку), если же display не равен inline'у, тогда его делают inline'ом, вот так вот всё просто.

Материал по теме:

БЛОГ НА HUSL

Условный тернарный оператор в JavaScript

Ответы (2 шт):

Как работает условный тернарный оператор?

Так что же делает строка?