Destructing assignment explained in ES6

Destructing assignment explained in ES6

Introduction

In this article, I will be explaining an ES6 feature "Destructuring Assignment" in continuation of my ES6 series . Prior to ES6, we were used to assigning variables in arrays and objects, and extracting them using bracket, and dot notation to see the values. Example

  • An Array destructuring:
const food = ['beans', 'garri', 'amala'];

const x = food[0];
const y = food[1];
const z = food[2];

console.log(x, y, z);

// Prints beans, garri, amala.

The example above shows extracting values from an array.

  • An Object destructuring:
const person = {
  gender: 'male',
  height: '6ft',
  age: 42
};

const gender = person.gender;
const height = person.height;
const age = person.age;

console.log(gender, height, age);

// Prints: male 6ft 42

And this example shows extracting values from an object.

What is Destructuring?

In ES6, you can extract data from arrays and objects into distinct variables using destructing. Destructuring assignment is a JavaScript syntax that allows extraction of data from arrays or objects into distinct

Syntax

  • Destructuring values from an array
const food = ['beans', 'garri', 'amala'];

const [x, y, z] = food;

console.log(x, y, z);

// Prints: beans garri amala

In this example, the brackets [ ] represent the array being destructured and x, y, and z represent the variables where you want to store the values from the array. Notice how you don’t have to specify the indexes for where to extract the values from because the indexes are implied.

  • Example 2:
const[firstName, secondName] = ["Amara", "Nechey", "david", "kunle"];

console.log(firstName, secondName);

// prints `Amara Nechey` leaving the rest of the other values.
  • Example 3: In destructuring, we can skip elements in an array using the comma. A single comma can be used to skip a single array element.
const [firstName,,thirdName] = ["Amara", "Nechey", "david", "kunle"];

console.log(firstName);//"Amara"
console.log(thirdName);//"david"
  • Example 4:

To assign certain array elements to variables and the remainder of the array elements to only one variable, use the rest operator (...).

const [firstName,,...lastName] = ["Amara", "Nechey", "david", "kunle"];

console.log(firstName);//"Amara"
console.log(lastName);//"david", "kunle"
  • Example 5:

Destructuring assignment can also be used to swap values, as shown below

var names = ["Amara", "Nechey", "david", "kunle"];

console.log(firstName);//"Amara"
console.log(secondName);//"Nechey"

//After swapping
[firstName, secondName] = [secondName, firstName]

console.log(firstName);//"Nechey"
console.log(secondName);//"Amara"

Destructuring values from an object

const person = {
 gender: 'male',
  height: '6ft',
  age: 42
};

const {gender, height, age} = person;

console.log(gender, height, age);

// Prints: quartz rose 21.29

In this example, the curly braces {}, represent the object being destructured, and the variables gender, height, and age represent the variables where the object's properties should be stored. You'll notice that you don't have to provide the property from which the values are extracted. The value is automatically placed in the gender variable because person has a property called gender. Similarly, because person has a height property, the color value is automatically placed in the color variable. It's the same with becoming older.

Conclusion

Destructuring has made extracting variable values very straightforward and stressfree. Keep being intentional about your learning!

If you liked this article please follow me on Hashnode for my latest articles. I'm tweeting my journey on Twitter daily, this way to my LinkedIn . Hasnode

I share my knowledge on,

  • 🌐 Web Development
  • ✍️ Content Creation
  • 💼 Career Development
  • 🦾Personal Growth
  • BlockChain
  • And more!

Happy reading!