Опциональная цепочка (Optional Chaining)

04-02-24 14:41:23


Image for the Опциональная цепочка (Optional Chaining)

Доступ к вложенным свойствам

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

// Без опциональной цепочки
const value = obj && obj.property1 && obj.property1.property2 && obj.property1.property2.property3;

С опциональной цепочкой выражение выше можно упростить:

// С опциональной цепочкой
const value = obj?.property1?.property2?.property3;

Это гарантирует, что, если какое-либо промежуточное свойство равно null или undefined, все выражение вернет undefined, предотвращая ошибки.

Вызов вложенных функций

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

// Без опциональной цепочки
const result = obj && obj.method1 && obj.method1().method2 && obj.method1().method2();

С использованием опциональной цепочки:

// С опциональной цепочкой
const result = obj?.method1?.()?.method2?.();

Если хотя бы один из методов в цепочке равен undefined, всё выражение оценивается как undefined без генерации ошибки.

Работа с массивами

Опциональная цепочка не ограничивается объектами; она также работает с массивами. При работе с массивами она предотвращает ошибки при попытке доступа к элементу по индексу, который не существует:

// Без опциональной цепочки
const element = array && array[0] && array[0][1];

Используя опциональную цепочку:

// С опциональной цепочкой
const element = array?.[0]?.[1];

Комбинирование с оператором нулевого слияния (Nullish Coalescing)

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

const defaultValue = obj?.property1 ?? 'Default Value';

В этом примере, если obj?.property1 равно undefined, выражение принимает значение по умолчанию 'Default Value'.

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