Условный 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

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

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

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

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

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

let strength = null;

if (password.length > 7) {
  strength = 'Strong';
} else {
  strength = '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 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

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;

// 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

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

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

// 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)

// 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))