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

Reading time ~6 minutes

В 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
?
, нагло скопированный с ресурса learn.javascript.ru вместе с описанием его работы (все в угоду доходчивости изложения материала):


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
?
в JavaScript. Ресурс learn.javascript.ru советует использовать тернарный оператор
1
?
по назначению и не заменять им обычный оператор условия
1
if-else
.

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


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017