JavaScript Destructuring Assignment - 2
Tags: javascript, tutorial, codenewbie, webdev
Published: 2021-03-19 04:43:43

We've covered the basics of [destructuring assignment](https://dev.to/bello/javascript-object-destructured-assignment-1jmi). This article is the continuation of [part 1](https://dev.to/bello/javascript-object-destructured-assignment-1jmi)

> Destructuring assignment is a more convenient and special syntax that allows unpacking of arrays or objects into separate variables. It is used on array, objects, and functions.

### Array destructuring
Let's see a couple of examples below:

```js
const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, firstName, otherName ] = arr;
// split individual items into separate variables 
// => "Bello Osagie Noah".split(' ');

console.log(surName); // Bello => surName = arr[0]
console.log(firstName);  // Osagie => firstName= arr[1]
console.log(otherName );  // Noah => otherName = arr[2]
```

The example above is the same as below:

```js
const [ surName, firstName, otherName ] = "Bello Osagie Noah".split(' ');

console.log(surName); // Bello => surName = arr[0]
console.log(firstName);  // Osagie => firstName= arr[1]
console.log(otherName );  // Noah => otherName = arr[2]
```

Destructuring allows certain elements in an array to be omitted by omitting the element variable.

```js
const arr = [ "Bello", "Osagie", "Noah" ];
const [ surName, /*omitted*/ , otherName ] = arr;

console.log(surName); 
console.log(otherName);
```

It works with any iterable data structure like strings, objects, sets, etc.

```js
// string
const [ a, b, c ] = "xyz";
console.log(a); // x
console.log(b); // y
console.log(c); // z

//obj
const obj = { one: 1, two: 2, three: 3 };
const { one, two, three } = obj;
console.log(one);  // 1
console.log(two);  // 2
console.log(three); // 3

// set
const [ one_, two_, three_ ] = new Set([1, 2, 3]);
console.log(one_) // 1
console.log(two_) // 2
console.log(three_) // 3
```

You can also unpack numbers to a variable by the rest parameters.

```js
const [ one, two, ...numb ] = [ 1, 2, 3, 4, 5, 6 ]
// the rest will be all except one and two

console.log(one); // 1
console.log(two); // 2
console.log(numb); // [ 3, 4, 5, 6 ]
```

The rest operation above works on objects also:

See below:

```js
const obj = {
  one: 1,
  two: 2,
  three: 3,
  four: 4,
  five: 5,
  six: 6,
};

const { one, two, ...numb} = obj;

console.log(one); // 1
console.log(two); // 2
console.log(numb); // { three: 3, four: 4, five: 5, six: 6 }
```

We can also add properties in an object by setting default values (use `=`).

```js
const obj = { one: 1 };

const { two = 2, three = 3, one } = obj;

console.log(one);  // 1
console.log(two);  // 2
console.log(three); // 3
```

We can set default values also in arrays.

```js
const [ firstName = "John", lastName = "Bello" ] = [ "Osagie" ];

console.log(firstName);    // Osagie
console.log(lastName ); // Bello
```

We can also swap values of two variables using a destructuring assignment.

```js
let firstName = "Osagie";
let lastName = "Bello";

// swap to firstName=Bello, lastName=Osagie
[ firstName, lastName ] = [ lastName, firstName ];

console.log(`${firstName} ${lastName}`);  // Bello Osagie
```

We can also destructure to loop over keys-and-values of an object.

```js
const person = {
  name: "Bello",
  age: 27
};

for ( let [ key, value ] of Object.entries(person) ) {
  console.log(`${key}:${value}`);
  /* 
  name:Bello
  age:27
  */
}
```

It works on iterable objects like maps.

```js
const map = new Map();
    .set("name", "Bello");
    .set("age", "27");

// syntax looks more convenient with map
for (let [key, value] of map) {
  console.log(`${key}:${value}`); 
  /* 
  name:Bello
  age:27
  */
}
```

We can use restructure an array (object) returned by a function.

```js
const arr = () => {
  return [ 4, 6, 2]
};

const [ four, , two ] = arr();
console.log( arr() ); // [ 4, 6, 2 ]
```

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---