Uncaught TypeError: Cannot read property ‘x’ of undefined
Признать это? Видели это раньше? Это, пожалуй, наиболее распространенная ошибка в Javascript.
Динамические данные, подверженные ошибкам
Мы часто имеем дело с динамическими данными в сложных структурах во всех веб-приложениях (браузер + node.js), которые, когда мы пытаемся использовать эти данные, могут привести к неожиданному поведению и ошибкам.
Давайте рассмотрим небольшой пример, где у нас есть коллекция items
(индексированных по ключу) объектов с определенными свойствами. Нам нужно получить родительский элемент и некоторые свойства этого родительского элемента. Это может выглядеть так:
Но это целая куча вкусных приманок для неумолимого X-неопределенного-существа. Он выпрыгнет, нападет на вас сбоку и сильно укусит!
Проблема в том, что мы ожидаем, что item
будет иметь parent
и что этот родительский идентификатор существует в items
и что родительский элемент имеет оба types
и name
определенный. types
также может вызвать проблемы, если предполагается, что это массив.
Резервные значения по умолчанию на помощь?
Нам нужно вставить несколько резервных значений по умолчанию, например, так:
Хорошо, теперь мы можем чувствовать себя в безопасности? Но это выглядит немного грязно и неструктурировано, не так ли?
ES6 Деструктуризация
Давайте начнем полностью и попробуем удивительный синтаксис ES6 Destructuring:
Сначала мы деструктурируем item
, а также переименовываем его свойство parent
в parentId
(потому что можем, иначе оно автоматически получит имя parent
).
Затем мы находим родителя в items
, деструктурируя всю эту коллекцию, и в то же время мы также деструктурируем родителя, чтобы добраться до него и получить как types
, так и name
с резервными значениями по умолчанию.
Вывод
If we…
Максимально используйте деструктурирование:
- Всякий раз, когда нам нужно что-то внутри объекта или массива
- Используйте eslint для получения предупреждений и помощи
Старайтесь всегда думать о значениях по умолчанию в наших деструктуризациях:
- Почти так же, как мы привыкли к аргументам функций.
… тогда мы могли бы лучше защитить себя от ошибок X-of-undefined.
Большой бонус: Вдвое меньше размер кода!