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
function getPeople() { | |
return [{name: "Bob"}, {name: "Sam"}, {name: "Tom"}]; | |
} | |
function test1() { | |
const [firstPerson] = getPeople(); | |
console.log(firstPerson); | |
} | |
function test2() { | |
const [firstPerson, ...rest] = getPeople(); | |
console.log(rest); | |
} | |
function test3() { | |
const [{name}] = getPeople(); | |
console.log(name); | |
} | |
function test4() { | |
const [{name: firstName}] = getPeople(); | |
console.log(firstName); | |
} | |
function test5() { | |
const [_, secondPerson] = getPeople(); | |
console.log(secondPerson); | |
} | |
test1(); | |
test2(); | |
test3(); | |
test4(); | |
test5(); |
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
const Book = { | |
title: 'A book title', | |
pages: 55, | |
height: 100, | |
weight: 2, | |
price: 3.50 | |
}; | |
function test1() { | |
const {title} = Book; | |
console.log(title); | |
} | |
function test2() { | |
const {title, pages} = Book; | |
console.log({title, pages}); | |
} | |
function test3() { | |
const {height: bookHeight} = Book; | |
console.log(bookHeight); | |
} | |
function test4() { | |
const {ISBN = '0000000'} = Book; | |
console.log(ISBN); | |
} | |
function test5() { | |
const {title, ...rest} = Book; | |
console.log(rest); | |
} | |
test1(); | |
test2(); | |
test3(); | |
test4(); | |
test5(); |
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
function log(...args) { | |
console.log(args); | |
} | |
function getName({name}) { | |
console.log(name); | |
} | |
function pop([first, ...rest]) { | |
return rest; | |
} | |
function push(array, elem) { | |
return [...array, elem]; | |
} | |
function test1() { | |
log("Hello", "World") | |
} | |
function test2() { | |
getName({name: 'Micah', points: 100}); | |
} | |
function test3() { | |
console.log(pop(["First", "Second", "Third"])); | |
} | |
function test4() { | |
console.log(push(["First"], "Second")); | |
} | |
test1(); | |
test2(); | |
test3(); | |
test4(); |
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
Top comments (0)