
# Destructuring

[Destructuring is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.](https://dev.to/sarah_chima/destructuring-assignment---arrays-16f)

Rather than getting a whole data, with destructuring we can only retrieve the values we want.

## Destructuring arrays

We have a function groceries which returns us our list of items that we wish to buy next time we go to a supermarket.

The data that groceries function returns is as follows; [bread, apples, cheese]

In a traditional sense we would get a reference to each item in this way;

```js
const groceriesList = groceries();
const bread = groceriesList[0];
const apples = groceriesList[1];
const cheese = groceriesList[2];
```

Destructuring allows us to achieve this in an elegant and simple way

```js
const [bread, apples, cheese] = groceries();
```

If you also want a reference to the groceries list all you need to do is;

```js
const [bread, apples, cheese] = (groceriesList = groceries());
```

But, what happens if groceries returns us an array with four values?

Simply, we would only get the first three values without touching the fourth value.

What happens when we want to retrieve three values but groceries function returns two values?

Let's say the array doesn't have **cheese value** and we want to reference to this value with the **cheese variable**.

The code would not break and the cheese variable will simply be **undefined**

### Undefined values

Another case is when a value is undefined.

Imperatively if a value can be undefined and we want a default value to it when it's undefined.

We would do;

```js
const name = names[0] !== undefined ? names[0] : "unregistered";
```

Declaratively, using destructuring we do;

```js
const [name = "unregistered"] = names;
```

### What if we want to get the first three into their own variables and the rest into one variable?

In order to achieve this we use the spread operator.

```js
const [
	bread,
    apples,
    cheese
    // gather the rest of them and put them into variable others
    ...others
    ] = groceries()
```

### Variable swapping with destructuring

Destructuring allows a handy trick for swapping two variables without the need for a temp variable.

```js
[x, y] = [y, x];
```

### Destructuring function paramaters

You can destructure an array which is a parameter to a function

```js
const arr = [1, 2, 3, 4, 5];
const firstThree = ([one = 10, two, three]) => {
    // do something
};
```

The parameter 10 has a default value of 10 if it receives undefined

### Destructuring nested arrays

We can destructure nested array using another pair of brackets inside our brackets

```js
const data = [1,[2,3],4]
const [
	one,
    // fallback to an empty array if undefined
    [two, three] = [],
    four
]
```


JS Bits - Destructuring arrays in JavaScript!


# Welcome to JS Bits

Hello everyone, welcome to the first post on my new series JS Bits where I explain and also show you use cases where you can use them.

## Array Methods

### Array.prototype.find(callback)

Takes a callback function that returns the value of the first element that satisfies the condition.

```js
const arr = [5, 12, 8, 130, 44, 130];
const found = arr.find((element) => element > 50);
// found is equal to 130. It found the value 130 in the third index and returned it.
```

### Array.prototype.findIndex(callback)

Similar to find method, returns the index of the first value that satisfies the condition

```js
const arr = [1, 2, 3, 4, 5];
// return the index of value 3 which is 3
const isLargeNumber = arr.findIndex((element) => element > 2);
```

### Array.prototype.includes(valueToFind[, fromIndex])

Returns true or false whether the array includes the given value.

```js
const arr = [3, 2, 5, 6];
console.log(arr.includes(5)); // returns true
```

As an optional argument includes takes a parameter fromIndex which means where to begin the searching for the valueToFind

```js
const arr = [3, 2, 5, 6];
// starts searching the value 5 in arr beginning from the second index which returns true.
console.log(arr.includes(5, 2));
```

### Array.prototype.flat([depth])

Creates a new flattend array with all the sub-array (nested parts) values taken out and concentinated in to the higher depth.
You will understand it better with this example;

```js
// we have a nested array like this
const arr = [1,2,[3,4], 5, 6, [[7]]
// this array has [3,4] which goes one level deeper and empty array of [[]] which goes two levels deeper
// default value is one, returns the array: [1,2,3,4,5,6,[7]]
const newArr = arr.flat()
// goes to the depth of two and returns: [1,2,3,4,5,6,7]
const otherARr = arr.flat(2)
```

### Array.prototype.flatMap(callback(currentValue[, index[, array]])

It is very common now to use functional programming or FP methods in JavaScript like map().

If you want to use flat() on an array you are mapping. You have to first map(), which creates a new array and then call the flat() method.

flatMap() combines a map and a flat with a **depth of one** by first mapping each element and then running flat on the newly created array.

```js
const arr = [1, 2, 3, 4];
const doubleArr = arr.flatMap((x) => [x * 2]);
// [2, 4, 6, 8]
```

A very good use case of flatMap() is adding or removing items during a map().

```js
const returnDoubles = [1, 2, 3, 4, 5, 6].flatMap((v) => {
    if (v % 2 === 0) {
        return [v];
    } else {
        return [];
    }
});
// [2,4,6]
```

Keep in mind that if you want to run flatMap() with a depth different than one(1).
You have to call flat() additionally with a map().


Posts

JS Bits - Destructuring arrays in JavaScript!

JS Bits - Array Methods