Javascript Destructuring Assignment

While destructuring assignment is a new concept in Javascript land it is a tried an true technique in many other programming languages, just by different names. For Example:

• Ruby: parallel assigning
• PHP: listing
• Python: unpacking

I will only cover a few basic cases for Destructuring assignment here but for more information on this particular topic checkout chapter 10 of exploring JS and this great slide deck.

Example 1, regular old object destructuring:

Given a user object:

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m'
};

The typical way to access and use the properties of this object would be:

const name = user.name;
const age = user.age;
const shirtSize = user.shirtSize;

This is fine and all but seems a little verbose and ugly to me. Let us try to destructure this object the ES6 way!

const {
    name,
    age,
    shirtSize
} = user;

And there we have it, we now have 3 variable available in this scope user, age, and shirtSize all derived from the user object.

Example 2, renaming:

Okay so using the same object as the previous example,

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m'
};

Lets say we want to use these variables but with a more descriptive name:

const {
    name: userName,
    age: theAge,
    shirtSize: size
} = user;

And just like that we have 3 variables in our scope userName, theAge, and size. Just to be clear we can now use these vars like regular declarations:

if (theAge < 30 && size === 's/m') {
    console.log("I am hit.");
}

Example 3, accessing nested properties:

Lets say that our example object gets a little bit more complicated,

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m',
    state: {
        isLoggedIn: true,
        profile: {
            theme: 'dark',
            textSize: '10px'
        }
    }
};

but we have gotten hooked on object destructuring and want to keep using it. We can do that!

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme,
            textSize
        }
    }
} = user;
console.log(userTheme) // prints 'dark'
console.log(textSize) // prints '10px'

The above statement creates 5 new variables name, userAge, userTheme, and textSize. Pretty neat huh? What about null/undefined safety?

Example 4, using defaults in destructuring:

So what if we are not sure if the user profile object from our example is going to be clean? Like this:

const user = {
    name: 'Pauly-D',
    age: 25,
    shirtSize: 's/m',
    state: {
        isLoggedIn: true,
        profile: undefined
    }
};

We can just do this to protect us with no errors:

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme,
            textSize
        } = {} // psst the magic is happening here
    }
} = user;
console.log(userTheme); //undefined
console.log(textSize); //undefined

Default parameter notation can be used at any step in the destructuring:

const {
    name,
    age: userAge,
    size: shirtSize,
    state: {
        profile: {
            theme: userTheme = 'Mikey',
            textSize = '15px'
        } = {}
    }
} = user;
console.log(userTheme); //'Mikey'
console.log(textSize); //'15px'

Where else can we use this notation?

Example 5, destructuring function parameters:

The destructuring syntax is handy and all but can you use it anywhere else? Sure! You can use destructuring syntax pretty much anywhere you declare variables. Here you can see it being used in a function with an object parameter:

const user = {
    name: 'Pauly-D',
    age: 25
};
const validateUser = ({ name, age: userAge, shirtSize = 's' }) => {
    console.log('name', name);
    console.log('userAge', userAge);
    console.log('shirtSize', shirtSize);
};
validateUser(user);
// logs
// name: 'Pauly-D'
// age: 25
// shirtSize: 's'