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