Тернарный оператор JavaScript

В JavaScript имеется обычный оператор условия

1

if-else

1

?

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

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

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

1

?

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

Читается такой оператор условия следующим образом: если выполняется условие

1

(условие)

1

result

1

alpha

1

(условие)

1

result

1

beta

Тернарный оператор условия очень похож на обычный оператор условия

1

if-else

1

if-else

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

• оператор условия

  1

  if-else

  :

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

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

  1

  ?

  :

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

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

1

result

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

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

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

1

?

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

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

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!';

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

• Переменной

  1

  login

  присвоить значение, полученное от пользователя.
• Если значение переменной

  1

  login

  равно

  1

  black

  , то переменной

  1

  pass

  присвоить значение

  1

  Welcome!

  .
• Иначе, если значение переменной

  1

  login

  равно

  1

  white

  , то переменной

  1

  pass

  присвоить значение

  1

  Good bay!

  .
• Иначе, если значение переменной

  1

  login

  равно

  1

  green

  , то переменной

  1

  pass

  присвоить значение

  1	See you next week!

  .
• Иначе переменной

  1

  pass

  присвоить значение

  1	I don\'t know you!

  .

Приведу еще один пример нескольких операторов

1

?

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

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

alert( message );

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

Вопросительный знак проверяет сначала

1

age < 3

1

age < 18

1

age < 100

То же самое через

1

if-else

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

Вот так работает тернарный оператор

1

?

1

?

1

if-else

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