Упростите код JavaScript с помощью троичных (?) и нулевых операторов объединения (??)

Условный (тернарный) оператор является единственным оператором JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (?), выражение, которое следует выполнить, если условие истинно, и двоеточие (:), представляющее выражение, которое необходимо выполнить. если условие ложно. Этот оператор служит краткой альтернативой оператору «если еще».

Давайте рассмотрим пример, чтобы лучше понять его использование:

const person = {
  name: "JOE",
  address: {
    country: "India"
  }
};

const validatedName = person.name ? "name exists" : "name doesn't exist";
const validatedAge = person.age ? "age exists" : "age doesn't exist";

console.log(`Person ${validatedName} and Person ${validatedAge}`);

//Output
Person name exists and Person age doesn't exist.

В приведенном выше примере person.name имеет значение, поэтому оно выполняет истинное утверждение, а person.age не определено, поэтому оно выполняет ложное утверждение.

Необязательный оператор цепочки (?.)

Необязательный оператор цепочки (?.) — это мощная функция, представленная в ES2020, которая значительно упрощает процесс доступа к глубоко вложенным значениям объектов в JavaScript. Предоставляя лаконичный способ обработки нулевых или неопределенных значений, этот оператор упрощает условные проверки и повышает читабельность кода. В этой статье мы рассмотрим функциональность оператора необязательной цепочки на практическом примере.

const person = {
  name: "JOE",
  address: {
    country: "India"
  }
};

const country = person?.address?.country;
const street = person?.address?.street;
console.log(`Location of ${person.name} is ${country} and street is ${street}`);

//Output
Location of JOE is India and street is undefined 

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

Нулевой оператор объединения (??) — это оператор, представленный в ES2020, который предлагает практическое решение для установки значений по умолчанию при обнаружении «нулевых» или «неопределенных» значений в JavaScript. Он отличается от логического оператора ИЛИ (||) тем, что специально проверяет нуль или неопределенность, а не ложные значения, такие как пустые строки, 0, NaN или false.

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

const person = {
  name: "JOE",
  address: {
    country: "India"
  }
};

const street = person?.address?.street ?? "Random";
console.log(`Location of ${person.name} is ${person?.address?.country} and street is ${street}`);

//Output
Location of JOE is India and street is Random

Заключение

В этой статье мы рассмотрели три мощных оператора — тернарный оператор (?), необязательную цепочку (?.) и нулевой оператор объединения (??), — которые могут значительно упростить и улучшить ваш код JavaScript.

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

Удачного кодирования!