Ecmascript 6 arrow function that returns an object

Unwrapping the mystery of arrow function objects

Know when to hold 'em, know when to return 'em

When dealing with single expressions, arrow functions automatically, or implicitly, return the value of the expression without needing the return keyword. To return an object literal, wrap it in parentheses to avoid it being treated as a block body.

const presentGift = (gift) => ({ gift });
// It's more mysterious if you don't say what's in the box


More than just one trick

Sometimes one trick isn't enough, and you need more than a single expression. You can perform multiple statements within a block body {}, but make sure to use an explicit return.

// This magician knows a lot of tricks
const pullItemsFromHat = (item1, item2) => {
  console.log('What could it be now?...');
  return { firstItem: item1, secondItem: item2 };
};


Master illusionist or simple mistake?

Never confuse your audience, or a block body { } with object literals { }. A classic mistake often made by apprentices and not masters. Always use parentheses when returning an object to make your intentions clear!

How to mystify and amaze with objects

Magical shorthand property names

When you've got too many pigeons in your sleeves and the variable names match the object property names, you can use shorthand property names to keep your act running smooth and quick.

// Poof! Duplicate stuff gone
const animalAppear = (cat, dog) => ({ cat, dog });


Destructuring for the big reveal

One of the most breathtaking aspects of arrow functions is how elegantly they perform parameter destructuring. Arrow functions allow you to directly extract properties from objects passed as arguments.

// Ta-Da! Pulled out the properties you wanted, didn't I?
const getSpecs = ({ height, width }) => ({ height, width });


Transpiling to keep the show going

Everyone loves a showstopper, but need to keep your tricks compatible for the entire crowd. Even the old geezers who still use ES5. Sophisticated tools like Babel can help transpose your functions, but pay heed to the celestial syntax during the process.

// Oldies are goodies, but we can make them better
// Original ES6 code
const createBalloon = () => ({ color: 'Red' });
// Transpiled ES5 code
var createBalloon = function () {
  return { color: 'Red' };
};


The grand finale: Getting it right

The guide to performing flawlessly

The MDN documentation is every magician's grimoire, giving you the spells, incantations, and use cases, not to mention the limitations, and differences between the old and new magic that is arrow functions.

Staying in touch with the mystical arts

It's important to stay updated with the ever-evolving world of JavaScript. Arrow functions, brought to us by the arcane arts of ES6, is a paradigm shift in the craft that everyone should learn.

The power of community and camaraderie

Fellow sorcerers and soothsayers have compiled a treasure trove of tricks and hexes that will help grasp the nuances of the craft better. Don't hesitate in exchanging and experimenting with spells and code snippets in your pursuit of perfection.