ES6 Object Property Shorthand- Make Those Objects Look Cleaner

This week, I’ve been digging into a lot more ES6 tips and tricks to help clean up some of my code. As I spoke about in the second part of my “How I learned :code, through: :music_teaching” series, one of the most important things you can do in your code is to go back and refactor things to look simpler and easier to read.

In ES6 we are introduced to a new way to create and store objects called Object Property Shorthand. To understand how this works, let’s recall what initializing an object in ES5 looks like:

let name = "Kevin"
let job = "Dev"
let address = "You Wish 😏"
const developers = {
name: name,
job: job,
address: address
}

Here we are storing our variables into our developers object. If we were to log this out we would see the following:

{name: "Kevin", job: "Dev", address: "You Wish 😏"}

The ES6 version takes away some of the redundancy of how we structure our object, keeping it nice and DRY. Take a look:

let name = "Kevin"
let job = "Dev"
let address = "You Wish 😏"
const developers = {
name,
job,
address
}

Because the keys of our objects share a name with the variables we’re storing in them, we can simply write their names during the construction of the object, instead of having to repeat ourselves.

Real World Example

A place where I find object property shorthand to be extremely useful is when you’re making a fetch request. In particular, when you’re logging a user in and out. Let’s take a look at a function I wrote that utilizes object property shorthand to smooth out how my fetch can look:

const [username, setUsername] = useState("")
const [password, setPassword] = useState("")
//the above variables are React Hooks, their reason for being here //will be explained below! for now, don't worry about them. 
-------------------------------------------------------------------
const handleLoginSubmit = useCallback((logUser) => {logUser.preventDefault()
const body = JSON.stringify({
username,
password
})
fetch(`https://myapp.com/login`, {
   method: "POST",
   headers: {
     "content-type": "application/json"
   },
   body
})
.then(r => r.json())
.then(handleResponse)
}, [username, password, handleResponse])

At the very top of this example, I showed you how my variables were being initialized. Here, we’re using React Hooks to create our username and password variables. If you haven’t checked out React Hooks yet, get familiar with some use cases with one of my previous blogs.

When we set our variable for body, we are doing what we would typically do there, use JSON.stringify({}) and get our promise from our backend. However, because we know that the variables we want to use share the same names as our keys, we can simply write username and password.

I hope this little demo on Object Property Shorthand gives you the information you need to start applying this simple topic into your code! If you find out and other fun/clean cases to use this, leave me a comment!