Attach to Process

As part of learning React, I'm also trying to shore up my JavaScript skills. Thankfully, the React: Getting Started pluralsight course also offers a modern JavaScript crash course. These are my notes from when I tried to understand JavaScript's Destructuring feature.

Note that you can run the sample code on a JavaScript tester website, like say the JSComplete Playground.

So, the JavaScript destructuring assignment syntax allows you to get just the properties you want from an object. It seems to be like a shortcut for getting to the properties of an object. For example:

const customerInfo = {
	firstName: "Dino",
	lastName: "Bansigan",
	emailAddress: "myemail@email.com",
	website: "dinobansigan.com"
}

const getFullName = ({firstName, lastName}) => {
	return firstName + " " + lastName;
}

console.log(getFullName(customerInfo));

In the code above, you can see how I have created a customerInfo object. Then next is a function called getFullName that takes a firstName and lastName parameter. These parameters are destructured from the customerInfo object.

If you look at the last bit of code where I call console.log, you can see that instead of passing in parameters customerInfo.firstName and customerInfo.lastName, all I had to do, was pass in the customerInfo object. JavaScript through the destructuring feature is smart enough to know to use the firstName and lastName properties from the customerInfo object.

---

This destructuring feature can come in handy with arrays too. Together with the rest and spread operators, you can pick specific values from an array, split arrays and spread items to build a new array. For example:

const fellowShipOftheRing = ["Frodo", "Gandalf", "Sam", "Aragorn", "Legolas", "Pippin", "Merry", "Boromir"];

let [ringBearer, ...restOfFellowShip] = fellowShipOftheRing;

console.log("Ringbearer: " + ringBearer);
console.log("Rest of the Fellowship: " + restOfFellowShip);

const copyOfTheRestOfFellowship = [...restOfFellowShip];
restOfFellowShip = null;
console.log("Rest of the Fellowship: " + restOfFellowShip);
console.log("Copy of the Rest of the Fellowship: " + copyOfTheRestOfFellowship);

If you look at the code above, you can see an array called the fellowShipOftheRing. It has all nine members of the Fellowship. Then on the next line, you can see how you could easily pick out the first value from the fellowShipOftheRing array and assign it to the ringBearer variable. Then the rest of contents of the array are assigned to the restOfFellowShip variable. That's pretty cool!

Then the next set of code shows how to make a copy of the restOfFellowShip array using the spread operator. The easiest way I can visualize it, is you basically spread the contents of the restOfFellowShip array inside the brackets to create a new array for the copyOfTheRestOfFellowship variable. And to prove that it is a real copy of the array and not just another pointer to the original array, I set the restOfFellowShip array to a value of null before calling console.log.

That's as far as my notes went. If you found any mistakes in this post, please educate me by leaving a comment below or getting in touch with me. Thanks!

Tags: #JavaScript

Discuss... or leave a comment below.