TIL #0: Destructuring in JS

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!