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.

Большой бонус: Вдвое меньше размер кода!