Vue.js Object Destructuring

May 3, 2019

In the Vuex documentation, there is a recommendation to use a Destructuring Assignment as a matter of code style. Destructuring Assignment -- specifically Object Destructuring -- is a shorthand when working with an object's properties in a function. This article presents a few examples of how the syntax might be used in the JavaScript code you write.

In the Actions section of the Vuex documentation, there is an action defined which accepts a destructured argument rather than the usual context parameter. This screenshot is from the referenced section.

Other examples in the Vuex docs define actions using a context parameter like this.

    
    actions: {
        increment (context) {
            context.commit('increment')
        }
    }
    

The Object Destructuring allows you to use the commit function without prepending the object name. "context" has a function "commit" that matches the name of the destructured parameter. JavaScript sets that parameter to the object field and the code in the method can refer to the member (the function "commit") without going through the object (as in "context.commit").

Here's an example outside of Vuex.

    
    let p = { firstName: "Joe", lastName: "Doe", email: "jdoe@example.com" };
    
    // #1 function signature has individual parameters
    var formatName = function(firstName, lastName) { 
        return firstName + " " + lastName;
    }    

    // caller references fields of p
    console.log( formatName( p.firstName, p.lastName ) );
    
    // #2 pass in object (suppose there are lots of fields)
    formatName = function(p) {
        return p.firstName + " " + p.lastName;
    }
    
    console.log( formatName(p) );
    
    // #3 object destructuring
    formatName = function( {firstName, lastName} ) {
        return firstName + " " + lastName;
    }
    
    // accepts object
    console.log( formatName(p) );
    
    // if you don't have an object handy (there's no "p"), make one up
    console.log( formatName( { firstName: "George", lastName: "Washington" } ) );    
    
    

All variations of formatName() work, but as the Vuex documentation states, you might see Object Destructuring used more in the field to produce less verbose code. In addition to the reduced typing, Object Destructuring also produces a method that is more explicit about what it wants from an object. For example, the #2 version of formatName takes in the whole p object. #3 highlights to the reader that only firstName and lastName will be needed. The reader doesn't have to scan anymore of the function to see if the email field will be used.

The previous examples required that the object ("p") field names match the function signature. To use different names in the function body, say abbreviations, use the following syntax.

    
    // using "fn" and "ln" in the body
    formatName = function( { firstName : fn, lastName : ln } ) {
        return fn + " " + ln ;
    }
    
    console.log( formatName( p ) );
    
    

While the typing gains of Object Destructuring may be modest, there's a potential gain in information hiding that may be achieved in handling larger objects. Object Destructuring lets your receiving functions pick out only what's needed and the code reader can be assured that the other fields are hidden and won't be accessed in the function body. Expect to see more of this syntax as it becomes more familiar to the JavaScript community.

---