loading...

{Destructuring} = JavaScript

micahriggan profile image Micah Riggan ・2 min read

Destructuring is great for referencing pieces of objects or arrays. I find it to be very useful, and fun.

If you're writing code like

var thing = array[0];
var otherThing = array[1];

or

var name = thing.name;
var age = thing.age;
var height = thing.height;
var userId = thing.id;

Then you've come to the right place.

In this post I'll show some common uses of destructuring that simplify the above examples, and more.

Example 1: Destructuring Arrays

Here are some common array destructuring patterns :

  • Get the first element of an array
  • Get the first element, and the rest of the elements
  • Get the name property from the first element of the array
  • Get the name property and then assign it to a variable called firstName
  • Get the second element from the array

Outputs

{ name: 'Bob' }
[ { name: 'Sam' }, { name: 'Tom' } ]
Bob
Bob
{ name: 'Sam' }

Example 2: Destructuring Objects

Here are some common object destructuring patterns

  • Get the title property of an object
  • Get the title and pages property of an object
  • Get the height property off an object, and name it bookHeight
  • Get the ISBN property, which will default to '0000000'
  • Get the title property, and everything else collected into a variable named rest

Outputs

A book title
{ title: 'A book title', pages: 55 }
100
0000000
{ pages: 55, height: 100, weight: 2, price: 3.5 }

Example 3: Destructuring Parameters

In this example we've got some common destructuring patterns for function parameters

  • Capturing many arguments in an array
  • Getting the name property of an object
  • Getting the first element of an array, and the remainder of the array
  • Unpacking an array into a new array, with a new element at the end

Outputs

[ 'Hello', 'World' ]
Micah
[ 'Second', 'Third' ]
[ 'First', 'Second' ]

Conclusion

If you haven't been using destructuring, you should try it out. It's a great way to boil objects down into what you need. If you've got a favorite destructure that I didn't cover, put it down in the comments

Discussion

pic
Editor guide