DEV Community 👩‍💻👨‍💻

Cover image for Property shorthands
Coding Unicorn 🦄
Coding Unicorn 🦄

Posted on

Property shorthands

Property shorthands

❌ If you see code like this:

new Vuex.Store({
  modules: {
    creation: creation,
    fetching: fetching,
    authentication: authentication
  }
});
Enter fullscreen mode Exit fullscreen mode

✅ You can always refactor it to:

new Vuex.Store({
  modules: {
    creation,
    fetching,
    authentication
  }
});
Enter fullscreen mode Exit fullscreen mode

🧠 If you want to define an object who's keys have the same name as the variables passed-in as properties, you can simply pass the key name. This feature is called "Object Property Value Shorthand".

But sometimes names don't match:

return { code: topicCode, name: topics[topicCode].name };
Enter fullscreen mode Exit fullscreen mode

✅ To simplify object creation with shorthands, simply extract variables and give them names that match object keys:

const code = topicCode;
const name = topics[code].name;
return { code, name };
Enter fullscreen mode Exit fullscreen mode

💡 With property shorthands, you can remove unnecessary noise from object definition. In practice, it comes down to renaming and creating variables to make their names match the object keys.


Every day, I post coding tips on my Instagram. Let's stay connected! 🦄

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.