Возврат объекта из стрелочной функции 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.