Destructuring and parameter handling in ECMAScript 6

When using JavaScript we make a lot of use of objects and tables. It also often happens that you need some information from an object or array in variables. We can obviously do it with ES5, but we will see in this chapter that ES6 offers us a very practical tool: the destructuration.

Destructuring  an object

You have an object and you want to extract its data. With ES5 you proceed as follows:

var person = { name: 'Durand', adress: 'Usa' };
var name =person.name;
var adress = person.adress;
console.log(name);  // Durand
console.log(adress);  // Usa

We have a simple code but it could quickly get heavier with a complex or loaded object.

With ES6 you can use this syntax:

let person = { name: 'Durand', adress: 'Usa' };
let {name, adress} = person;
console.log(name);  // Durand
console.log(adress);  // Usa

Alias

To avoid name conflicts you can assign aliases:

let exemple = { 
  person: { name: 'Durand', adress: 'Usa' },
  age: 20
};
let { person: { name: personName, adress: personAdress }, age: personAge } = exemple;
console.log(personName)  // Durand
console.log(personAdress)  // usa
console.log(personAge)  // 20

Default value

The behavior is exactly the same as when using the extraction of a property of an object with the classical syntax, the value is undefined:

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

let person = {name: 'Durand', adress: 'Usa'};
let { name,adress, age } = person;
console.log(name)  // Durand
console.log(adress)  // Usa
console.log(age)  // undefined

But you can provide a default value:

let person = {name: 'Durand',adress: 'Usa'};
let { name, adress, age = 20 } = person;
console.log(name)  // Durand
console.log(adress)  // usa
console.log(age)  // 20

Let's deconstruct a array

let persons = [ 'Pierre', 'Jacques', 'Paul' ];
let [one,two, three ] =persons;
console.log(one); // Pierre
console.log(two); // Jacques
console.log(three); // Paul

With a table we have to choose names for the variables since at the base we just have indexes.

But nothing prevents us from declaring the variables before:

let name = [ 'Pierre', 'Jony'];
let one = 'Paul';
let two = 'Martin';
[ one, two ] = name;
console.log(one); // Pierre
console.log(two); // Jony

We can recover a limited number of elements if we want:

let name = [ 'Pierre', 'Jony', 'Paul' ];
let [ one,two] = name;
console.log(one); // Pierre
console.log(two); // Jony