Destructuring and Function Arguments

By  on  

The JavaScript language has benefitted from some really awesome new features over the past few years, including arrow functions, the spread operator, and default function argument values.  Even if your browser doesn't yet support proposed JavaScript API syntax additions, you can use a tool like Babel in your Node.js app to take advantage of them today.

One of my favorite new(ish) JavaScript features is object destructuring.  If you aren't familiar with JavaScript destructuring, it basically provides a shorter syntax for extracting an object key's value without the dot notation mess:

// A sample object
const myObject = { x: 1, y: 2 };

// Destructuring
const { x, y } = myObject;
// x is 1, y is 2

The basic syntax for destructuring is fairly simple but using destructuring with function arguments can be a bit more difficult when those argument values should have default values.  The following is a function with arguments having default values:

function myFunction(text = "", line = 0, truncate = 100) {

    // With default values, we can avoid a bunch of:
    text = text || "";
    line = line || 0;
    truncate = truncate || 100;
}

Regardless of language, if a function takes more than ~3 parameters, it's probably best to pass in an object name options or config that contains possible key/values; the equivalent would look like:

function myFunction(config) {

}

// Usage
myFunction({
    text: "Some value",
    line: 0,
    truncate: 100
})

What if you want to use destructuring in JavaScript function arguments though?  The following function signature would become:

function myFunction({ text, line, truncate }) {

}

If you want to define defaults in the function configuration, you'd use the following:

function myFunction({ 
  text = "", 
  line = 0, 
  truncate = 100 
} = {}) {

 // Even if the passed in object is missing a given key, the default is used!
}

Setting a default with = { } is important; with no default the following example would error:

TypeError: Cannot destructure property `key` of 'undefined' or 'null'

Destructuring is an awesome language feature but can lead to confusion and even errors.  Hopefully the basics provided in this guide can help you to navigate using JavaScript destructuring with functions!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    CSS Background Animations

    Background animations are an awesome touch when used correctly.  In the past, I used MooTools to animate a background position.  Luckily these days CSS animations are widely supported enough to rely on them to take over JavaScript-based animation tasks.  The following simple CSS snippet animates...

  • By
    Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

Discussion

  1. I think you’ll get the expected behavior if you provide individual defaults for each option as well as a fallback empty-object default for the options arg:

    function myFunction({ text = "", line = 0, truncate = 100 } = {}) {...}

    Otherwise if you pass eg an options object with just one option set, the other defaults won’t kick in

    • Excellent point! I’ve updated the post to fix my oversight. Thank you!

  2. How can I use this in class constructor? any views?

  3. Sagar

    Hi David,

    You’re article on destructor is simple but in real application we have to deal with nested object. I requested you can you write blog for nested objects.

    Thanks

  4. Nils Devine

    For anyone trying to do this with TypeScript, here’s the tricky bit (RequestParams is an interface defined elsewhere).

            {
                offset = 0,
                limit = 0,
                pageSize = 25,
                filter,
                sort,
            }: RequestParams = {} as RequestParams
    
  5. Damon

    I am curious.. if (using the code from the article) I want to allow a single parameter passed as a string to represent the string with the line/truncate params as their default.. is there a way to do that within the function params? or do i have to rebuild the params separately?

  6. Andrew

    I see benefits with deconstructing with typing (via TypeScript) or having default values, but using it with just the deconstruction can lead to a lot of confusion in calling that function ie, the object param must have the necessary keys, in fact any object with those keys could be passed into the function, and if a user doesn’t know the function signature it gets messy and hard to follow.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!