Object destructuring: storing data from JS objects in variables

Last updated: October 18, 2021.

We often want to access data that is stored in JavaScript objects. For example, the data we receive back from API requests is often in this format.

Destructuring provides a simple way to store that data in variables, ready to use in our code.

Basic destructuring

Imagine we are working with the following object:

const newsStory = {
   title: "Batman strikes again",
   trailingHeadline: "Gotham city again asks the question: hero or villan?",
   thumbnail: "http://www.somenewswebsite.com/story48849/thumbnail.jpeg",
   storyURL: "http://www.somenewswebsite.com/story48849",
   author: "Joe Bloggs",
}

If we want to extract data from it, we could store it in variables one after the other, like this:

const title = newsStory.title;
const trailingHeadline = newsStory.trailingHeadline;
const thumbnail= newsStory.thumbnail;
const author = newsStory.author;

This gets the job done but involves quite a bit of repetition and could lead to errors.

Instead we can use destructuring to do acheive the same result with a single line of code:

const { title, trailingHeadline, thumbnail, author } = newsStory;

Now, if we log any of the names of the keys we entered in the curly braces, we will find that these are now available as variable with the same name.

console.log(title); // "Batman strikes again"
console.log(trailingHeadline); // "Gotham city again asks the question: hero or villan?"
console.log(thumbnail); // "http://www.somenewswebsite.com/story48849/thumbnail.jpeg"
console.log(author); // "Joe Bloggs"

The syntax explained:

• First, we open curly braces after entering a variable keyword (where variable name would usually be specified);
• Inside the braces, we list the keys of the property values we would like to extract from the object, separated by a comma;
• Finally, we place the object on the right-hand side of the declaration. This ‘feeds it in’ to the destructuring process.

Setting new names for the variables

Don’t want to stick to the key names of the object?

These can be customised by including a full colon after a key name, followed by the desired variable name:

const { title: t, trailingHeadline: th, thumbnail: thmb, author: aut} = newsStory;

console.log(t); // "Batman strikes again"
console.log(th); // "Gotham city again asks the question: hero or villan?"
console.log(thmb); // "http://www.somenewswebsite.com/story48849/thumbnail.jpeg"
console.log(aut); // "Joe Bloggs"

Setting default values

Setting defaults is often a good idea.

Let’s say we come across a story that has no source. We know the source is “Gotham News” but information wasn’t available in the object. So if we try to extract source from the object, we will end up with a variable value of undefined. If we then print this to the DOM, it will print undefined. Not a good look!

We can avoid this kind of problem by setting a default value:

const { title: t, trailingHeadline: th, thumbnail: thmb, author: aut, source = "Gotham news"} = newsStory;

console.log(newsStory); // "Gotham news"

The default value is only used if there is no corresponding data in the object.

New variable names and default values

New names for variables and default values can be set using the following syntax: objectKey: variableName = defaultValue. For example:

const {author: aut = "Anonymous author", source: src = "Gotham news"} = newsStory;

console.log(aut); // "Joe Bloggs" (not "Anonymous author" because an entry exists)
console.log(src); // "Gotham news" (falls back on default value)

Destructuring nested objects

What if the object has nested properties we want to reach? For example:

const newsStory = {
   title: "Batman strikes again",
   trailingHeadline: "Gotham city again asks the question: hero or villan?",
   thumbnail: "http://www.somenewswebsite.com/story48849/thumbnail.jpeg",
   storyURL: "http://www.somenewswebsite.com/story48849",
   author: "Joe Bloggs",
   properties: {
      type: "story",
      premiumContent: true,
      storyId: 48849,
   }
}

We can easily adapt our destructuring declaration. All we would need to do to access the key-values pairs within the nested properties category is include dot notation when feeding in the object on the right-hand side:

const { premiumContent, storyId } = newsStory.properties;

console.log(premiumContent); // true
console.log(storyId); // 48849

---