Допустим, есть такая вёрстка:


А в файле скрипта мы пытаемся получить два элемента: существующий блок с классом .box и не существующий блок с классом .block


Что будет, если мы сейчас попробуем вывести в консоль block?


Мы, конечно же, получим ошибку в 6-й строке


Если далее в коде мы попытаемся получить текстовый контент изнутри элемента block, а следующей строкой выполнить еще какой-то код, например, просто вывести в консоль какой-то текст


Сначала мы получим null в первой строке, а затем получим в 3-й строке ошибку, результата же 5-й строки мы не получим вообще, потому как ошибка в 3-й строке остановила выполнение дальнейшего кода.

Чтобы избежать подобных ситуаций, когда из-за ошибки ломается весь дальнейший код, можно, как вариант, использовать условие (стр.6), например:


И вот теперь, если, к примеру, элемента block не существует, мы не получим ошибку и дальнейший код выполнится и мы увидим в консоли null и потом "Привет"


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


Это работает на чтение свойства, если попробовать записать туда что-то, то мы получим ошибку, потому что в левой части как результат работы оператора ? мы получили undefined, а в него мы, само собой, ничего записать не можем:


Часто данные, приходящие, к примеру, от пользователя, либо с сервера, не содержат того, что мы предполагаем.

Например, у нас есть переменная userData, в которой есть какие-то данные


Мы, предполагая, что в этом объекте есть свойство skills, а в нём еще js, пытаемся это получить и получаем ошибку:


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


Такие большие проверки теперь вполне можно заменять на проверку с помощью оператора опциональной цепочки, который проверит выражение слева от себя и в зависимости от результата проверки либо выдаст undefined и остановит код, либо код пойдёт дальше:


Использование оператора при вызове потенциально несуществующего метода объекта:


Оператор проверяет левую от себя часть, смотрит, существует ли такой метод как hey в объекте userData, если нет, вернет undefined и этот код прекратит работу, не выдавая ошибки, за счет этого дальнейший код будет выполнен.