Как называется ? перед методом объекта или функции?

Как называется ? перед методом объекта или функции

Предполагаю, что имеется в виду опциональный оператор ?. (Optional Chaining Operator), а может быть вопрос о ?.() для вызова функции или о ?? (Nullish Coalescing). Дам полный ответ для всех вариантов.

1. Optional Chaining (?.)

Это оператор опциональной цепи (или опциональная цепочка), который позволяет безопасно получать доступ к вложенным свойствам объекта, даже если промежуточное значение не существует или равно null/undefined.

Основная форма - доступ к свойству:

// ❌ Старый способ - можно получить ошибку
const city = user.address.city; // Ошибка если address === null

// ✅ С Optional Chaining
const city = user?.address?.city; // undefined если address === null
// Результат: либо значение, либо undefined

Вызов методов:

// ❌ Ошибка если метода нет
user.getEmail(); // TypeError если user.getEmail не существует

// ✅ Безопасный вызов
const email = user?.getEmail?.();
// Результат: undefined если метода нет

Доступ к элементам массива:

// ❌ Ошибка если массив null
const firstItem = items[0]; // TypeError если items === null

// ✅ Безопасный доступ
const firstItem = items?.[0];
// Результат: undefined если items === null

2. Nullish Coalescing Operator (??)

Это оператор нулевого объединения. Он отличается от логического ИЛИ тем, что проверяет именно null/undefined, а не любые "ложные" значения.

Различие с ||:

const value = null;

// С логическим ИЛИ
const result1 = value || 'default'; // 'default'

// С nullish coalescing
const result2 = value ?? 'default'; // 'default'

// Проблема с ||:
const count = 0;
const result3 = count || 10; // 10 (неправильно!)
const result4 = count ?? 10; // 0 (правильно!)

// || считает falsy: false, 0, '', undefined, null
// ?? считает только: undefined, null

Часто комбинируют вместе:

// Безопасный доступ И дефолтное значение
const city = user?.address?.city ?? 'Unknown';
// Если user === null -> undefined
// Если city === undefined -> 'Unknown'
// Если city === null -> 'Unknown'
// Если city === 'Moscow' -> 'Moscow'

3. Полный синтаксис Optional Chaining

// Вариант 1: Доступ к свойству
obj?.prop

// Вариант 2: Доступ к вычисляемому свойству
obj?.[expr]

// Вариант 3: Вызов метода
obj?.method()

// Вариант 4: Комбинация
obj?.method?.().nestedProp?.[0]?.deepMethod?.()

4. Практические примеры

Пример 1: Работа с API ответами

// API может вернуть неполные данные
const userData = await fetch('/api/user').then(r => r.json());

// ❌ Опасно
const city = userData.profile.address.city; // Может упасть

// ✅ Безопасно
const city = userData?.profile?.address?.city ?? 'Not specified';

Пример 2: Обработчики событий

// Функция callback может быть undefined
function Component({ onSuccess }) {
  const handleClick = () => {
    // ❌ Ошибка если onSuccess undefined
    onSuccess?.();
    
    // ✅ Вариант с дефолтом
    onSuccess?.() ?? console.log('No callback');
  };
}

Пример 3: Вложенные объекты

const user = {
  profile: {
    settings: {
      notifications: true
    }
  }
};

// ❌ Много проверок
const notifyEnabled = user && user.profile && user.profile.settings 
  && user.profile.settings.notifications;

// ✅ С Optional Chaining
const notifyEnabled = user?.profile?.settings?.notifications ?? false;

Пример 4: Массивы и индексы

const data = { items: [1, 2, 3] };

// ❌ Ошибка если items === null
const first = data.items[0];

// ✅ Безопасно
const first = data?.items?.[0] ?? null;

5. Short-Circuiting (коротко замыкание)

Опциональный оператор останавливает вычисление при первом null/undefined:

const user = null;

// Здесь getEmail НИКОГДА не выполнится
// потому что user === null
const email = user?.getEmail?.();

// Это эквивалентно:
const email = (user === null || user === undefined) 
  ? undefined 
  : user.getEmail();

Практический пример короткого замыкания:

// Допустим есть функция с side effect
function logAndGet(obj) {
  console.log('Getting value...');
  return obj.value;
}

const user = null;

// logAndGet НИКОГДА не вызовется
const value = user?.value ?? logAndGet(user);
// Вывод консоли: "Getting value..." не появится

6. Возвращаемое значение

Опциональный оператор ВСЕГДА возвращает либо значение, либо undefined:

const user = { name: 'John' };

const email = user?.email; // undefined
const name = user?.name;   // 'John'
const method = user?.getAge; // undefined

console.log(typeof email); // 'undefined'
console.log(typeof name);  // 'string'
console.log(typeof method); // 'undefined'

7. Browser Support

// Optional Chaining поддерживается с ES2020
// Совместимость:
// Chrome 80+
// Firefox 74+
// Safari 13.1+
// Node.js 14+

// Для старых браузеров нужна транспилировать с Babel
// @babel/plugin-proposal-optional-chaining

8. Сравнение с другими подходами

const user = { name: 'John', email: null };

// 1. Optional Chaining + Nullish Coalescing (современный)
const email = user?.email ?? 'no-email@example.com';

// 2. Логический оператор (старый способ)
const email = user && user.email || 'no-email@example.com';

// 3. Тернарный оператор
const email = user ? user.email : undefined;

// 4. Try-catch (плохая практика)
let email;
try {
  email = user.email;
} catch (e) {
  email = undefined;
}

// Вариант 1 - самый чистый и понятный

9. Распространенные ошибки

// ❌ ОШИБКА 1: Optional Chaining со значениями
const value = null?.toString(); // SyntaxError! Это неправильно

// ✅ ПРАВИЛЬНО
const value = null; 
const result = value?.toString();

// ❌ ОШИБКА 2: Assignment с Optional Chaining
user?.email = 'new@email.com'; // SyntaxError!

// ✅ ПРАВИЛЬНО (если нужно)
if (user) {
  user.email = 'new@email.com';
}

// ❌ ОШИБКА 3: Путаница с Nullish Coalescing
const value = undefined || 'default'; // 'default' (правильно)
const value = 0 || 'default'; // 'default' (может быть неправильно)
const value = 0 ?? 'default'; // 0 (правильно для 0)

10. Когда не использовать Optional Chaining

// Хорошее использование
const city = user?.address?.city;

// ПЛОХОЕ использование (избыточное)
const name = user?.name; // name ВСЕГДА существует если user существует

// ПЛОХОЕ использование (скрывает ошибки)
const result = obj?.nonExistentMethod?.(); 
// Лучше явно проверить: if (typeof obj.method === 'function')

Итоговая таблица

Ответ на вопрос: это Optional Chaining (?.) - оператор опциональной цепи, который безопасно получает доступ к вложенным свойствам и методам, возвращая undefined если на пути встречается null или undefined.