Understanding Destructuring |ES6 Guide

Deepak Kumar
Sep 19 · 2 min read

Destructuring is a new feature introduced in ES6 to unpack values from arrays or properties from an object. It helps in improving the readability and performance of our code.

There are two types of destructuring :

  1. Array Destructuring
  2. Object Destructuring

Let’s understand through code, how destructuring works!

First, we will solve a problem using JavaScript ES5 syntax. Then later use destructuring the concept to compare both codes.

ES5 Implementation

// Example 1 - Object Destructuring

var user = {
name : 'Deepak',
username : 'dipakkr',
password : 12345
}

const name = user.name; // Deepak
const username = user.username; // dipakkr
const password = user.password // 12345

//Example 2 - Array Destructing

*c*onst fruits = ["apple", "mango", "banana", "grapes"];

const fruit1 = fruits[0];
const fruit2 = fruits[1];
const fruit3 = fruits[2];

ES6 Implementation using Destructuring Syntax

// Example 1 - Object Destructuring

var user = {
name : 'Deepak',
username : 'dipakkr',
password : 12345
}

const {name, username, password} = user;
console.log(name);
console.log(username);
console.log(password);

//Example 2 - Array Destructing

const fruits = ["apple", "mango", "banana", "grapes"];

const [fruit1, fruit2, fruit3] = fruits;

console.log(fruit1); // apple
console.log(fruit2); // mango
console.log(fruit3); // banana

ES6 has a lot of new features like Template literals, Default Arguments, Arrow Functions, Map, Reduce and Filter, Rest and Spread Operator, Object Literals, Classes and a lot more.

If you write code in a javascript and still not familiar with ES6 concepts. You should consider googling these topics.

Here I have written a comprehensive guide to learn ES6, please consider checking out.

Give some clap if you liked the article !!

For more content like this follow me on -> Twitter | Instagram | LinkedIn

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade