Today I learned (TIL) is a way of sharing with the community things that I have recently learned which I feel others may benefit from. These may be obvious to those who already know, all the way to the strange and obscure. At the end of the day we are all learning, so we may as well help each other!
What is destructuring?
Destructuring was added as part of ES6, as a way of extracting properties from JavaScript objects and arrays into variables. It makes working with large objects much simpler and I wish I had discovered it earlier!
Arrays
The type of destructuring I have seen most frequently in the wild is with arrays.
const colors = ['Red', 'Green', 'Blue', 'Yellow', 'Purple', 'Pink', 'Cyan']
const [r,g,b, ...otherColors] = colors
console.log(r) // 'Red'
console.log(g) // 'Green'
console.log(b) // 'Blue'
console.log(otherColors) // ['Yellow', 'Purple', 'Pink', 'Cyan]
By assigning an array to an array of variables, we can easily assign individual variables to each value. Use of the spread operator allows us to create a new array of all the remaining elements.
Objects
The standard way to access object properties is with dot notation.
const user = {
name: 'Bob',
age: 32,
city: {
name: 'London'
}
}
const name = user.name
const age = user.age
const locationName = user.city.name
console.log(name) // Bob
console.log(age) // 32
console.log(locationName) // London
This is fine for simple objects, but can become a pain to type if we are trying to access many properties. Enter destructuring.
JS Result
EDIT ON
const user = { // Structure taken from Dev.to users API endpoint
"type_of":"user",
"id":12345678,
"username":"Bob_the_nameless",
"name":"Bob",
"summary":"An example user",
"twitter_username":null,
"github_username":"UndefinedUser",
"website_url":"www.example.com",
"location":"London",
"joined_at":"Jan 11, 2018",
"profile_image":"urlToSomeImage.jpg"
}
// Too many parameters to want to write by hand to conveniently use
// Use destructuring
const {username, name, joined_at} = user
console.log(username) // 'Bob_the_nameles'
console.log(name) // 'Bob'
console.log(joined_at) // 'Jan 11, 2018'
By naming our variables the same as the object we can easily extract them. But what about nested objects will we still need dot notation? Yes but it’s way better.
const user = {
"type_of":"user",
"id":12345678,
"name":"Bob",
"summary":"An example user",
"social_media": {
"usernames": {
"twitter_username":null,
"github_username":"UndefinedUser",
"devto_username":"Bob_the_nameless"
}
},
"website_url":"www.example.com",
"location":"London",
"joined_at":"Jan 11, 2018",
"profile_image":"urlToSomeImage.jpg"
}
const {twitter_username, github_username, devto_username} = user.social_media.usernames
console.log(twitter_username) // null
console.log(github_username) // 'UndefinedUser'
console.log(devto_username) // 'Bob_the_nameless'
As you can see, we can save ourselves retyping the whole path for every variable.
I haven't covered all the use cases of this, only the few I find to be the most useful. A complete list of examples can be found on MDN. I hope this helps some of you save some time down the line!
Top comments (0)