DEV Community

Cover image for [JavaScript] 5 Interesting uses of JavaScript destructuring!

[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...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

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];
}
Enter fullscreen mode Exit fullscreen mode

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

let firstColor = colors[0] ?? "white"
Enter fullscreen mode Exit fullscreen mode

or using || on older javascript versions.


const [, ...fooNumbers] = numbers;
Enter fullscreen mode Exit fullscreen mode

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

const fooNumbers = numbers.slice(1)
Enter fullscreen mode Exit fullscreen mode

const { foo, ...small } = big;
Enter fullscreen mode Exit fullscreen mode

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)))
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

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

let firstColor = colors[0] ?? "white"
Enter fullscreen mode Exit fullscreen mode

or using || on older javascript versions.

You did make some good points here thanks :)

const fooNumbers = numbers.slice(1)
Enter fullscreen mode Exit fullscreen mode

I do also like the way you did this.

:) Thanks again

Collapse
 
grahamthedev profile image
GrahamTheDev

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

Great article and well explained! ❤️

Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

Nice point out but I do like giving people a preview

Collapse
 
grahamthedev profile image
GrahamTheDev • 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 😜🤣

Thread Thread
 
yumatsushima07 profile image
Yuma-Tsushima • Edited

ahahha

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

Thread Thread
 
bogdanbatsenko profile image
bogdanbatsenko

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

Collapse
 
austinbooth profile image
austinbooth

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

Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

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

eg

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

and if we just left it without increment then it would just be skyfall because it just logs the index.

I hope that helps.

Collapse
 
austinbooth profile image
austinbooth

Thanks for the explanation. So without the increment you wouldn’t be able to destructure further movies in the list, only the first one?

Thread Thread
 
yumatsushima07 profile image
Yuma-Tsushima

yes

Collapse
 
kathybowing profile image
Kathy Bowing

Wow, you have some good content on there.

Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

Thank you

Collapse
 
mistycoruscate profile image
mistycoruscate

Awesome, thank you :-)

Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

Thanks for reading it 🙂

Collapse
 
forkbikash profile image
Bikash Mishra

Excellent article!

Collapse
 
yumatsushima07 profile image
Yuma-Tsushima

Thank you