Javascript: Destructure Objects and Arrays for Cleaner Code

Javascript: Destructure Objects and Arrays for Cleaner Code:

What is destructuring and why should we care?

It will become clearer once you see some examples, but the beauty of destructuring is that it allows us to pull apart and pick out elements in an array or properties in an object for easier access in our code. Not only do we have the ability to quickly pull out distinct parts of arrays and objects, but it results in much simpler / easy to read code (most of the time).

The Big Picture

Whether we destructure an array or an object, the syntax is nearly identical with some small caveats. The general idea is that to the left of our equal sign, we’ll have brackets (for arrays) or curly braces (for objects), and to the right of our equal sign, we’ll have the array or object that we are destructuring. Again, this will become clearer with the examples below.

Destructuring Arrays

Before destructuring, if we wanted to grab specific elements of an array, we would need to do something like this:

let fruits = ["🍎","🍊","🍌"]
let apple = fruits[0]
let orange = fruits[1]
let banana = fruits[2]

With destructuring, we’re now able to do the following:

let fruits = ["🍎","🍊","🍌"]
let [apple, orange, banana] = fruits

console.log(apple) // 🍎
console.log(orange) // 🍊
console.log(banana) // 🍌

When destructuring arrays, if you decide you don’t want to destructure a certain element, you still need to account for it by simply using back to back commas, to essentially skip over that element.

Meaning, if for whatever reason you did not want to destructure the second element in this fruits array you would need to do the following:

let fruits = ["🍎","🍊","🍌"]
let [apple,,banana] = fruits

console.log(apple) // 🍎
console.log(banana) // 🍌

We can also make use of theΒ rest parameterΒ when destructuring arrays.

let fruits = ["🍎","🍊","🍌"]
let [apple, ...otherFruits] = fruits

console.log(apple) // 🍎
console.log(otherFruits) // ["🍊", "🍌"]

Destructuring Objects

The real power of destructuring comes into play when using it with objects.

Before destructuring, if we wanted to grab specific properties of an object, we would need to do something like this:

let person = {
    name: "Tony",
    age: 55,
    occupation: "electrician"
}

let name = person.name
let age = person.age
let occupation = person.occupation

With destructuring, we’re now able to do the following:

let person = {
    name: "Tony",
    age: 55,
    occupation: "electrician"
}

let {name, age, occupation} = person

console.log(name) // Tony
console.log(age) // 55
console.log(occupation) // electrician

We can even destructure nested objects, like so:

let person = {
    name: "Tony",
    age: 55,
    occupation: "electrician",
    family: {
        wife: "Maria",
        son: "Joe",
        daughter: "Amy"
    }
}

let {name, age, occupation, family: {wife}} = person

console.log(name) // Tony
console.log(age) // 55
console.log(occupation) // electrician
console.log(wife) // Maria

We can even destructure objects within function parameters:

let person = {
    name: "Tony",
    age: 55,
    occupation: "electrician",
}

function describeThePerson({name, age, occupation}){
    console.log(`${name} is ${age} and is a/an ${occupation}.`)
}

describeThePerson(person) // Tony is 55 and is a/an electrician.

And just like that, you’ve cleaned up your code quite a bit and made it that much easier to read. Just remember when destructuring:

  • Arrays
    • use brackets [ ]
    • if you don’t plan on using a certain element, skip over it by not including a variable name (thus resulting in back to back commas)
  • Objects
    • use curly braces { }
    • you can freely pick and choose which properties you want to use
    • for nested objects
      • type out the key, add a colon, then follow it with another pair of curly braces { }, and finally mention the nested key you want inside of the curly braces

This was a simple breakdown of destructuring and some of the most common ways to use it.

from Tumblr https://generouspiratequeen.tumblr.com/post/636842313316974592

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s