🎸 JavaScript — Логические операторы (Тернарный | Элвис | Безопасная навигация)

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

Тернарный оператор (c ? t : f)

Тернарный оператор был частью языка JavaScript с момента его первого появления.

Оператор берет 3 операнда и размещает их в следующем формате:

? ‹истинный_результат› : ‹ложный_результат›.

const fee = 4;
const doble = true;

const total = double ? 2*fee : fee;

У нас здесь нет стенографии, и если мы хотим объединить присваивание, то это выглядит так:

var t = true ? 1 : 0;

Нулевой оператор объединения (??)

Бычий объединяющий оператор, также известный как «оператор Элвиса», появился в ECMAScript 2020 (ES11).

Он существует во многих других языках (таких как C# и Kotlin). Конечно, это не только для поклонников прически Элвиса (?:).

Оператор — это логический оператор, который возвращает свой [правый операнд], когда его [левый операнд пустой или неопределенный], и в противном случае возвращает свой [левый операнд].

const name = otherName ?? 'Suzi';
console.log(name); ==> 'Suzi'

Поэтому, если переменная otherName имеет значение null/undefined, переменной name будет присвоено значение «Suzi». В противном случае он получает значение otherName.

const otherName = 'Jimmy';
const name = otherName ?? 'Suzi';
console.log(name); ==> 'Jimmy'

Логическое задание также появилось в ECMAScript 2020. Это дает нам возможность сократить выражение оператора Элвиса. Это называется присваиванием нулевого объединения (??=).

let name = null;
name ??= 'Suzi';

В приведенном выше примере имя оценивается как «Сюзи», поскольку переменная имени имеет значение null.

Оператор безопасной навигации (?.)

Оператор безопасной навигации появился в ECMAScript 2020 (ES11).

Мотивация для этого оператора заключалась в том, чтобы дать разработчику возможность доступа к значению свойства, которое находится глубоко в структуре, не будучи уверенным, что оно существует / левый операнд равен нулю. Это помогает избежать необходимости добавлять последовательные явные проверки нулевой безопасности. Оператор существует на других языках, таких как C# и Swift.

В этом формате оператор использует 2 операнда: ‹oprand›?.‹oprand›.

obj.<oparnd>?.<oparnd>
obj.<oparnd>?.[expr_oparnd]
obj.<func_oparnd>?.(args_oparnd)

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

const kid = {
  name: 'Jimmy',
  age: 11,
  shoes: {
    color: 'black',
  }
}

const barnd = kid.shirt?.brand; // it will be eveluted to undefined

Другой пример с записью в скобках:

const kid = {
  name: 'Jimmy',
  age: 11,
  toys: ['Buzz','Peppa Pig'],
  shoes: {
    color: 'black',
  }
} 

const x = 0;
const barnd = kid.shirt?.[x++]; 
// x is evaluted to 0, since the [x++] was not executed

let toyInIndex = kid.toys?.[0];
// toyInIndex is evaluted to 'Buzz'
 
let toyInIndex = kid.toys?.[111];
// toyInIndex is evaluted to 'undefined'

Поскольку выражение может быть преобразовано в неопределенное, мы можем комбинировать оператор Элвиса.

const kid = {
  name: 'Jimmy',
  age: 11,
  shoes: {
    color: 'black',
  }
}

const barnd = kid.shirt?.brand ?? 'Nike'; // it will be eveluted to 'Nike'