Оператор опціонального доступу (Optional Chaining Operator), позначається як ?., є корисною функцією в сучасному JavaScript, яка дозволяє безпечно отримувати доступ до властивостей об’єктів, якщо ці властивості можуть бути null або undefined. Цей оператор спрощує код та робить його більш надійним, оскільки він уникне помилок в разі відсутності властивостей.

Синтаксис оператора опціонального доступу

Синтаксис цього оператора такий:

object?.property
object?.method()
object?.[computedProperty]

object – об’єкт, до якого ви намагаєтеся отримати доступ.

• property – властивість, до якої ви намагаєтеся отримати доступ.
• method() – метод об’єкта, до якого ви намагаєтеся отримати доступ.
• [computedProperty] – обчислювана властивість, до якої ви намагаєтеся отримати доступ.

Приклади використання оператора опціонального доступу

Приклад 1: Доступ до властивостей об’єкта

const user = {
    name: "John",
    address: {
        city: "New York",
        zipcode: "10001"
    }
};

// Без оператора опціонального доступу
const city = user && user.address && user.address.city;

// З оператором опціонального доступу
const cityOptional = user?.address?.city;

console.log(city); // "New York"
console.log(cityOptional); // "New York"

// А тепер спробуємо звернутися до неіснуючої властивості
console.log(user.phones.mobile); // Помилка : TypeError: Cannot read properties of undefined (reading 'mobile')
console.log(user.phones?.mobile); // undefined

Приклад 2: Виклик методу об’єкта

const calculator = {
	add: function (a, b) {
		return a + b;
	}
};

// Без оператора опціонального доступу
const result = calculator && calculator.add && calculator.add(5, 3);
// З оператором опціонального доступу
const resultOptional = calculator?.add?.(5, 3);

console.log(result); // 8
console.log(resultOptional); // 8

// Викликаємо неіснуючий метод multiply
const res = calculator.multiply?.(2, 4);
console.log(res); // undefined

const resOptional = calculator.multiply(2, 4); // Помилка TypeError: calculator.multiply is not a function

Приклад 3: Обчислювана властивість

const person = {
	name: 'Alice',
	age: 30
};

const property = 'age';

// Без оператора опціонального доступу
const value = person && person[property];

// З оператором опціонального доступу
const valueOptional = person?.[property];

console.log(value); // 30
console.log(valueOptional); // 30

// А тепер спробуємо звернутися до неіснуючої властивості
console.log(person['phones']?.['mobile']); // undefined
console.log(person['phones']['mobile']); // Помилка : TypeError: Cannot read properties of undefined