DEV Community

[JavaScript] 5 Interesting uses of JavaScript destructuring!

Yuma-Tsushima on July 01, 2021

Looking at my regular JavaScript code, I see that destructuring assignments are everywhere. Reading object properties and accessing array items ar...

Read full post

𒎏Wii 🏳️‍⚧️ • Jul 2 '21

The usual way to swap 2 variables requires an additional temporary variable.

Yet destructuring requires a temporary array, which my intuition tells me, is harder (not impossible, mind you) to optimise and has to be garbage-collected.

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

There's a much nicer way to do this without destructuring:

let firstColor = colors[0] ?? "white"

or using || on older javascript versions.

const [, ...fooNumbers] = numbers;

Again, there's a much more readable version of this without destructuring:

const fooNumbers = numbers.slice(1)

const { foo, ...small } = big;

That's actually a really good example where destructuring is the most readable way of doing it. That being said, one could always just write a function to do a similar thing:

drop = (object, drop) => Object.fromEntries(Object.entries(object).filter(([key]) => drop.indexOf(key)))

Is it pretty? no, not really. But at least it's possible :D

Personally, I really like using destructuring for function arguments. You might have already spotted it in my drop() example above: instead of indexing the array in the function body, I let the function declaration take care of that, and then just work with the variables I actually want in the body.

Getting many values out of a nested data structure is also really nice this way:

let {name: {first: firstname, last: lastname}, address: {street}} = user

Yuma-Tsushima • Jul 2 '21

To be honest I do use || for destructuring also.

let firstColor = colors[0] ?? "white"

or using || on older javascript versions.

You did make some good points here thanks :)

const fooNumbers = numbers.slice(1)

I do also like the way you did this.

:) Thanks again

GrahamTheDev • Jul 1 '21

Quick heads up - it looks like the paragraph at the end of section 2 belongs in section 3.

Great article and well explained! ❤️

Yuma-Tsushima • Jul 2 '21

Nice point out but I do like giving people a preview

GrahamTheDev • Jul 2 '21 • Edited

Note the comma on the left side of the destructuring: it means that the first element is ignored. secondColor is assigned with the element at index 1 from the colors array.

That doesn’t lead in to the next section it is referencing a code snippet that is either missing (which after rereading, looks to be the case) or further down and part of section 3 but you changed the example. Either way it is definitely not right!

Or if you were being sarcastic and I missed it then feel free to r/whoosh me 😜🤣

Yuma-Tsushima • Jul 2 '21 • Edited

ahahha

yeah I was being sarcastic , it was more of a trick

bogdanbatsenko • Jul 3 '21

It was a trick to provoke thinking over again and getting to the bottom of the topic

austinbooth • Jul 3 '21

Nice article. I have a question about the movies iterable example. Why are you using the increment operator when accessing the value?

Yuma-Tsushima • Jul 3 '21

So post increment was used in the movies example .
So it adds 1 to the operator.
So if you do index++ it will log the firstvalue.
If you do ++index it will log the secondvalue

const movies = {
  list: [
    { title: 'Skyfall' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // so it logs skyfall

but once we use the pre increment it will log interstellar

const movies = {
  list: [
    { title: 'Skyfall' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[++index].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // now logs interstellar