JavaScript

Осваиваем условные выражения для написания более чистого кода

Условные выражения являются очень важным аспектом в синтаксисе любого языка программирования. Если вы уже некоторое время программируете на каком-либо популярном языке, то уже должны быть знакомы с условными операторами if..elif..else или switch. Они очень полезны для принятия решений в программах.

Например, предположим, что есть сундук с сокровищами, спроектированный таким образом, что только Glad (автор статьи) может его открыть. С точки зрения программы (на языке Python) эта логика может быть представлена в следующем виде:

if person == 'Glad':
  # Open the treasure chest for Glad
  TreasureChest.open()

else:
  # Don't open the chest for any other person
  TreasureChest.ignore()

Несмотря на то, что предыдущий фрагмент кода был написан на Python, речь в данной статье будет идти исключительно о языке JavaScript. Тем не менее, большинство показанных здесь техник могут быть применены и к некоторым другим языкам программирования.

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

В данной статье основной акцент будет поставлен скорее на условные выражения (с использованием логических операторов) в JavaScript и на то, как можно их применять, чем на условные инструкции.


Выражения против инструкций

Прежде чем продолжить, необходимо провести различие между выражениями и инструкциями в JavaScript. Вот очень простая аналогия:

Выражения в JavaScript — это как фразы в грамматике, в то время как инструкции в JavaScript подобны предложениям в грамматике.

Выражение — это любая фраза языка JavaScript, которая может быть вычислена интерпретатором для получения значения.

Например: литералы, присваивания, функциональные выражения, логические, побитовые или арифметические операции, доступ к свойствам объекта, вызов функций, запуск кода из строки методом eval и так далее.

В следующем фрагменте кода представлены некоторые JavaScript выражения:

// number literal
0xFF

// array literal
[]

// object literal
{}

// regexp literal
/^\d+$/

// logical AND operation
(x && y)

// bitwise XOR operation
(x ^ y)

// ternary operation
(x ? y : z)

// arithmetic operation
(x + y) / z

// assignment
x = 'string'

// function expression
(function x(y) {})

// function invocation
x(100)

// object property access
obj.students[0].name

Инструкция — это любое предложение на языке JavaScript или команда, которая может быть выполнена интерпретатором для совершения какого-либо действия или вызова побочного эффекта.

Например: условные выражения, объявление переменных или функций, циклы, throw, return, try/catch/finally и так далее.

Некоторые JavaScript выражения, такие как присваивание или вызов функции могут иметь побочные эффекты и в результате обычно используются в качестве инструкций (инструкции-выражения).


Условия и логические значения

Важнейшим требованием любой условной конструкции является наличие самого условияУсловие — это то, что определяет решение, которое будет принято в программе.

В JavaScript условие может быть любым допустимым выражением. Как правило, каким бы сложным ни было это условное выражение, оно возвращает одно из двух логических значений (booleans): trueлибо false.

Правильное понимание того, как интерпретатор JavaScript преобразует эти условные выражения в логические (boolean), необходимо для написания корректной логики для условия.

Ниже приведены две основополагающие концепции, которые помогут нам понять эти преобразования:

  • Определение истинного(true) и ложного(false) значения
  • Понимание короткой схемы вычислений в логических операциях

Истинное против ложного

Каждое значение в JavaScript можно классифицировать как истинноеили ложноеЛожные значения в JavaScript следующие:

  • '' или "" или `` (пустая строка)
  • 0 или -0 (число 0)
  • null
  • undefined
  • NaN
  • false

Все остальные значения, не указанные в этом списке, являются истинными. Всякий раз, когда JavaScript ожидает логическое значение, истинные значения неявно приводятся к true, а ложные — к false.

Однако, если вы предпочитаете намеренное или явное приведение типа, то вы можете воспользоваться встроенной функцией Boolean для преобразования любого значения в соответствующее логическое значение.

function toBoolean(value) {
  return Boolean(value);
}

Для этих целей вы также можете использовать оператор логического НЕ (!). Оператор ! преобразует свой операнд в обратное логическое значение, следовательно, он всегда вычисляет логическое значение.

С помощью оператора ! всегда возвращается false для истинных значений и true — для ложных. Чтобы преобразовать значение в соответствующее логическое значение, нужно использовать оператор ! дважды.

function toBoolean(value) {
  return !!value;
}

Короткая схема вычислений

Для логических операторов И (&&) и ИЛИ (||) необходимо наличие двух операндов. Данные операторы используются для выполнения логических операций над операндами.

Учитывая то, что два операнда являются логическими (true или false),

  • операция && возвращает true только в том случае, когда оба операнда имеют значение true, в противном случае возвращается false.
  • операция|| возвращает false только в том случае, когда оба операнда имеют значение false, в противном случае возвращается true.

Обратите внимание, что оператор && имеет более высокий приоритет, чем оператор ||, поэтому он обычно вычисляется в первую очередь. В связи с этим, если они используются вместе в одном выражении, можно использовать скобки (()) для группирования, изменив тем самым порядок вычисления. Рассмотрим следующий фрагмент кода:

false && true || true; // true
false && (true || true); // false

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

Операции && и || не всегда возвращают логическое значение. В принципе, они могут произвести любое значение. Вот более краткое описание их поведения на основе короткой схемы вычислений:

  • оператор&& сначала вычисляет первый операнд. Если полученное значение истинно, то он вычисляет второй операнд и возвращает его значение. Однако, если значение первого операнда ложно, то оператор просто возвращает ложное значение первого операнда, при этом второй операнд не вычисляется.
(a && b) === a; // `a` is falsy
(a && b) === b; // `a` is truthy
  • Оператор || сначала вычисляет первый операнд. Если полученное значение истинно, то возвращается истинное значение первого операнда, второй операнд не вычисляется. Однако, если значение первого операнда ложно, оператор вычисляет второй операнд и возвращает его значение.
(a || b) === a; // `a` is truthy
(a || b) === b; // `a` is falsy

Замена инструкций выражениями

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

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


1. Простая инструкция if

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

if (user && user.canDeletePost) {
  deletePost();
}

В этом фрагменте инструкция if гарантирует, что функция deletePost() будет вызвана, только если условие вернет true.

Простую инструкцию if можно заменить очень простым условным выражением, как показано в следующем фрагменте кода:

user && user.canDeletePost && deletePost();

Несмотря на то, что условное выражение работает аналогично предыдущей инструкцииif, на самом деле они отличаются.

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

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


2. Инструкции If…Else

Посмотрим на следующий код, определяющий надежность пароля:

let strength = null;

if (password.length > 7) {
  strength = 'Strong';
} else {
  strength = 'Weak';
}

Его цель очень проста — проверить, содержит ли пароль более 7 символов. Если да, то присвоить переменной strength значение “Strong”, если нет — “Weak”.

Предыдущий код можно сократить до следующего:

const strength = (password.length > 7) && 'Strong' || 'Weak';

Этот фрагмент кода делает то же самое, что и предыдущий, но в одной строке. Такой код уже выглядит довольно хорошо. Следующий фрагмент проверяет вычисление условного выражения.

let password = 'long_password';

console.log(password.length > 7); // true
console.log(password.length > 7 && 'Strong'); // "Strong"
console.log(password.length > 7 && 'Strong' || 'Weak'); // "Strong"

password = 'short';

console.log(password.length > 7); // false
console.log(password.length > 7 && 'Strong'); // false
console.log(password.length > 7 && 'Strong' || 'Weak'); // "Weak"

Для написания условных выражений if...else такого рода существует способ получше — использование условного оператора, также называемого тернарным оператором. Его синтаксис выглядит следующим образом:

// If condition is truthy, evaluate and return A,
// otherwise evaluate and return B

condition ? A : B

Исходя из этого, предыдущий пример кода может быть переписан с использованием тернарного оператора как указано ниже:

const strength = (password.length > 7) ? 'Strong' : 'Weak';

Хотя фрагмент кода, использующий логические операторы, работает аналогично фрагменту кода с применением тернарного оператора (для данного примера), важно знать, что они не являются взаимозаменяемыми.

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

Рассмотрим следующий код, чтобы понять опасность применения логических операторов в подобных случаях:

// LOGICAL OPERATORS
// If condition is truthy and A is truthy, return A,
// otherwise evaluate and return B

// Danger: A will never be returned if it is falsy

condition && A || B


// TERNARY OPERATOR
// If condition is truthy, evaluate and return A,
// otherwise evaluate and return B

condition ? A : B

Вот еще одна хорошо известная условная инструкция, которая обычно встречается в кроссбраузерных AJAX-библиотеках.

let xmlhttp = null;

if (window.XMLHttpRequest) {
  
  // Modern browsers
  xmlhttp = new XMLHttpRequest();
  
} else if (window.ActiveXObject) {
  
  // Older versions of Internet Explorer (IE <= 6)
  xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  
}

При помощи логических операторов предыдущий фрагмент кода можно переписать следующим образом (отступы для читабельности):

const xmlhttp = window.XMLHttpRequest && new XMLHttpRequest()
  || window.ActiveXObject && new ActiveXObject('Microsoft.XMLHTTP')
  || null;

Используя тернарный оператор:

const xmlhttp = window.XMLHttpRequest
  ? new XMLHttpRequest()
  : window.ActiveXObject
    ? new ActiveXObject('Microsoft.XMLHTTP')
    : null;

Заметьте, что в этом примере кода тернарный оператор является вложенным, что может быть полезно для работы с более сложнымиif...else условиями.

Советы и альтернативные приёмы

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


Приведение к логическому значению

Вы уже видели, как явно преобразовать значение JavaScript в эквивалентное логическое значение, используя встроенную функцию Boolean или оператор двойное НЕ (!!).

Допустим, вы хотите нормализовать значение таким образом, чтобы всегда получать логическое значение:

  • если значение логическое (boolean), возвращать это значение как есть
  • если значение не логическое, возвращать логическое значение, которое вы выберете по умолчанию — true или false.

Приведенный ниже код показывает, как можно этого добиться (здесь используются функции):

// boolOrFalse()
// Return value if it is a boolean,
// otherwise return false

const boolOrFalse = value => {
  return (typeof value === 'boolean') && value;
}

console.log(boolOrFalse()); // false
console.log(boolOrFalse(0)); // false
console.log(boolOrFalse('')); // false
console.log(boolOrFalse(false)); // false
console.log(boolOrFalse(true)); // true


// boolOrTrue()
// Return value if it is a boolean,
// otherwise return true

const boolOrTrue = value => {
  return (typeof value !== 'boolean') || value;
}

console.log(boolOrTrue()); // true
console.log(boolOrTrue(0)); // true
console.log(boolOrTrue('')); // true
console.log(boolOrTrue(false)); // false
console.log(boolOrTrue(true)); // true

Законы де Моргана

Если вы знакомы с булевой алгеброй, вы должно быть знаете о законахде Моргана. Эти законы также применяются к логическим операторам JavaScript.

Следующий фрагмент кода демонстрирует данные законы:

// These two are equivalent
!A && !B == !(A || B)

// Also these two
!A || !B == !(A && B)

Логические тождества

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

// NOT Conversion
!!A == A
!!B == B
!!C == C

// AND to OR Conversion
A && B == !(!A || !B)

// OR to AND Conversion
A || B == !(!A && !B)

// Removing nested AND
A || (B && C) == A || B && C

// Removing nested OR
A && (B || C) == !(!A || !B && !C)

Множественные тернарные операторы

Во фрагментах кода выше вы видели, что тернарные операторы могут быть вложенными в случае обработки более сложной условной if...else логики.

Тем не менее, вы должны знать некоторые нюансы, касаемо приоритета и ассоциативности тернарного оператора, для того, чтобы эффективно его применять в комплексных выражениях.

  • Тернарный оператор имеет более низкий приоритет по сравнению с логическими и значительной частью других операторов. Вследствие этого он вычисляется последним при использовании совместно с более высокоприоритетными операторами.
// this expression
A ? B + C && D : E || F && G

// will be evaluated as
A ? ((B + C) && D) : (E || (F && G))
  • Тернарный оператор имеет ассоциативность справа налево. Соответственно, при использовании множественного тернарного оператора в одном выражении они обрабатываются справа налево.
// this expression
A ? B : C ? D : E ? F : G

// will be evaluated as
(A ? B : (C ? D : (E ? F : G)))

При наличии нескольких тернарных операторов в выражении могут понадобиться скобки (()) для изменения порядка вычисления. Вот пример:

// this expression
A ? B : (C ? D : E) ? F : G

// will be evaluated as
(A ? B : ((C ? D : E) ? F : G))

Заключение

Я уверен, что теперь, дочитав эту статью до конца, вы сможете найти в своем коде области, где сможете применить данные советы и приёмы и тем самым улучшить код.

Получайте удовольствие от написания кода …

Хорошо знаете JavaScript? Пройдите наш небольшой тест и проверьте свои знания!

Перевод статьи Glad ChindaConditional JavaScript for Experts