DEV Community

Cover image for Property shorthands

Property shorthands

codingunicorn profile image Coding Unicorn 🦄 ・1 min read

Property shorthands

❌ If you see code like this:

new Vuex.Store({
  modules: {
    creation: creation,
    fetching: fetching,
    authentication: authentication

✅ You can always refactor it to:

new Vuex.Store({
  modules: {

🧠 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 };

✅ 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 };

💡 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! 🦄

Discussion (0)

Editor guide