Introduction to Javascript Destructuring
Tags: todayilearned, beginners, javascript, react
Published: 2021-04-29 08:29:52

Javascript Destructuring facilitates the process of obtaining the individual values of arrays and objects, then assigning them to variables. This can be possible with a few lines of code.

Destructuring can be useful in different situations, which I will describe below.

# Array Destructuring

Let's start talking about array destructuring, this syntax can allow you to obtain the values from the array and assign them to variables. the following examples apply this in different ways:

> Assigning a variable from an array

```javascript
const [a, b] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 2
```

> Assigning a variable from a nested array

```javascript
const [a, [b]] = [1, [3, 2], 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(b); // Output: 3
```

> Skipping values is possible by leaving an empty space and a comma. the number of commas will skip a number of values inside the array. 

```javascript
const [a,, c] = [1, 2, 3, 4, 5, 6, 7];
console.log(a); // Output: 1
console.log(c); // Output: 3
```

> We can combine the rest operator `...` with destructuring, which assigns the rest of the array values to the variable `rest`.

```javascript 
const [a, b, ...rest] = [1, 2, 3, 4, 5, 6, 7]
console.log(rest); // Output: [3, 4, 5, 6, 7]
```

> We can also define default values in case the value from the array is not present, in this example below, we are destructuring an array with 2 values, however, we have a third variable `c` which will be assigned to a default value of `3`.

```javascript
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // Output: 1 2 3
```

> Whenever the value is present in the array, the variable will no be assigned to the default value but to the value in the array. below we see the variable `c` is assigned to the value from the array, which is `4`.

```javascript
const [a, b, c = 3] = [1, 2, 4];
console.log(a, b, c); // Output: 1 2 4
```

> Swapping variables with array destructuring

```javascript
let name1 = 'Louise';
let name2 = 'Ellie';

console.log(name1, name2); // Louise Ellie 
[name1, name2] = [name2, name1];
console.log(name1, name2); // Ellie Louise 
```

# Object Destructuring

Object destructuring allows you to obtain the values from the object properties and assign them to variables. the following examples apply this in different ways:

> Assigning a variable from an object

```javascript
const {name, age} = {name: 'Ellie', age: 27};
console.log(name); // Output: Ellie
console.log(age); // Output: 27
```
> Assigning a variable from a nested object

```javascript
const details = {
  name: 'Louise',
  age: 25,
  languages: {
    frontEnd: ['HMTL', 'CSS', 'JavaScript', 'React'],
    backEnd: ['Node.js', 'Express.js'],
    database: ['PostgreSQL', 'MongoDB'],
  }
}

const {name, age, languages: { frontEnd, backEnd, database }} = details;
console.log(frontEnd); // Output: ["HMTL", "CSS", "JavaScript", "React"]
console.log(backEnd); // Output: ["Node.js", "Express.js"]
console.log(database); // Output: ["PostgreSQL", "MongoDB"]
```

> Assigning the rest of an object to a variable

```javascript
const { a, b, ...rest } = { a: 12, b: 43, c: 67, d: 17 };
console.log(a); // Output: 12
console.log(b); // Output: 43
console.log(rest); // Output: {c: 67, d: 17}
```

> With object destructuring is also possible to set default values, but also to rename values. renaming values is usually useful when there are invalid property identifiers inside objects. in the example below `name` is assigned to the `firstName` variable and the `likesProgramming` variable is assigned to `false` as a default value.

```javascript
const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27};
console.log(firstName); // Output: Ellie
console.log(age); // Output: 27
console.log(likesProgramming); // Output: false

const {name: firstName, age, likesProgramming = false} = {name: 'Ellie', age: 27, likesProgramming: true};
console.log(likesProgramming); // Output: true
```

> Destructuring an object passed as a functions argument. in the example below, the `name`, `age`, and `country` are being destructured right in the function argument. (This would also be possible with arrays).

```javascript
const details = {
  name: "Max",
  age: 23,
  country: "Spain"
};

const showDetails = ({ name, age, country }) => {
  console.log("Name: " + name, "Age: " + age, "Country: " + country);
};

showDetails(details); // Output: Name: Max Age: 23 Country: Spain 
```

> It is also possible to rename and set default values inside functions. In the example below, the `name` value is assigned to the variable `firstName`, and the `likesProgramming` variable has a default value of  `false`.

```javascript
const showDetails = ({name: firstName, age, likesProgramming = false}) => {
  console.log('First Name: ' + firstName + ', ' + 'Age: ' + age + ', ' + 'Likes Programming: ' + likesProgramming);
}

const details = {name: 'Ellie', age: 27};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: false
```
>  Here we add the property `likesProgramming` set to `true` inside the `details` object, therefore once we run the `showDetails` function it won't use the default value anymore. It will destructure the property from the object instead.

```javascript
const details = {name: 'Ellie', age: 27, likesProgramming: true};
showDetails(details);
// Output: First Name: Ellie, Age: 27, Likes Programming: true
```

> A returned object from a function, can be destructured right after the function has been called, as shown below. (This would also be possible with arrays).

```javascript
const showDetails = () => ({name: 'Knox', age: 20, city: 'New York'});

const {name, city} = showDetails();

console.log(name); // Output: Knox
console.log(city); // Output: New York
```

Thank you for reading! See you in the next one, Happy Coding! 😃