Destructuring in ES6

Destructuring in ES6 is about pulling out certain properties from objects into other variables. It can also be used to extract values from arrays into variables.

Here’s an example object:

let customer = {
  name: 'Great Customer Inc',
  address: 'Los Angeles'
}

Here’s how we can pull out the name and address properties from the customer with destructuring:

let {name, address} = customer

We can then use “name” and “address” like normal variables afterwards:

console.log(name)
console.log(address)

The properties to be extracted from the customer are enclosed within curly braces followed by the equal sign and then the variable from which we want to pull those properties. The variable names within the curly braces must be the same as properties in the JSON object. The above is a short-hand for the following extended version:

let name = customer.name
let address = customer.address

Destructuring in methods

We can use the same technique in method signatures. Here’s an example:

let printMe = function({name, address}) {
  console.log(`${name}, ${address}`)
}

printMe(customer)

Note how the name and address properties are pull out from the customer object we’ve passed in. The order of the properties in the JSON object doesn’t matter, the following is equally good:

printMe({address: 'Los Angeles', name: 'Great Customer Inc'})

…so it’s fine to have “address” first and “name” second even if the order is different in the method signature. The property names will be matched up.

Destructured input parameters can be mixed with “normal” ones:

let printMe = function({name, address}, greeting) {
  console.log(`${name}, ${address}: ${greeting}`)
}

printMe({address: 'Los Angeles', name: 'Great Customer Inc'}, 'Good morning')

We can even have multiple destructured parameters:

let printMe = function({name, address}, {prodName, qty}, greeting) {
  console.log(`${name}, ${address} is buying ${qty} ${prodName}s: ${greeting}`)
}

printMe({address: 'Los Angeles', name: 'Great Customer Inc'}, {prodName: 'chair', qty: 123}, 'Good morning')

In arrays

Array destructuring uses square brackets instead of curly braces. Here’s an example:

let languages = ['C#', 'Java', 'JavaScript', 'F#', 'Ruby']
let [firstChoice] = languages

firstChoice will get the value C#. Similarly in…

let [firstChoice, secondChoice] = languages

…secondChoice will be Java. The order in the array destructuring defines which variable will get which element from the array.

We can pull out all remaining languages into a separate array using the … spread operator:

let [firstChoice, secondChoice, ...others] = languages

“others” will be an array:

["JavaScript","F#","Ruby"]

We can transform an array of arrays into objects. Say that first and last names are arranged into arrays like here:

let names = [
  ['Mary', 'Williams'], ['John', 'Cooper'], ['Jane', 'Collins'], ['George', 'Noble']
]

We can quickly transform this array into an array of objects:

let fullNames = names.map(([firstName, lastName]) => {
  return {firstName, lastName}
})

Here’s the array with full names:

[{"firstName":"Mary","lastName":"Williams"},{"firstName":"John","lastName":"Cooper"},{"firstName":"Jane","lastName":"Collins"},{"firstName":"George","lastName":"Noble"}]

Mixing array and object destructuring

We can mix the two styles to dig into an array of objects. Here’s the enhanced list of programming languages:

let languages = [{'name': 'C#', 'style': 'OOP', 'typed': true}, 
                 {'name': 'Java', 'style': 'OOP', 'typed': true}, 
                 {'name': 'JavaScript', 'style': 'script', 'typed': false}, 
                 {'name': 'F#', 'style': 'functional', 'typed': true}, 
                 {'name': 'Ruby', 'style': 'OOP', 'typed': false}]

Suppose that we want to read out the name of the first language object in the array. Here’s how to do that:

let [{name}] = languages

So we first dig into the array, get its first element and extract its “name” property.

Next we reverse the order and take an object which has an array:

let functionalLanguages = {
  'purpose': 'computations',
  'examples': ['Scala', 'F#', 'Haskell', 'Erlang']
}

We want to get the first element from the examples array. Here’s how to do it:

let {examples: [firstExample]} = functionalLanguages

Now we first dig into the object, take its examples array and extract the first element out of it. firstExample will get the value Scala.

View all posts related to JavaScript here.

Advertisements

About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

ultimatemindsettoday

A great WordPress.com site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

A Good Blog is Hard to Find

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

Bite-size insight on Cyber Security for the not too technical.

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: