JavaScript Destructuring Assignment

Object and Array are the two frequently used data structures of JavaScript.

With the help of the objects, you can create an entity storing data items by key. With the help of the arrays, you can assemble data items into an ordered collection.

In case of passing those to a function, it might need an object and array not as a whole but some individual pieces.

The literal expressions of the object and the array allow creating ad hoc packages. Here is the syntax:

const x = [1, 2, 3, 4, 5];

The destructuring assignment is a unique syntax that helps “to unpack” objects or arrays into a group of variables. Destructuring can also operate efficiently with complex functions, default values, and more.

The destructuring assignment uses the following syntax:

Javascript arrays destructuring

const x = [1, 2, 3, 4, 5]; const [y, z] = x; console.log(y); // 1 console.log(z); // 2

Run > Reset

You can find similar features in other languages too. For example, in Python or Perl.

Now, let’s have a look at the example of the array destructure into variables:

Javascript arrays destructuring

// we have an array with the name and surname let arr = ["John", "Doe"]; // destructuring assignment // sets firstname = arr[0] // and surname = arr[1] let [firstname, surname] = arr; console.log(firstname); // John console.log(surname); // Doe

Run > Reset

As a result, it is possible to work with variables instead of array members.

will work even greater if you combine it with split or other methods for array-returning:

let [firstName, surname] = "John Doe".split(' ');

Note that destructuring is not the same as “destructive”.

We call it destructuring as it “destructurizes” through the method of copying items into variables.

Here is a shorter way to write:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

Take into consideration that you can throw away unwanted elements by using an extra comma, like this:

Javascript arrays destructuring

// second element is not needed let [name, age , profession] = ["David", "23", "programmer"]; console.log(profession); // programmer

Run > Reset

It can work with any iterable on the right-side:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

Moreover, you can use any assignables at the left side.

For example, the property of an object:

Javascript arrays destructuring

let user = {}; [user.name, user.surname] = "John Doe".split(' '); console.log(user.name); // John

Run > Reset

Another useful thing is that it is possible to use the Object.entries(obj) method with destructuring for looping over keys-and-values of an object.

Here is an example:

Javascript object entries method with destructuring

let user = { name: "Maria", age: 25 }; // loop over keys-and-values for (let [key, value] of Object.entries(user)) { console.log(`${key}:${value}`); // name:Maria, then age:25 }

Run > Reset

The rest ‘…’

In case it is necessary to get not only the first values but also to assemble all the followings, you have the option of adding another parameter for getting “the rest” by just using three dots “…”, like this:

Javascript arrays rest

let [name1, name2, ...rest] = ["John", "Doe", "doctor", "surgeon"]; console.log(name1); // John console.log(name2); // Doe // Note that type of `rest` is Array. console.log(rest[0]); // doctor console.log(rest[1]); // surgeon console.log(rest.length); // 2

Run > Reset

Default Values

In case there are fewer values in the array than variables in the assignment, no error will occur. The values that are absent will be considered undefined:

Javascript arrays rest

let [firstName, surname] = []; console.log(firstName); // undefined console.log(surname); // undefined

Run > Reset

If you want a default value for replacing the one that is missing, use the = sign, as follows:

Javascript arrays rest

// default values let [name = "David", surname = "Smith"] = ["Peter"]; console.log(name); // Peter (from array) console.log(surname); // Smith (default used)

Run > Reset

Destructuring an Object

You can use the destructuring assignment with objects, as well, by using the following basic syntax:

let {  var1,  var2} = {  var1: …,  var2: …}

On the right side, there is an existing object that is necessary to split into variables. On the left side, there is a pattern for matching properties. The three dots sign {...} includes a group of variable names.

Here is an example:

Javascript arrays destructuring an object

let options = { title: "Car", model: "BMW M5", year: 2020 }; let { title, model, year } = options; console.log(title); // Car console.log(model); // BMW M5 console.log(year); // 2020

Run > Reset

The properties options.title, options.width and options.height are assigned to matching variables. The arrangement doesn’t matter. This option will also work:

// changed the order in let {...}
let {
  year,
  model,
  title
} = {
  title: "Car",
  model: "BMW M5",
  year: 2020
}

For assigning a property to a variable with different name, then you can act like this:

Javascript arrays destructuring an object

let options = { title: "Car", model: "BMW M5", year: 2020 }; // { sourceProperty: targetVariable } let { model: m, year: y, title } = options; // width -> m // height -> y // title -> title console.log(title); // Car console.log(m); // BMW M5 console.log(y); // 2020

Run > Reset

For possible missing properties, you have the option of setting default values using the sign of “=”, as follows:

Javascript arrays destructuring an object

let options = { title: "Car" }; let { model = "BMW M5", year = 2020, title } = options; console.log(title); // Car console.log(model); // BMW M5 console.log(year); // 2020

Run > Reset

The default values might be any expressions or function calls.

In case there is a complex object with a range of properties, you may choose to extract what you need, as follows:

Javascript arrays destructuring an object

let options = { title: "Car", model: "BMW M5", year: 2020 }; // only extract title as a variable let { title } = options; console.log(title); // Car

Run > Reset

The Rest Pattern “…”

Another scenario can also happen: the quantity of the object properties is more than the variables you have. In such cases, you can use the rest pattern. But, note that it works only on modern browsers.

Here is the example:

Javascript arrays destructuring an object

let options = { title: "Book", page: 200, species : "scientific" }; // title = property named title // rest = object with the rest of properties let { title, ...rest } = options; // now title="Book", rest={page: 200, species: scientific} console.log(rest.page); // 200 console.log(rest.species); // scientific

Run > Reset

Nested Destructuring

Imagine that an array or an object includes other nested arrays or objects. More complex, left-side patterns might be used for extracting deeper portions.

In the example below, options contain another object in the property views and array in the property items:

Javascript arrays nested destructuring an object

let options = { views: { model: "sport", year: 2020 }, items: ["Car", "Bike"], extra: true }; // destructuring assignment split in multiple lines for clarity let { views: { // put size here model, year }, items: [item1, item2], // assign items here title = "Car&Bike" // not present in the object (default value is used) } = options; console.log(title); // Car&Bike console.log(model); // sport console.log(year); // 2020 console.log(item1); // Car console.log(item2); // Bike

Run > Reset

It’s important to know that all the properties of options object except extra (it’s absent at the left side), are assigned to matching variables.

So, the model, year, item1, item2, and title are of the same value. But, no variables exist for views and items.

The Parameters of Smart Function

Sometimes a function has many parameters, and most of them are optional. But, let’s see that a function creates a menu. It will have a height, width, items list, a title, and more.

We don’t recommend you to write the function, like this:

function showBook(title = "Javascript", page = 200,  species : "programming"
, items = []) {
  // ...
}

The main problem is remembering the order of the arguments. Another problem is to find a way of calling a function when the majority of the parameters are good by default.

The most optional action is passing parameters as an object. The function will destructurize them into a variable at once, like this:

Javascript arrays

// we pass object to function let options = { title: "Js book", items: ["Item1", "Item2"] }; function showBook({ title = "Javascript", pages = 200, species = "programming", items = [] }) { // title, items – taken from options, // pages, species – defaults used console.log(`${title} ${species} ${pages}`); // Javascript programming 200 console.log(items); // Item1, Item2 } showBook(options);

Run > Reset

There is another, more complex way of destructuring, including nested objects and colon mappings.

For instance:

Javascript arrays

let options = { title: "Js book" }; function showBook({ title = "Javascript", p = 200, //pages goes to p s = "programming", // species goes to s }) { console.log(`${title} ${s} ${p}`); // Javascript programming 200 } showBook(options);

Run > Reset

The full syntax will look like this:

function ({
  incomingProperty: varName = defaultValue
    ...
})

As you can see, it’s the same as for a destructuring assignment.

Then, for the parameters’ object, there will be a variable varName for incomingProperty.

Destructuring like this considers that showBook() has no argument. In case you want all the values by default, then specify an empty object, like this:

showBook({}); // ok, all values are default
showBook(); // this would give an error

It is possible to fix it by setting {} the default value the object of parameters.

For instance:

Javascript arrays

function showBook({ title = "Book", species = "programming", pages = 200 } = {}) { console.log(`${title} ${species} ${pages}`); } showBook(); // Book programming 200

Run > Reset