Javascript Array and Object destructuring with ES6

Yet another destructuring post.. It’s a function I always forget that exists in javascript, so I hope this post can show you it’s power and beauty, so you’ll remember! The javascript destructuring assignment makes it possible to extract data from arrays and objects into distinct variables. Without declaring them first! A ma zing!!

Javascript simple destructuring examples

We can destructure both javascript Objects or Arrays. I’ll start simple with a few examples below to get the hang of it. But when we’re using complex JSON data-structures, destructuring can really help us out. (See complexer JSON example at the bottom)

Javascript Array Destructuring

const testArray = [1, 2, 3, 4, 5];
const a = testArray;
const [x, y, z] = testArray;
console.log(a);      // a => (5) [1, 2, 3, 4, 5]
console.log(x, z);   // x => 1, z => 3

Javascript Object Destructuring

const testObject = {
  firstname: "Bob",
  lastname: "Weichler"
};
const a = testObject;
const { firstname } = testObject;
console.log(a);           
// a => {firstname: "Bob", lastname: "Weichler"}
console.log(firstname);
// firstname => Bob

As you can see, the first item (a) just returns the initial value. When we use destructuring, we can get the direct value of the preferred items, without declaring them first. Which is awesome, and makes it possible to do wicked stuff way faster!

Notice that destructuring an array uses let [x] = value;
while an object uses let {name} = value;

Another thing we can do, is destructure the variables directly when declaring them. Wait… What?

const [val1, val2] = ["JS", "Destructuring", "101"];
console.log(val1);  // val1 => JS
console.log(val2);  // val2 => Destructuring
const {val1, val2} = {val1: "JS", val2: "Destructuring" };
console.log(val1);  // val1 => JS
console.log(val2);  // val2 => Destructuring

Notice: For an array, the variable names doesn’t matter, as it takes the position from the array element. But for objects it does! we can’t do the following const {val1} = {test: “whoow”} because it will return undefined.

Deeper level destructuring (nested items)

We can also destructure immediately on deeper nested elements. Let’s start with a 1-level nested array or object:

const testArray = [
    ["Bob Weichler", "Webdeveloper"],
    ["John Doe", "Webdesigner"]
];
const [ firstUser ] = testArray; 
// firstUser => (2) ["Bob Weichler", "Webdeveloper"]
const dataObj = {
    users: {
        name: 'Bob'
    }
}
const { users: {name} } = dataObj;
//name => Bob
  

You still with me? What if we want to go even deeper? For an Array, we need to start mapping if we want to go deepter. See an example further down this post. For objects we can see where we’ll end:

const dataObj2 = {
    users: {
        name: {
            first: 'Bob',
            last: 'Weichler'
        }
    }
}
const { users: { name } } = dataObj2;
const { first } = name;
// first => Bob

I couldn’t manage to destructure directly 3 levels deep 🙁 Let me know if you found a way! (without looping)

Spreading, rest or skipping some values

Now that we’re already destructuring like a maniac, why not throw some extra’s in it like a spread or a skip?

// -- REST AT ONCE ----------
const dataObj = {
    users: {
        name: 'Bob Weichler',
        job: 'Webdeveloper',
        country: 'Belgium',
        age: 25
    },
}
const { users: { name, ...rest } } = dataObj;
// name => Bob Weichler
// rest => {job: "Webdeveloper", country: "Belgium", age: 25}
// -- SKIPPING ITEMS ----------
const countries = ['Belgium', 'France', 'Germany', 'Singapore', 'Mexico'];
const [ home, , skipFrance, ...otherCountries ] = countries;
// skipFrance => Germany
// otherCountries => (2) ["Singapore", "Mexico"]

Mixed destructuring and more complex Structures

This is all fun and games, but not really time winning in my opinion. However, I recently started experimenting with the WordPress REST API, and oh boy.. this one kind of forced me into using javascript destructuring. We all know WordPress abuses the posts and postmeta tables, and then combined with ACF.. do we even want to see the returned JSON? If we don’t specify our call a little, it literally returns everything.

If we filter the json result a little, we can assume the following data to work with:

const research = {
    id: 445,
    data: "2019-05-13T00:00:00",
    otherContent: "...",
    acf: {
        relatedStaff: [{
            staffLevel: 'Supervisors',
            users: [{
                name: { first: 'Bob', last: 'Weichler' }
            },{
                name: { first: 'Jane', last: 'Doe' }
            }]
        },{
            staffLevel: 'Reseachers',
            users: [{
                name: { first: 'John', last: 'Doe' }
            }]
        }]
    },
    ...
}

In my example, I wanted to return all related users. No matter to what research group they belong to. This is where the fun started, and is also the reason why I wrote this post..

Return all related users:

getRelatedUsers = ( result = [] ) => {
    const { acf: { relatedStaff } } = research;
    relatedStaff.map(({ users }) => {
        users.map(({ name: { first, last } }) => {
            result.push(`${first} ${last}`);
        });
    });
    return result;
}
/* output: getRelatedUsers() => (3) ["Bob Weichler", "Jane Doe", "John Doe"] */

Woah, relax! A little bit more info pleasee.

1 – First we create a function getRelatedUsers() so we can use this function everywhere in our app

2 – Declare a result parameter inside our function parameters, to win time

3 – Destructure our ACF relatedStaff field from our json object, notice that relatedStaff is an array in our json object

4 – Because this is an array, we need to map() over it, to retrieve the data from every row

5 – While mapping, we directly pull the users object with destructuring. Users will also be an array, we can map() over again

6 – While mapping over the users, we declare our first and last name, inside the map parameters

7 – Store the names for each row inside our declared result array

Javascript Destructuring Challenge!

Hope this post gave you more insights on how destructuring works, and when it can become handy in our applications.

Please feel free to contribute to my getRelatedUsers() function in the comments! If we can make it compacter, let’s do so!