Решаем SyntaxError: Invalid shorthand в JavaScript

Быстрый ответ

Для исправления ошибки "Некорректная инициализация сокращённого свойства" воспользуйтесь синтаксисом ES6 при создании объектов. Если имя переменной совпадает с именем свойства объекта, используйте конструкцию {имяСвойства}. В таком случае {а} будет эквивалентно {a: a} при условии, что переменная a была объявлена ранее. В противном случае, примените формат {имяСвойства: значение}.

let a = 'значение';
let obj1 = {a}; // Значение свойства 'a' – это 'значение'.
let obj2 = {b}; // Ошибка: переменная 'b' не объявлена!
let obj3 = {b: 'значение'}; // Свойству 'b' присвоено значение 'значение'.

Особенности сокращённой записи в ES6

Сокращённая запись свойств может создавать иллюзию простоты, но обладает нюансами.

Совпадение имен переменных и свойств

Отметим, что имена переменных и имена свойств объекта могут быть одинаковыми:

let user = 'Алиса';
let key = 'возраст';

let userInfo = {user, key: 25};
// Получим объект userInfo: {user: 'Алиса', key: 25}.

Подробнее об этом расскажет наш спикер на видео

Особые случаи при формировании HTTP-запросов

При составлении тела HTTP-запросов или заголовков учитывайте, что все переменные для сокращённых свойств должны быть предварительно объявлены:

let token = 'abc123';

let headers = {
  'Content-Type': 'application/json',
  'Authorization': token, // Токен успешно добавлен
  // Недопустимо использовать необъявленную переменную 'Authorization'
};

Различие между деструктуризацией и сокращённой инициализацией

Деструктуризация объекта извлекает свойства объекта, в то время как при инициализации эти свойства присваиваются:

let object = { username: 'JohnDoe', password: '123456' };

let { username: userName, password } = object;
// Переменные userName и password успешно инициализированы.

Обработка ошибок в сокращённой записи

Понимание причин ошибки "Некорректная инициализация сокращённого свойства" поможет избежать синтаксических ошибок, связанных с ожиданием значения после двоеточия:

Возможные синтаксические ошибки при использовании сокращённой записи

Несмотря на то, что ES6 упрощает код, подход с использованием новых сокращений не обходится без подводных камней:

let calculator = {
  addition(a, b) {
    return a + b;
  },
  // Ошибка в сокращенной записи, калькулятор вышел из строя!
};

Правила использования запятых

Не забывайте о правильном использовании запятых, которые помогают поддерживать структуру кода:

let config = {
  setting1: true,
  setting2: false, // Запятая стоит на своём месте
  // Пропуск запятой может привести к ошибке.
};

Рекомендации при использовании сокращённой записи

Инструменты статического анализа кода

Инструменты, такие как ESLint, работают как радар, замечающий синтаксические ошибки:

{
  "rules": {
    "object-shorthand": ["error", "always"]
  }
}
// Включив правило ESLint, вы помогаете поддерживать чистоту кода.

Отладка

Используйте console.log для контроля значений свойств объекта. Если вы увидите undefined, это знак некорректной инициализации.

Инструменты для форматирования кода

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

Визуализация

Исправление ошибки "Некорректная инициализация сокращённого свойства" можно представить следующим образом:

// Неверно: 🚫
const { property: } = object;
// Ошибка: Некорректная инициализация сокращённого свойства

// Верно: ✅
const { property } = object;

Это аналогично поиску потерянного элемента пазла:

До исправления: [📦: ]
                      ^
              Здесь должно быть значение!

После исправления:  [📦]

Вам нужно сопоставить "коробочку (📦)" с её содержимым, удалив двоеточие (:), если далее за ним ничего не следует!

Реальные примеры использования

Сочетание обычных и сокращённых свойств

При совмещении обычных и сокращённых свойств требуется особое внимание к синтаксису:

let itemId = 102;
let itemName = 'Виджет';

let order = {
  itemId,
  itemName,
  quantity: 5,
  // Использованы оба вида свойств, и оба применены корректно!
};

Сложности вложенных объектов

Вложенные объекты требуют особого внимания для избежания ошибок:

let address = 'Главная улица';
let user = {
  name: 'Джон',
  location: {
    address,
    city: 'Метрополис'
  }
};

Возможности ES6 при работе с библиотеками

С применением ES6 работа с библиотеками и фреймворками становится проще:

let ReactComponent = ({ user }) => {
  return <div>Привет, {user.name}</div>;
};

Полезные материалы

1. Инициализатор объекта – JavaScript | MDN — подробное описание синтаксиса инициализатора объекта в JavaScript.
2. Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — официальная спецификация синтаксиса ES6 с примерами.
3. ES6 в действии: Улучшенные литералы объектов — SitePoint — обзор новшеств ES6 в работе с объектами.
4. Babel · Компилятор для JavaScript следующего поколения — возможность тестировать код на ES6 в реальном времени.
5. Сокращенные имена свойств и методов в JavaScript | ES6 — краткий обзор с примерами использования сокращенных свойств.
6. object-shorthand – ESLint – Плагинный линтер JavaScript — рекомендации ESLint по использованию сокращённого синтаксиса в коде.