Destructuring arrays and objects

Destructuring in JavaScript is an assignment syntax that allows you to conveniently extract data from arrays and objects in one line.

Object destructuring

Live Editor

function learnJavaScript() { // Create a `fruit` object let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // Destructuring the `fruit` object let { title, group, quantity } = fruit // Display `title` return title }

function learnJavaScript() {
  // Create a `fruit` object
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }

  // Destructuring the `fruit` object
  let { title, group, quantity } = fruit

  // Display `title`
  return title
}

Result

Loading...

The properties title, group and quantity repeat the structure of the object fruit and copy their values into identical variables found in {...}. Therefore, if you swap the variables in {...}, then the code will work just as well, try swapping the variables in the example above.

Nested object

We can also destructure the nested object.

Live Editor

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: { store: 5, storeHaus: 99 } } let { title, quantity: { store: s1, storeHaus: s2 } } = fruit return title + ', ' + parseFloat(s1 + s2) }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: {
      store: 5,
      storeHaus: 99
    }
  }

  let {
    title,
    quantity: { store: s1, storeHaus: s2 }
  } = fruit

  return title + ', ' + parseFloat(s1 + s2)
}

Result

Loading...

Other names

If you need to use variable names other than property names, the following syntax will work:

Live Editor

function learnJavaScript() { let fruit = { title: 'banana', group: 'tropical', quantity: 5 } // title -> a; group -> b; quantity -> c let { title: a, group: b, quantity: c } = fruit return a }

function learnJavaScript() {
  let fruit = {
    title: 'banana',
    group: 'tropical',
    quantity: 5
  }
  // title -> a; group -> b; quantity -> c
  let { title: a, group: b, quantity: c } = fruit

  return a
}

Result

Loading...

Default values

If in {...} you write a property variable which will not be found, then it will be assigned the value undefined. To assign a default value to a variable , you can assign that value to it. If you try to assign a value to a variable whose properties are found, then the property value will be assigned to it. Let's look at an example.

Live Editor

function learnJavaScript() { let fruit = { title: 'banana' } let { title = 'lime', group, quantity = 5 } = fruit return title + ', ' + group + ', ' + quantity }

function learnJavaScript() {
  let fruit = {
    title: 'banana'
  }
  let { title = 'lime', group, quantity = 5 } = fruit

  return title + ', ' + group + ', ' + quantity
}

Result

Loading...

The title contains the property value, not what we assign to it. The group property does not exist in the fruit object, and we have not assigned any values to the variable . The property quantity also does not exist, but we assigned the value 5 to the variable .

Remainder

If you need to get one variable from an object, and group the rest into another object, then use ... before the variable from which the object with the remaining properties will be created.

Live Editor

function learnJavaScript() { let fruit = { title: 'banana ', group: 'tropical ', quantity: 5 } let { group, ...prop } = fruit return prop.title + group }

function learnJavaScript() {
  let fruit = {
    title: 'banana ',
    group: 'tropical ',
    quantity: 5
  }
  let { group, ...prop } = fruit

  return prop.title + group
}

Result

Loading...

Destructuring arrays

Destructuring of an array is the same as for an object. The only difference is that the values of the array elements will be assigned to the variables in the order in which the elements are defined.

Live Editor

function learnJavaScript() { // Create an array `fruit` let fruit = ['banana', 'tropical', 5] // Destruct the `fruit` array let [title, group, quantity] = fruit // Display return `${title}, ${group}, ${quantity}` }

function learnJavaScript() {
  // Create an array `fruit`
  let fruit = ['banana', 'tropical', 5]

  // Destruct the `fruit` array
  let [title, group, quantity] = fruit

  // Display
  return `${title}, ${group}, ${quantity}`
}

Result

Loading...

Remainder

By analogy with objects, the remainder works.

Live Editor

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let [name, ...prop] = fruit return `${name}, ${prop}` }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let [name, ...prop] = fruit

  return `${name}, ${prop}`
}

Result

Loading...

Copy of array

An example of creating a copy of an array.

Live Editor

function learnJavaScript() { let fruit = ['banana ', 'tropical ', 5] let _fruit = [...fruit] return _fruit }

function learnJavaScript() {
  let fruit = ['banana ', 'tropical ', 5]

  let _fruit = [...fruit]

  return _fruit
}

Result

Loading...

Concatenating arrays

An example of combining arrays into one.

Live Editor

function learnJavaScript() { let name = ['banana '], prop = ['tropical ', 5], fruit = [...name, ...prop] return fruit }

function learnJavaScript() {
  let name = ['banana '],
    prop = ['tropical ', 5],
    fruit = [...name, ...prop]

  return fruit
}

Result

Loading...

Problems?

Write to Discord chat.

Questions:

Destructuring is it?

1. Function
2. Syntax
3. Object

Is it necessary, when destructuring an object, to put variables in the same order as they are in the object?

1. Yes
2. No

What will be assigned to a variable if no identical property is found in the object?

1. error
2. undefined
3. unknown

Is the order of elements in an object important when it is destructed?

1. Yes
2. No

In order to understand how much you learned this lesson, take the test in the mobile application of our school on this topic or in our telegram bot.

Links

1. Learn JavaScript
2. MDN Web Docs
3. Destructuring in ES6

Contributors ✨

Thanks goes to these wonderful people (emoji key):

IIo3iTiv

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨