ES6 Destructuring

Today I’m interested in talking about an expression called Destructuring in javascript. It allows you to extract values from matrices or object properties and assign them to variables.

Photo by STIL on Unsplash

¿ Why should you use it ?

Let us imagine that we have the data of a hotel, the name, the location, the ratings of the hotel and also the price presented in an object like and we need to show that information in the form of function.

const hotel = {
  name: "O novo Hilton",
  location: "Galicia", 
  ratings: {
    habitacions: 6.4,
    limpeza: 8.3,
    almorzo: 9.5,
    calidade: 8.9
  },
  price: 40
};
function propiedadesHotel(hotel) {
  console.log(`O nome do hotel é ${hotel.name}`)
  console.log(`O lugar onde se atope é ${hotel.location}`)
  console.log(`Habitacions puntos ${hotel.ratings.habitacions}`);
  console.log(`Limpeza puntos ${hotel.ratings.limpeza}`);
  console.log(`Almorzo puntos ${hotel.ratings.almorzo}`);
  console.log(`Calidade puntos ${hotel.ratings.calidade}`);
  console.log(`O prezo é ${hotel.price}`)
}
propiedadesHotel(hotel);

To access the property cleaning for example, we have to make a tedious:

hotel.ratings.limpeza

This often leads to typographical error because we lack a letter or because we simply do not refer well to the property to which we want to access. That’s why we use Destructuring which was introduced as an improvement in ES6 and allows us to do this much more easily.

Object Destructuring

This type consists of making a bind of a variable in a property of the object.

const hotel = {
   name: "O novo Hilton",
   location: "Galicia",
   price: 40
};
const { name, location, price } = hotel;
console.log(name); // O novo Hilton
console.log(location); // Galicia
console.log(price); // 40

We can also use it as arguments for a function.

function propiedadesHotel({name,location,price}) {
   console.log(`O nome do hotel é ${hotel.name}`)
   console.log(`O lugar onde se atope é ${hotel.location}`)
   console.log(`O prezo é ${hotel.price}`)
}

Or have default values

const hotel = {
   name: "O novo Hilton",
   location: "Galicia",
};
const { name, location, rooms = 10 } = hotel;

Array Destructuring

This type consists of making a bind of a variable into a element of the array.

const hotel = [ "O novo Hilton", "Galicia", 40 ];
const [ name, location, price ] = hotel;
console.log(name); // O novo Hilton
console.log(location); // Galicia
console.log(price); // 40

You can also skip values of the array

const hotel = [ "O novo Hilton", "Galicia", 40 ];
const [ , location ,] = hotel;
console.log(location); // Galicia

Or have default values

const hotel = [ "O novo Hilton", "Galicia" ];
const [ name, location, rooms = 10 ] = hotel;

So, as you can see, destructuring is useful in many individually small cases.

Thank you very much and keep coding!!!

Yoel

I often share more code tips on my Instagram you can say hello to me on my Twitter or see how i code in my Github.