В JavaScript имеется обычный оператор условия if-else, с которым я был знаком уже давно. Но вот недавно познакомился с его разновидностью - тернарным оператором ?. Да, именно так - оператор вопросительный знак.

На первый взгляд, такой тернарный оператор выглядит запутанно и совершенно непонятно. Но стоит вникнуть в суть, как все становится просто.

Сначала - что значит тернарный оператор? В JavaScript существуют унарные операторы, бинарные операторы и вот теперь, оказывается, есть тернарный оператор. Опять-таки, все просто. Унарный оператор оперирует с одним операндом, бинарный оператор - с двумя операндами, тернарный оператор - с тремя операндами.

Синтаксис тернарного оператора ? таков:

var result = (условие) ? alpha : beta

Читается такой оператор условия следующим образом: если выполняется условие (условие), то переменной result присвоить значение alpha; если условие (условие) не выполняется, то переменной result присвоить значение beta.

Тернарный оператор условия очень похож на обычный оператор условия if-else. Можно сказать, что это сокращенная версия обычного оператора условия if-else.

Давайте сравним оба условия:

• оператор условия if-else:

var result;
if ( a > 0){
  result = true;
} else {
  result = false;
}

• тернарный оператор условия ?:

var result = ( a > 0 ) ? true : false;

Очень похоже, не правда ли? Здесь есть один важный момент - в данном случае у обоих операторов есть одна общая черта. И в первом, и во-втором случае переменной result присваивается значение в зависимости от выполнения условия.

А вот такой вариант уже будет непохож на предыдущий:

var summOne;
var summTwo;
if ( a > 0 ){
  summOne = a + b;
} else {
  summTwo = a * b;
}

Обратите внимание, что в этом условии результат присваивается разным переменным. В данном случае тенарный оператор условия ? уже не подойдет; он не применим в данном случае.

Отсюда вывод: тернарный оператор применим для случая, когда одной переменной присваивается разный результат в зависимости от условия.

Условие на тернарном операторе можно сделать разветвленными и тогда вид такого оператора дейсвительно будет выглядеть достаточно запутанным:

login = prompt('Enter your login','');
var pass = (login == 'black') ? 'Welcome!' :
  (login = 'white') ? 'Good bay!' :
  (login = 'green') ? 'See you next week!' :
  'I don\'t know you!';

Хотя тут все просто на самом деле, если разобраться. Если прочитать это условие, то оно будет выглядеть таким образом.

• Переменной login присвоить значение, полученное от пользователя.
• Если значение переменной login равно black, то переменной pass присвоить значение Welcome!.
• Иначе, если значение переменной login равно white, то переменной pass присвоить значение Good bay!.
• Иначе, если значение переменной login равно green, то переменной pass присвоить значение See you next week!.
• Иначе переменной pass присвоить значение I don\'t know you!.

Приведу еще один пример нескольких операторов ?, нагло скопированный с ресурса learn.javascript.ru вместе с описанием его работы (все в угоду доходчивости изложения материала):

var age = prompt('возраст?', 18);

var message = (age < 3) ? 'Здравствуй, малыш!' :
  (age < 18) ? 'Привет!' :
  (age < 100) ? 'Здравствуйте!' :
  'Какой необычный возраст!';

alert( message );

Поначалу может быть сложно понять, что происходит. Однако, внимательно приглядевшись, мы замечаем, что это обычная последовательная проверка!

Вопросительный знак проверяет сначала age < 3, если верно — возвращает ‘Здравствуй, малыш!’, если нет — идет за двоеточие и проверяет age < 18. Если это верно — возвращает ‘Привет!’, иначе проверка age < 100 и ‘Здравствуйте!’… И наконец, если ничего из этого не верно, то ‘Какой необычный возраст!’.

То же самое через if-else:

if (age < 3) {
  message = 'Здравствуй, малыш!';
} else if (a < 18) {
  message = 'Привет!';
} else if (age < 100) {
  message = 'Здравствуйте!';
} else {
  message = 'Какой необычный возраст!';
}

Вот так работает тернарный оператор ? в JavaScript. Ресурс learn.javascript.ru советует использовать тернарный оператор ? по назначению и не заменять им обычный оператор условия if-else.

Данный материал основан на ресурсе learn.javascript.ru и не претендует на оригинальность.