DEV Community 👩‍💻👨‍💻

Cover image for Unpacking arrays with destructuring
Coding Unicorn 🦄
Coding Unicorn 🦄

Posted on

Unpacking arrays with destructuring

❌ If you see code like this:

const identity = 'Julia Coding Unicorn';
const result = identity.split(' ');
const name = result[0];
const occupation = result[1];
const creature = result[2];
Enter fullscreen mode Exit fullscreen mode

✅ You can refactor it to:

const identity = 'Julia Coding Unicorn';
const [ name, occupation, creature ] = identity.split(' ');
Enter fullscreen mode Exit fullscreen mode

🦄 With destructuring, you can find Head and Tail:

const [head, ...tail] = [1, 2, 3, 4, 5]; // head = 1; tail = [2, 3, 4, 5]
Enter fullscreen mode Exit fullscreen mode

🦄 Await for promises:

const [user, account] = await Promise.all(
  [
    fetch('/user'),
    fetch('/account')
  ]
)
Enter fullscreen mode Exit fullscreen mode

🦄 Match regular expressions:

const regex = /(\d{4})-(\d{2})-(\d{2})/
const [ , year, month, day] = re.exec('𝟸0𝟸0-𝟷0-𝟷𝟻'); // [0] is the full match, skip it
Enter fullscreen mode Exit fullscreen mode

🦄 And even swap variables:

[x, y] = [y, x];
Enter fullscreen mode Exit fullscreen mode

✋ But destructuring is not always a good fit.

❌ Hipsters use it to capitalize strings:

function capitalize([ first, ...rest ]) {
  return [ first.toUpperCase(), ...rest ].join('');
}
Enter fullscreen mode Exit fullscreen mode

✅ But classic solutions never go out of style:

function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
Enter fullscreen mode Exit fullscreen mode

Destructuring can simplify your code or make it more complicated. New ES6 features are not meant to replace good classics. New != better. Sometimes typing an array index [0] is all you need.

👉 Follow me on Instagram for more coding stuff 🦄

Alt Text

Top comments (7)

Collapse
 
richardeschloss profile image
Richard Schloss

I thought the hipster way to capitalize was something like this:

const capitalize = (str) => str.replace(/[a-z]/, (val) => val ? val.toUpperCase() : val)

:)

Collapse
 
jspiderhand profile image
Justin Stout

Good Article! Saved for future reference

Collapse
 
vilnius2020 profile image
vilnius2020
Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Nicely explained! 💯

Collapse
 
waylonwalker profile image
Waylon Walker

Love the concise style and easy to follow examples

Collapse
 
vilnius2020 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
vilnius2020

it is so short because this is just copied and paste Instagram content...

I'm besides that they are just a rip off of a way better MDN article:
hacks.mozilla.org/2015/05/es6-in-d...

Collapse
 
vilnius2020 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
vilnius2020

Nice toth like cover image. Totally relevant for that article but yeah if you target the young male demographic and single unhappy men then you nailed that cover image!

If you copy and paste example at least leave a reference to the original...
If you forgot here you go: hacks.mozilla.org/2015/05/es6-in-d...
or just copy and pasting stackoverflow code:
stackoverflow.com/questions/102606... These hipsters on stackoverflow...

oh, wait your from IG where adding a 5 to an array means it is your work sorry for that.

🌚 Life is too short to browse without dark mode