Логика и истина

В JavaScript есть операторы if и then, а также тернарный оператор, которые позволяют нам делать определённые вещи только при соблюдении некоторых условий. JavaScript определяет, является ли условие выполненным, оценивая значение или выражение на его «истинность». Поскольку JavaScript относится к динамически типизированным языкам, мы можем использовать любое значение или их комбинацию. Однако, правила, по которым JavaScript определяет, является ли данное значение или выражение true или false могут запутать.

Вот пример простого выражения if в JavaScript. В нём оценивается на истину число 1; поскольку 1 истинно, код внутри блока, ограниченный { и }, будет выполнен.

if ( 1 ) {
  // этот код будет выполнен!
  console.log( '1 - истина' );
}

Как выясняется, большинство значений в JavaScript являются истинными — на деле только пять значений в JavaScript ложны:

• undefined (значение по умолчанию объявленных переменных, которым не присвоено значение);
• null;
• NaN (not a number, не число);
• 0 (ноль);
• '' (пустая строка).

Когда мы хотим проверить, является ли значение «ложно», то можем использовать оператор !:

var a = '';

if ( !a ) {
  // этот код будет выполнен если a ложно
  console.log( 'a - ложно' );
}

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

var notANumber = 'four' - 'five';

if ( !notANumber ) {
  // этот код будет выполнен
  console.log( '!notANumber - истинно' );
}

Тем не менее, если мы сравним значение NaN с false, то вернёмся к ложному значению:

var notANumber = 'four' - 'five';

if ( notANumber == false ) {
  // этот код не будет выполнен!
  console.log( 'notANumber - ложно' );
} else {
  // этот код будет выполнен
  console.log( 'notANumber - истинно' );
}

Важно помнить, что все другие значения, кроме пяти перечисленных выше, истинны. Сюда входят пустые массивы, пустые объекты, все непустые строки (в том числе строка '0') и любые числа кроме 0.

Можно написать выражение с if и else в одну строку без использования фигурных скобок. Эта практика не рекомендуется, поскольку усложняет чтение кода и его поддержку. Мы упомянули об этом просто потому, что вы можете столкнуться с этим в чужом коде.

Логические операторы

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

var foo = 1;
var bar = 0;
var baz = 2;
  
foo || bar;     // возвращает 1, которое истинно
bar || foo;     // возвращает 1, которое истинно

foo && bar;     // возвращает 0, которое ложно
foo && baz;     // возвращает 2, которое истинно

В случае оператора || возвращается первое значение, если оно истинно, или последнее значение. В случае оператора && возвращается первое значение, если оно ложно, или последнее значение.

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

foo && bar();   // выполняет bar() только если foo истинно

var bar = baz || createBar();  // использовать baz в качестве значения для bar если
// baz не ложно; в противном случае вызвать createBar

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

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

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

Внимание! Неудачное решение

var propertyName;

if (dim === 'width') {
  propertyName = 'clientWidth';
} else {
  propertyName = 'clientHeight';
}

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

var propertyName = ( dim === 'width' ) ? 'clientWidth' : 'clientHeight';

Выражение перед ? оценивается на его истинность. Если оно истинно, в качестве значения переменной propertyName используется первое значение (clientWidth); в противном случае применяется второе значение (clientHeight).