Возврат объекта из стрелочной функции ES6: разбор проблемы

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

Для создания объекта с помощью функции-стрелки, возвращаемый объект следует заключить в круглые скобки. Таким образом, можно избежать путаницы с блоком кода функции и ненужности использования return.

const pullRabbitFromHat = () => ({ rabbit: 'Presto!' });

Такой подход позволяет получить объект простым и эффективным способом.

Разделяем секреты работы с объектами внутри функций-стрелок

Когда держать под контролем, а когда отпустить на волю

Функции-стрелки автоматически возвращают результат для отдельных выражений, поэтому в них не требуется явный return. Однако при работе с объектами необходимо поместить их в скобки, чтобы избежать недоразумений.

const presentGift = (gift) => ({ gift });
// Вот и подарок перед вами, но что же внутри?

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

Когда фокус сложнее, чем кажется

Если вам нужно выполнить несколько действий, то используйте обычные фигурные скобки и не забывайте про явный return.

const pullItemsFromHat = (item1, item2) => {
  console.log('Что же мне выпадет?...');
  return { firstItem: item1, secondItem: item2 };
};

Искусство или везение?

Начинающие разработчики часто путают фигурные скобки объекта со скобками блока кода. Для понятности кода рекомендуется заключать возвращаемый объект в скобки.

Применяем и удивляем объектами

Сокращение имен свойств как карточный фокус

Если имена переменных совпадают с ключами в вашем объекте, можно использовать сокращённую запись свойств.

const animalAppear = (cat, dog) => ({ cat, dog });
// И вдруг все дубликаты исчезли, словно по мановению волшебной палочки

Тонкости деструктуризации

Функции-стрелки элегантно справляются с деструктуризацией аргументов — это позволяет извлекать свойства объектов прямо в параметрах.

const getSpecs = ({ height, width }) => ({ height, width });
// Вы извлекли ровно то, что хотели. Волшебство!

Транспиляция: превращаем новое в старое

Чтобы ваш код был совместим с различными браузерами и средами, вы можете использовать такие инструменты, как Babel, для транспиляции в ES5.

// Доброе старое ES5, но мы можем его модернизировать
// Исходный код на ES6
const createBalloon = () => ({ color: 'Red' });
// Транспилированный код на ES5
var createBalloon = function () {
  return { color: 'Red' };
};

Финал фейерверка: к подножию совершенства

Искусное владение

Документация MDN — это настоящая книга магии, в которой вы найдёте множество примеров, описания ограничений и особенностей работы с функциями-стрелок.

Связь с зачарованным миром JS

Следите за последними новостями в мире JavaScript. Функции-стрелки раскрывают перед вами новые горизонты в программировании.

Мудрость магического содружества

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

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

1. Выражения функций-стрелок – JavaScript | MDN — Подробная информация о функциях-стрелках.
2. ES6 Погружение: функции-стрелки – Mozilla Hacks — Максимально глубокий анализ функций-стрелок и их особенностей.
3. JavaScript: Функции-стрелки для начинающих — Введение в функции-стрелки для новичков.
4. Особенности работы с функциями-стрелок — Разъяснения, как возвращать объекты из функций-стрелок.
5. Спецификация языка ECMAScript 2015 – ECMA-262 6-е издание — Официальная документация ECMAScript по функциям-стрелок.
6. Когда не следует использовать функцию-стрелку — Подробно о ситуациях, в которых следует избегать функций-стрелок.
7. 13. Функции-стрелки — Рассмотрение преимуществ и ограничений функций-стрелок в ES6.