The Destructuring Assignment

Here is a fun one to learn and is such an efficient thing to use when coding in JavaScript. It is actually one of the things I learned in bootcamp that I fully understood just reading the lesson before doing the lab assigned to it.

It is the Destructuting Assignment. This allows you to pick and choose elements out of a collection and assign variables to it without having to loop around and create a new declaration. It is super efficient because we can very clearly tell JavaScript what we want to pull out of the collection; whether it be an Object, Array, or String, plus the added aesthetic of it in our code because of its simplicity. All with the added bonus of less typing for our poor fingers.

Using the Destructuring Assignment to assign data to variables, you will want to put {curly braces} around the objects you would like to assign. For this one, the order inside the curly braces does not matter because we are looking for attributes by their key names.

const mooMoo = {
name: 'Alfred',
type: 'Hairy Cow',
color: 'tan and white',
};

const {name, color} = mooMoo;

With the given data structure above, the curly braces tells Javascript that we will be pulling variables from an Object. We are telling it to pull the keys: 'name' and 'color.' If it exists in 'mooMoo,' then to return the variable associated with that key. Naturally, we will get 'Alfred' for the name key and 'tan and white' for the color key. Heads up, this works for nested Objects as well. You would use method chaining to specify the path you want JavaScript to go down.

Now, when using Destructuring Assignment with Arrays, you will want to wrap the variables you are declaring in [brackets]. With doing this, the order does matter, so be sure you put the order you are declaring properly.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [small, large, medium] = farmAnimals;
console.log(large, small, medium); // LOG: cow chicken pig

The console assigns small to the first element, the large element to the second element, and medium to the third element. The fun part is you can pick parts of the Array we want to assign by using a comma.

const farmAnimals = ['chicken', 'cow', 'pig'];
const [, large, medium] = farmAnimals;
console.log(, small, medium); // LOG: chicken pig

When we use a comma, we are telling JavaScript to skip the first element and start with the second element. You can also move the comma to different spots to skip that element.

And finally, when using Destructuring Assignment with Strings, we will be using the .split() method to turn the string into an Array. You will also be using [brackets] to wrap the variables you'd like to assign.

const cowName = 'Prince Alfred Kingston III';
const [title, firstName] = cowName.split(' ');
console.log(title, firstName); // LOG Prince Alfred

Now a very important part of using split() in a Destructuring Assignment is the 'single quotes' in the (parenthesis). You only make that mistake once otherwise it drives you mad trying to figure out what is wrong with your code.

Doesn't the Destructuring Assignment sound so fun? In no time you'll learn just how to use it and be a pro. And trust me, it will save you so much time and typing in your code.

Happy Coding (: