LearnJS

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

Условный оператор ? : позволяет выбрать одно из двух значений в зависимости от условия. Его еще называют тернарным оператором, потому что в записи участвуют три части: условие, значение при true и значение при false.

let age = 20;

let message = age >= 18 ? 'Доступ разрешен' : 'Доступ запрещен';

console.log(message);

Результат:

Доступ разрешен

Если условие age >= 18 истинно, в переменную message попадет первое значение. Если условие ложно - второе.

Что такое условный оператор

Оператор ? : похож на короткую запись if…else, но используется не совсем для того же. Он удобен, когда нужно получить значение.

Например, выбрать текст, число, CSS-класс, статус или результат функции.

let isOnline = true;
let status = isOnline ? 'В сети' : 'Не в сети';

console.log(status);

В консоли будет:

В сети

Синтаксис

условие ? значение_если_true : значение_если_false

Сначала JavaScript проверяет условие перед знаком ?.

Если условие принимает значение true, возвращается значение после ?. Если условие принимает значение false, возвращается значение после :.

let temperature = 25;

let weather = temperature > 20 ? 'Тепло' : 'Холодно';

console.log(weather);

Результат:

Тепло

Пример с переменной

Часто условный оператор используют при создании переменной.

let scores = 75;

let result = scores >= 60 ? 'Экзамен сдан' : 'Экзамен не сдан';

console.log(result);

Условие scores >= 60 истинно, поэтому в переменную result записывается строка ‘Экзамен сдан’.

Отличие от if…else

Такую запись можно сделать через if…else:

let scores = 75;
let result;

if (scores >= 60) {
  result = 'Экзамен сдан';
} else {
  result = 'Экзамен не сдан';
}

А можно короче через условный оператор:

let scores = 75;

let result = scores >= 60 ? 'Экзамен сдан' : 'Экзамен не сдан';

Обе записи работают одинаково. Но если внутри условия нужно выполнить несколько действий, лучше использовать обычный if…else. Условный оператор удобен именно для выбора значения.

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

Оператор ? : часто используют внутри функции, когда нужно сразу вернуть один из двух вариантов.

function getAccessMessage(age) {
  return age >= 18 ? 'Доступ разрешен' : 'Доступ запрещен';
}

console.log(getAccessMessage(16));
console.log(getAccessMessage(21));

Результат:

Доступ запрещен
Доступ разрешен

Несколько условий

Условный оператор можно вкладывать один в другой, но с этим легко переборщить.

let scores = 85;

let grade = scores >= 90 ? 5 : scores >= 60 ? 4 : 3;

console.log(grade);

Здесь логика такая:

  • если баллов 90 или больше - оценка 5;
  • если баллов меньше 90, но 60 или больше - оценка 4;
  • во всех остальных случаях - оценка 3.

Такая запись допустима, но читается сложнее. Если условий становится много, лучше использовать if…else if…else.

Когда использовать

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

let userName = '';

let displayName = userName ? userName : 'Гость';

console.log(displayName);

Результат:

Гость

Если условие простое, запись через ? : получается короткой и понятной. Если логика занимает несколько строк или включает много действий, лучше оставить if…else.

Итого

Условный оператор ? : - это короткая запись для выбора одного из двух значений. Он проверяет условие и возвращает значение после ?, если условие истинно, или значение после :, если условие ложно. Чаще всего его используют при записи значения в переменную или при возврате результата из функции.